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

Post on:2020年10月29日

Radix Iconsの特徴

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

Radix Icons

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

Figma
Sketch
IconJar

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

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

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

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

Radix Iconsのダウンロード

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

Radix Icons

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

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

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

Radix Iconsの使い方

インストール

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

npm install @modulz/radix-icons

1	npm install @modulz/radix-icons

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

import { FaceIcon, ImageIcon, SunIcon } from '@modulz/radix-icons'
 
function MyComponent () {
  return (
    <div>
      <FaceIcon />
      <SunIcon />
      <ImageIcon />
    </div>
  )
}

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

function MyComponent () {

return (

<div>

</div>

)

}

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

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

<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><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>