IcoMoon Icons logo

IcoMoon でフォント作成:自作 SVG をウェブフォントに

IcoMoon の本領は既製アイコンの配布ではなく、自分の SVG からアイコンフォントを作れることです——この機能が無料なのは競合を見渡しても貴重です(Font Awesome では有料キットの領域)。必要なのは単色の SVG ファイルだけ。手順は読み込み → 整理 → 生成の 3 段階で、10 個程度なら 15 分もかかりません。

準備:SVG は「単色・パス化」が鉄則

フォントのグリフは 1 色しか持てません。多色の SVG はフォント化の過程で単色に落とし込まれるため、意図した形を保つには書き出し前にデザインツール側で「アウトライン化(テキストや線をパスに変換)」を済ませておきます。Illustrator なら「文字のアウトライン」+「パスのアウトライン」、Figma なら Flatten が該当します。

自作フォントを作る 3 ステップ

icomoon.io/app で Import Icons から SVG を投入(複数まとめて可)。「Untitled Set」に並ぶので必要な分を選択。② Generate Font で確認画面へ——ここでグリフ名(=CSS クラス名)と unicode コードを整えます。日本語ファイル名のままだとクラス名に使えないので半角英数にリネームを。③ Download で TTF / WOFF / WOFF2 と CSS、そしてプロジェクトの保存データ selection.json が手に入ります。基本操作の詳細は使い方ページと共通です。

既存フォントへのアイコン追加(フォントの追加・更新)

一度作ったフォントに後からアイコンを足したい——この時こそ selection.json の出番です。アプリに Import すると前回のプロジェクトが完全復元されるので、新しい SVG を追加選択して再生成するだけ。既存グリフのコードポイントが保持されるため、公開済みの CSS を壊さずにフォントだけ差し替えられます。selection.json なしでゼロから作り直すとコードがずれ、表示崩れの原因になります。

無料 491 アイコンと混ぜて使う

自作分と IcoMoon Free の 491 個を同じフォントにまとめることもできます(ライセンスは混在部分についてクレジット表記—— 商用利用の条件参照)。どのアイコンがあるかは一覧ライブラリで検索を。作ったフォントの権利はあなたのものです。