無料で使えるCSSで簡単に使える便利なアイコンフォント集

アイコンフォントといえば、fontawesome一択みたいな運域はありますが、最近は別のものでも結構便利なアイコンフォントが合ったりします。

個人的にはfontawesome好きなんですが、矢印(chevron-right)とかが自分のデザインに合わなくてもやもやもやもやしていました。

いくつか気に入ってる、簡単に使えるアイコンフォントをご紹介します。

Line Icons

完全無料で使えるおしゃれなアイコン集。
個人的には一番お気に入りです。

公式サイト

使い方

CDNで読み込む

下記のCSSを読み込む

<link href="https://cdn.lineicons.com/1.0.1/LineIcons.min.css" rel="stylesheet">

HTMLのサンプル

cheetsheetにあるアイコンを選択してclassをつける

<i class="lni-add-file"></i>
<i class="lni-cart"></i>
<i class="lni-calculator"></i>

Linearicons

無料版とプロ版とあります。
無料版でも170個のアイコンがあるので結構使えます。

公式サイト

使い方

CDNで読み込む

下記のCSSを読み込む

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

HTMLのサンプル

cheetsheetにあるアイコンを選択してclassをつける

<span class="lnr lnr-mustache"></span> 

宣伝

最近Webデザイナ向けのお役立ちサイトを作りました。よかったらこのサイトも御覧ください

この記事を書いた人

conti

名古屋在住のUIデザイナ。UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントの実装するのが得意です。最近はReactを触るのとデザインシステムを作るのが好きです。コーギーと暮らしています。
プロフィール