複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール

これまた、便利なツールが登場しました!
使用するアイコンだけをアイコンフォントやSVGアイコンのセットにできる無料オンラインツールを紹介します。

さまざまなアイコンプロジェクトがサポートされており、BootstrapやMaterial Designをはじめ、当ブログでも紹介したことのある数多くのアイコンから使用するアイコンだけを選択できます。

例えば、Bootstrapからホームとアローだけをセットにするとか、BootstrapのホームとMaterial Designのアローをセットにするとかも簡単です。

複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール

Icônes
Icônes -GitHub

Icônesの特徴

Icônesは複数の商用利用無料のアイコンから、使用するアイコンを選んでセットにして利用できるオンラインツールです。
登録など面倒なことは一切なく、ブラウザから簡単に利用できます。

サイトのキャプチャ

Icônes

  • バッグにアイコンを選択して、使用したいアイコンだけをアイコンフォントのパックにします。
  • 各アイコンを使用する時のコードやSVGを簡単にコピペで利用できます。
  • カテゴリ・検索で目的のアイコンをすぐに探せます。
  • アイコンの表示はライトモード・ダークモード対応。
  • モバイルフレンドリー。
  • ツールは、Vue.jsViteで構築されています。
  • MITライセンスで、商用プロジェクトでも無料で利用できます。
    ※アイコンのライセンスは各プロジェクトごとに異なります。
アイコンのライセンス

アイコンのライセンスはMITやOpen Font Licenseが多く、全部商用利用無料です。

Icônesの使い方

Icônesの使い方は、簡単です。
まずは、サイトにアクセスします。
※登録など面倒なことは一切不要です。

サイトのキャプチャ

Icônes

当ブログでも紹介した商用無料のアイコンがたくさん登録されています。まずは、Material Designのアイコンを選択してみます。

サイトのキャプチャ

Material Designのアイコンを選択

たくさんのアイコンから希望のアイコンを探すのは、大変です。
このツールでは、2種類の方法で探せます。1つ目は、カテゴリ。

サイトのキャプチャ

「Navigation」のカテゴリでアイコンを探す

2つ目は、検索。

サイトのキャプチャ

「Home」でアイコンを探す

目的のアイコンを見つけたら、クリックします。

サイトのキャプチャ

ホームアイコンをクリック

このツールの最大の特徴は、バッグ機能です。好みのアイコンをバッグに詰めてセットを作成できます。他にも、アイコンを利用するためのスニペットやコンポーネント、SVGファイルのダウンロードができます。

サイトのキャプチャ

「add to bag」をクリックして、バッグに入れる(in bag)。

他のアイコンも見てましょう。続いて、Bootstarpのアイコン。

サイトのキャプチャ

Bootstarpのアイコンを選択

今度は、右向きのアローを選択して、バッグに入れます。

サイトのキャプチャ

アローアイコンをクリック

バッグに入れると、右下にバッグのアイコンが表示され、数がバッジで表示されます。

サイトのキャプチャ

入れた数が、バッグのアイコンに表示

2つのアイコンをバッグに入れたので、バッグをクリックして中身を見てみます。ホームとアローが入っていますね。
アイコンフォントのパックをダウンロードするには、下部のダウンロードをクリック。

サイトのキャプチャ

選択したアイコンはバッグの中に

ダウンロードしたアイコンフォントのパックです。

サイトのキャプチャ

アイコンフォントのパック

アイコンフォントを使用するには、サンプルのHTMLファイルをそのままコピペで利用できます。

sponsors

top of page

©2020 coliss