商用利用無料!UIデザインに適した、シンプルで使い勝手がよいSVG完備のアイコン素材 -Iconic

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが無料で利用できるIconicを紹介します。

アロー・ホーム、サーチ・ショッピングカート・バッグ・スター・メールなど、UIデザインでよく使用されるアイコンが揃っており、フォーマットはSVGで利用できます。また、Vue, Reactのコンポーネントとしても利用できます。

シンプルで使い勝手がよいSVG完備のアイコン素材 -Iconic

Iconic
Iconic -GitHub

Iconicアイコンの特徴

Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。

サイトのキャプチャ

Iconic

  • アイコンは26のカテゴリに、全160種類。
  • 24pxグリッドに基づくピクセルパーフェクトなデザイン。
  • アイコンのストロークは、1.5px。
  • ベクターのSVGアイコン。
  • Vue, Reactライブラリを介して利用できます。
  • ライセンスはWTFPLで、個人でも商用プロジェクトでも無料でやりたいことに使用できます。

Iconicアイコンの使い方

Iconicのアイコンを使用するのは簡単です。
アイコンを選択し、「Download」または「Copy」ボタンをクリックするだけです。
※要メールアドレス登録(無料)

サイトのキャプチャ

Arrow Right -Iconic

SVGのコードはHTMLに直接記述できます。

Vue.js

npmから@iconicicons/vueまたは@iconicicons/vue3をインストールします。

これで、アイコンをVueコンポーネントとしてインポートできます。

React

npmから@iconicicons/reactをインストールします。

これで、アイコンをReactコンポーネントとしてインポートできます。

Iconicアイコンの種類

IconicにはWebサイトやスマホアプリのUIに使用される160種類のアイコンが揃っています。

サイトのキャプチャ

All -Iconic

カテゴリの中からいくつか紹介します。

サイトのキャプチャ

Arrow -Iconic
上下左右のシンプルなアローをはじめ、ログイン・ログアウト・リフレッシュ・アンドゥ・アップロードなども揃っています。

サイトのキャプチャ

Business -Iconic
ビジネスには、ショッピングカート・ショッピングバッグ・ブリーフケース・印刷のアイコンがあります。

サイトのキャプチャ

Communication -Iconic
メールをはじめ、送信・メッセージ・電話など、コミュニケーション系のアイコンです。

サイトのキャプチャ

Devices -Iconic
スマホ・タブレットをはじめ、プリンター・モニター・サーバー・WiFi・カメラ・バッテリーなどのアイコンです。

サイトのキャプチャ

Interface -Iconic
前述のアローやカートをはじめとしたインターフェイス用のアイコンが揃っています。

サイトのキャプチャ

Security -Iconic
セキュリティは、ロック・シールド・キーのアイコンです。

サイトのキャプチャ

Shapes -Iconic
シェイプは、スター・ボックス・プラス・プレイ・ストップのアイコンです。

サイトのキャプチャ

Shopping -Iconic
カート・バッグをはじめ、タグ・ストア・パーセントのアイコンが揃っています。

sponsors

top of page

©2021 coliss