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ライセンスで、商用プロジェクトでも無料で利用できます。
アイコンのフォーマットはSVGで、各アプリ用のファイルも用意されています。
SVGのアイコンファイルをまとめてダウンロードすることもできます。
ダウンロードしたSVGアイコン
アイコンは全264種類で、極小サイズはもちろん、大きいサイズでも使用できます。
ダウンロードしたSVGアイコン
Radix Iconsのダウンロード
SVGアイコンのダウンロードは、下記ページから。
各アプリ用、アイコンファイルをまとめてダウンロードができます。
Figma用のもダウンロードしてみました。
Radix Iconsの使い方
インストール
アイコンはnpm,経由でインストールもできます。
|
npm install @modulz/radix–icons |
アイコンを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” fill–rule=“evenodd” clip–rule=“evenodd”></path></svg> |
Radix Iconsには、10のカテゴリに全264種類のアイコンが揃っています。
下記は11×11ですが、このサイズでも大丈夫ですね。
アイコン全264種類
@memo,@Design
webデザイン
https://ift.tt/3mAvOKH
October 29, 2020 at 09:36AM
