BanbaYa備忘録 商用利用無料!スマホなどのUIデザインに最適、極小サイズでくっきりと鮮明に見えるSVGアイコン -Radix Icons

参照元  コリス

商用利用無料!スマホなどのUIデザインに最適、極小サイズでくっきりと鮮明に見えるSVGアイコン -Radix Icons

参照URL  https://coliss.com/articles/freebies/crisp-small-svg-icons-radix.html


商用のプロジェクトでも無料で利用できる、スマホなどの小さなスクリーンに適した極小サイズでくっきりと鮮明に見えるSVGアイコンを紹介します。

SVGなので、もちろん大きいサイズでも美しく表示され、カラーの変更も簡単。しかもオープンソースなのは、嬉しいですね。

Radix Icons
Radix Icons -GitHub

Radix Iconsの特徴

Radix Iconsはスマホなどの非常に小さいスペースでも視認性を損なわずに使用できるようデザインされたSVGアイコンで、極小サイズ(15×15)でもくっきりと鮮明に見えるようにデザインされています。
MITライセンスで、商用プロジェクトでも無料で利用できます。

Radix Icons

アイコンのフォーマットはSVGで、各アプリ用のファイルも用意されています。

SVGのアイコンファイルをまとめてダウンロードすることもできます。

ダウンロードしたSVGアイコン

アイコンは全264種類で、極小サイズはもちろん、大きいサイズでも使用できます。

ダウンロードしたSVGアイコン

Radix Iconsのダウンロード

SVGアイコンのダウンロードは、下記ページから。

Radix Icons

各アプリ用、アイコンファイルをまとめてダウンロードができます。

Figma用のもダウンロードしてみました。

Figmaにアイコンをインポート

Radix Iconsの使い方

インストール

アイコンはnpm,経由でインストールもできます。

npm install @modulz/radixicons

アイコンをReactプロジェクトにインポートします。

import { FaceIcon, ImageIcon, SunIcon } from ‘@modulz/radix-icons’

function MyComponent () {

  return (

    <div>

      <FaceIcon />

      <SunIcon />

      <ImageIcon />

    </div>

  )

}

アイコンのSVGコードを取得

サイトのアイコンをクリックすると、SVGコードを簡単に取得できます。

<svg width=“15” height=“15” viewBox=“0 0 15 15” fill=“none” xmlns=“https://ift.tt/nvqhV5”><path d=“M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z” fill=“currentColor” fillrule=“evenodd” cliprule=“evenodd”></path></svg>

Radix Iconsには、10のカテゴリに全264種類のアイコンが揃っています。
下記は11×11ですが、このサイズでも大丈夫ですね。

アイコン全264種類

@memo,@Design

webデザイン

https://ift.tt/3mAvOKH

October 29, 2020 at 09:36AM

Follow me!