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

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

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

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

Icônes
Icônes -GitHub

Icônesの特徴

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

Icônes

• バッグにアイコンを選択して、使用したいアイコンだけをアイコンフォントのパックにします。
• 各アイコンを使用する時のコードやSVGを簡単にコピペで利用できます。
• カテゴリ・検索で目的のアイコンをすぐに探せます。
• アイコンの表示はライトモード・ダークモード対応。
• モバイルフレンドリー。
• ツールは、Vue.jsとViteで構築されています。
• 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ファイルをそのままコピペで利用できます。