無料＆登録いらずで1000種類以上のアイコンをフォントのように使用できる「Unicons」

何らかの意図やさまざまな機能を記号化して表現するアイコンはサービスやUIを分かりやすく彩ってくれるものですが、細かいアイコンを多数用いる場合、画像としてダウンロードして埋め込んで、というのは面倒なもの。アイコン集「Unicons」では、1000以上のアイコンを無料かつ登録いらずでゲットできるほか、画像のダウンロードも不要でフォントのようにサイトにアイコンを埋め込むことができます。

1000+ free vector icons - Unicons - Iconscout
https://iconscout.com/unicons

「Unicons」のトップページから「Start using for Free」をクリックすると、使い方説明にスクロールします。

アイコンを埋め込むために必要なのはわずか2ステップで、CSSに特定のコードを追加した後、埋め込みたいアイコンを選んでコピーしたMark upを記入するだけ。「Copy」をクリックしてコードをコピーし……

適用させたいCSSにペーストするだけでOK。今回はテスト用のHTMLにコピーしたコードを追加して、どんな風にアイコンが表示されるのか確認してみます。

あとはトップページにこれでもかと並んだアイコンから使いたいものを選択し、「Copy」をクリック。

画像のようにコードを追加すると……

サイトにアイコンを埋め込むことができます。サイズや色の変更も可能なので、画像のダウンロードや添付いらずでサイトを簡単に彩ることができます。

「CATEGORIES」から1000以上のアイコンを選択できます。案内やUIで活用できる「Arrows」や……

貨幣やグラフのアイコンなど、仕事関連で活躍しそうな「Business」。

さまざまな種類のフキダシを用途に合わせて選択できる「Chat」など盛りだくさんです。カテゴリは全部で27種類あり、さまざまなシチュエーションに合わせて好みのアイコンを探せるようになっています

また、各種プラグインを導入することで、Microsoft Office WordやAdobe Photoshop、Googleドキュメントなどから、「Unicons」のアイコンも含めたさまざまな素材を使用できるようになります。試しにGoogleドキュメントでUniconsのアイコンを使えるようにしてみます。赤枠部分のアイコンをクリック。

「Download for Free」をクリック。

Googleドキュメントのアドオンページに移動するので、「無料」をクリックしてアドオンをインストールします。

Googleドキュメントが開き画像のように表示されたら「続行」をクリック。これでアドオンの追加は完了です。

メニューの「アドオン」に「Icondrop」が追加されているので、「Icondrop」から「Search」をクリック。

右側にアイコン一覧が表示されます。アイコンをクリックすると、そのままドキュメントにアイコンを入力することが可能です。「Unicons」のアイコンは商標への使用を除き商用利用も許可されているので、多くのシーンで活用することが可能。ライセンスの詳細はここからチェックできます。