$ Free & Open 有料アイコンサービスをや
めてIconifyに移行した

アイコン選びに月額1,300円払い続けるのをやめることにしました。
Flaticonの有料プランを3年ほど使ってきたのですが、最近の使い方を振り返ってみると、実はそこまで必要じゃなくなっていたんです。

<svg class="eyecatch-svg" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="192" height="192" rx="32" ry="32" fill="white"/>
  
  <!-- 左側: 有料アイコンセット(Flaticon的) -->
  <g transform="translate(30, 60)">
    <!-- 背景ボックス -->
    <rect x="0" y="0" width="48" height="48" rx="8" fill="#E0E0E0" stroke="#9E9E9E" stroke-width="2"/>
    <!-- アイコングリッド(4つ) -->
    <rect x="8" y="8" width="14" height="14" rx="2" fill="#607D8B"/>
    <rect x="26" y="8" width="14" height="14" rx="2" fill="#607D8B"/>
    <rect x="8" y="26" width="14" height="14" rx="2" fill="#607D8B"/>
    <rect x="26" y="26" width="14" height="14" rx="2" fill="#607D8B"/>
    <!-- 有料タグ -->
    <circle cx="42" cy="6" r="8" fill="#F44336"/>
    <text x="42" y="10" font-size="10" font-weight="bold" fill="white" text-anchor="middle">$</text>
  </g>
  
  <!-- 中央: 移行矢印 -->
  <g transform="translate(96, 84)">
    <path d="M -12 0 L 12 0" stroke="#2196F3" stroke-width="4" stroke-linecap="round"/>
    <path d="M 4 -8 L 12 0 L 4 8" stroke="#2196F3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  </g>
  
  <!-- 右側: 無料オープンソースアイコンセット(Iconify的) -->
  <g transform="translate(114, 60)">
    <!-- 背景ボックス -->
    <rect x="0" y="0" width="48" height="48" rx="8" fill="#E3F2FD" stroke="#2196F3" stroke-width="2"/>
    <!-- アイコングリッド(4つ、より多様なスタイル) -->
    <circle cx="15" cy="15" r="6" fill="#2196F3"/>
    <rect x="23" y="9" width="12" height="12" rx="2" fill="#4CAF50"/>
    <path d="M 9 26 L 15 38 L 21 26 Z" fill="#FF9800"/>
    <polygon points="29,26 35,26 32,38" fill="#9C27B0"/>
    <!-- 無料タグ -->
    <g transform="translate(42, 6)">
      <circle r="8" fill="#4CAF50"/>
      <path d="M -4 0 L -1 3 L 4 -3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
    </g>
  </g>
  
  <!-- 下部: "Open Source" テキスト表現 -->
  <g transform="translate(96, 130)">
    <text x="0" y="0" font-size="16" font-weight="600" fill="#2196F3" text-anchor="middle" font-family="Arial, sans-serif">Free & Open</text>
  </g>
</svg>有料アイコンサービスをや<br class="chiilabo-br is-on">めてIconifyに移行した

きっかけは、AIコード生成を使うようになったこと。
説明スライドをSVGコードで生成するようになって、一からKeynoteでスライドを作ることは減って、わざわざ Flaticon で探す機会が減っていました1

関連記事

1. Iconifyという選択肢

代替として調べたのがIconifyです。
これは200,000以上のオープンソースアイコンを集約したプラットフォームで、完全無料で使えます。

1. Iconifyという選択肢

Iconifyのサイトでアイコンを選ぶと、SVGコードが直接表示されます2

色やサイズもブラウザ上で調整できて、「Copy to Clipboard」でコピーすれば、PowerPointにもそのまま貼れます。

<iconify-icon icon="mdi:home"></iconify-icon>
Code language: HTML, XML (xml)

React や Vue なら、こういう書き方もできます。
必要なアイコンだけが動的に読み込まれるので、バンドルサイズも気にしなくていい。

import { Icon } from '@iconify/react';
<Icon icon="mdi:home" />
Code language: JavaScript (javascript)

1.1. ライセンスの確認は必要

誤解しないでほしいのは、Iconifyはアイコンを作っているわけではないという点です。
Material Design Icons、Font Awesome、Bootstrap Icons といった有名どころから、個人制作のセットまで、既存のオープンソースアイコンを収集・最適化して配信しています3
いわばアグリゲーターですね。

Iconifyのアイコンは、それぞれ元のライセンスに従います。MIT、Apache 2.0、CC BYなど、セットごとに異なります。
商用利用する場合は、使うセットのライセンスを確認しておくといいでしょう。

公式サイトで各アイコンをクリックすると、ライセンス情報が表示されます。
Material Design Icons は Apache 2.0 なので、商用利用も帰属表示も不要です4

2. 移行の判断基準

Iconifyに移行するかどうかは、使い方次第だと思います。

Flaticonで「family」と検索すると26,023件ヒットしますが、Iconifyだと315件。
数だけ見れば80分の1です。

月に50種類以上の多様なアイコンを使う人、デザインの統一性が最重要な人、アイコンが資料のメイン要素になっている人は、Flaticonを継続したほうがいいかもしれません5
年間15,600円の価値はあります。

逆に、基本的なアイコンが中心で、補助的な役割なら、Iconifyで十分です。

2.1. 唯一の懸念は統一性

Iconifyの弱点は、セット間のスタイルが統一されていないこと。
たとえば、Material Design Icons と Font Awesome を混ぜると、見た目がバラバラになります。

ただ、これは使う側の問題でもあります。
私は Material Design Icons に絞って使うことにしました。7,200種類あれば、だいたいのケースはカバーできます6
スタイルガイドを作って、教材ごとにルールを決めておけば、統一感は保てます。

Flaticonは同一作者のセットや、スタイルフィルタで統一できるのが強みですが、私のように「シンプル優先」なら、そこまで重要ではありませんでした。

  1. 以前は学習資料やスライドを作るとき、Flaticonで「ちょうどいい感じ」のアイコンを探していました。26,000種類もあるので、たいていのニーズには応えられます。カラーエディタでブランドカラーに一括変換できるのも便利でした。
  2. Iconify APIは、世界中に分散されたサーバーからアイコンデータをオンデマンドで配信します。必要なアイコンのみを動的に読み込むため、バンドルサイズを最小限に抑えられます。また、自社サーバーでIconify APIをホストしたり、SVGを直接バンドルすることでオフライン利用も可能です – GitHub – iconify/iconify
  3. IconifyフレームワークはMITライセンスで公開されており、一部の古いパッケージではApache 2.0やGPL 2.0も使われています。ただし、このライセンスは各アイコンセットには適用されず、各アイコンセットは独自のオープンソースライセンスに従います – Iconify Design: All popular icon sets, one framework.
  4. Apache 2.0ライセンスは、商用利用、改変、配布が自由に行えるオープンソースライセンスです。Material Design Iconsはこのライセンスの下で提供されており、帰属表示なしで自由に利用できます – Material Design Icons – Icon Library – Pictogrammers
  5. Flaticon Premiumは月額$12.99(年間約$155.88)で、1,800万以上のアイコンとステッカーにアクセスでき、帰属表示不要、SVG/EPS/PSD/PNG形式でのダウンロード、1日2000ダウンロード、カラーエディタ機能が利用できます – Flaticon Premium: get all our resources and premium files from 12.99 USD/month
  6. Material Design Iconsは、Austin Andrewsが2014年に開始したプロジェクトで、現在はPictogrammersコミュニティによって管理されています。7,200以上のアイコンを提供し、Apache 2.0ライセンスで商用利用・帰属表示も不要です – Material Design Icons – Icon Library – Pictogrammers