【IcoMoon】使い方まとめ｜SVGアイコンをWebフォントにする手順と、いまの書き方

あのー、SVGの画像をフォントにしたいんですけどー

おー、できますよー。IcoMoon で Webフォントにしちゃいましょうー

IcoMoon（アイコムーン）は、SVG のアイコンを Webフォント（アイコンフォント）にできる Web サービスです。用意されているアイコンを選ぶだけでも、自分で作った SVG を読み込んでも使えます。
この記事では、無料・登録なしで使える IcoMoon App で、アイコンを選んでから、サイトに入れて表示するまでの手順をまとめます。2026年の画面で撮り直し、CSS もいまの書き方に直しました。

IcoMoon とは

ブラウザの中で動くアイコンの道具箱です。できることは、おもに3つです。

• 用意されている無料のアイコン（IcoMoon – Free など）から選ぶ
• 自分で作った SVG を読み込む
• 選んだアイコンを、Webフォント（.woff・.ttf など）や SVG にして書き出す

無料プランは登録なしで使えて、作ったものはブラウザの中に保存されます。WOFF2 で書き出す、CSS にフォントを埋め込む、アカウントにプロジェクトを保存する、といったことは有料プランの機能です。

いまのトップページには、上のメニューに「Old App」と「New App（BETA）」の2つが並んでいます。New App はまだベータ版で、便利な機能の多くが有料プランです。この記事では、無料で手順がシンプルな Old App を使います（前の記事の「IcoMoon App」と同じものです）。

IcoMoon の使い方（5つの手順）

1. Old App をひらく

トップページの上のメニューから「Old App」をクリックします。アイコンがずらっと並んだ画面がひらきます。

2. 使いたいアイコンを選ぶ

アイコンをクリックすると、黄色い枠がついて選ばれた状態になります。下のまん中の「Selection」に、選んだ数が出ます。上の検索欄（search…）に英語で「home」「mail」などと入れると、探しやすいです。

自分で作った SVG を使いたいときは、左上の「Import Icons」から読み込みます。読み込んだアイコンも、同じようにクリックして選びます。

3. Generate Font をクリック

右下の「Generate Font」をクリックすると、選んだアイコンの一覧に変わります。アイコンの名前（home など）と、文字コード（e900 など）が並びます。名前はクリックして変えられます。この名前が、あとで使うクラス名（icon-home）になります。

4. Preferences でフォント名を決める

上の「Preferences」をクリックすると、設定がひらきます。
ほかのアイコンフォントと名前がぶつからないように、「Font Name」と「Class Prefix」は自分のサイト用に変えておくのがおすすめです。たとえば 125naroom では、フォント名を「icomoon_125」にしています。

5. Download でダウンロード

右下の「Download」をクリックすると、zip ファイルがダウンロードされます。ひらくと、だいたい次のものが入っています。

CSS は、いまの書き方で

ダウンロードした style.css には、.eot や .svg も書かれていることがあります。これは Internet Explorer や古いスマホのためのものです。いまのブラウザなら .woff だけで表示できるので、.woff と .ttf の2つにしておけば十分です。

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.woff?ch1k2p') format('woff'),
       url('fonts/icomoon.ttf?ch1k2p') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}
.icon-film:before {
  content: "\e913";
}

• url('fonts/…') は、CSS ファイルから見たフォントの場所です。CSS とフォントを別のフォルダに置くときは、ここを合わせます。
• うしろの ?ch1k2p は、ダウンロードするたびに変わる目印です。ブラウザのキャッシュで古いフォントが出ないようにするためのものなので、そのまま使います。
• WOFF2（いちばん軽い形式）で書き出すのは有料プランの機能です。無料なら .woff で問題ありません。

HTML・CSS・文字コードで使う

Generate Font の画面で、アイコンの下の「Get Code」をクリックすると、そのアイコンの書き方が出ます。

<span class="icon-home" aria-hidden="true"></span>

.link:before {
  font-family: 'icomoon';
  content: "\e900";
}

<span class="icon" aria-hidden="true">&#xe900;</span>

アイコンフォントは「文字」なので、読み上げソフトが変な記号として読んでしまうことがあります。飾りのアイコンには aria-hidden="true" をつけておきましょう。
アイコンだけのボタンには、何のボタンかを aria-label で書いておきます。

<button type="button" aria-label="ホームへ">
  <span class="icon-home" aria-hidden="true"></span>
</button>

あとからアイコンを足すとき（selection.json）

ダウンロードした zip の中の selection.json を使うと、前に作ったフォントの続きから作業できます。

1. Old App の左上「Import Icons」で、selection.json を読み込む
2. 前に選んだアイコンが、選ばれた状態でもどってくる
3. 足したいアイコンを選ぶ（自分の SVG も読み込める）
4. Generate Font → Download で、もう一度ダウンロード
5. サーバーの fonts/ と CSS を、新しいものに入れかえる

selection.json から作り直すと、前からあるアイコンの文字コード（e900 など）は変わりません。なので、すでに書いた HTML や CSS はそのまま使えます。

アイコンが出ないとき

アイコンフォントと SVG、どちらを使う？

いまは、SVG をそのまま HTML に書く方法もよく使われます。どちらにもよいところがあります。

さいごに

125naroom でも、メニューや「別のタブでひらく」のマークなどに、IcoMoon で作ったアイコンフォント（icomoon_125）をいまも使っています。
selection.json さえ残しておけば、何年たってもアイコンを足せるのがうれしいところです。

わー、selection.json はなくさないようにしますー

このサイトでも何年も使ってますー、とっても便利ですー

ふふたりの小言