ICOOON MONOは会員登録なしで6,000種類以上のアイコン素材を無料で使える便利なサービスです。ブログやHPに使う商用利用も可能でその際のクレジット表記も必要ありません。今回はそんな便利に使えるICOOON MONOの使い方などをお伝えします。
使用例
ICOOON MONOでは複数のダウンロード形式を選ぶことが出来ます。今回は例として医療機器であるAED（下の写真）のアイコンを使ってどんなダウンロード形式があるかを見てみましょう。
JPG形式
JPG形式では背景（白色）付きでダウンロードが可能です。
PNG形式
PNG形式では背景が透明（透過）のアイコンをダウンロード可能です。
上記の画像は分かりやすく背景に「背景は透明」と表記しています。
SVG形式
SVGファイル形式でのダウンロードも可能です。あまり聞きなれないと思いますが、このような使い方も出来ます。
この施設にはAEDが常備されています。
アイコンの大きさも任意に変更することが可能です。
この施設にはAEDが常備されています。
この施設にはAEDが常備されています。
こんな風にするとブログ内で使用するのに便利です。
ICOOON MONOの使い方
ICOOON MONOの使い方はとても簡単です。まずICOOON MONOのHPへ行きます。
下の画像のようにトップ画面にたくさんのアイコンが並んでいます。
好きなアイコンを選ぶ
画面の中から好きなアイコンを選びましょう。ここでは例として野球のバットのアイコンを選んでみます。すると下のような画面が出ます。
サイズ・色・保存形式を選ぶ
①で画像の大きさ（サイズ）、②でアイコンの色、③でダウンロードする際の保存形式を選びます。
下の画像はバットのアイコンを、526pxサイズで色を黄色、保存形式を背景を透明のPNG形式にして、野球の画像に貼り付けて使ってみた例です。
またこのSVG形式にするとこんな感じに出来ます。
ホームラン量産！黄色いバット売ってます！
ではSVGファイル形式でダウンロードしたファイルの使い方を次から説明しています。
SVGファイル形式アイコンの使い方
好きなアイコンと色を選ぶ所までは同じです。ダウンロードして保存する際にSVGを選びましょう。
①ダウンロードされたファイルをテキストエディタで開きます。テキストエディタが分からない場合はファイルを開いて右クリックし「ぺージのソース表示を開く」を選択するとSVG形式でダウンロードしたアイコンのソースコードが表示されます。
②たくさんの文字が並んでいますがその中の<svg ~</svg>までをコピーします。
③そのコピーしたコードをアイコンの表示させたい場所に貼り付けます。※ビジュアル編集ではなくHTML編集の場所に貼り付けて下さい。
コード内にhttpのURLが記載されている部分がありますので、SSL化済みのブログに使う場合はhttpsに変えましょう。
SVG形式のアイコンはサイズを変更できますので、コード内の「style=”width: 256px; height: 256px」部分の数字を好きなサイズに変更しましょう。※数字は最初にダウンロードする前に選んだサイズ（px）になっているはずです。
このようなやり方で全てのアイコンを下のような感じで使えます。
今日はマグロのお寿司を食べよう！
まとめ
このように便利に使えるICOOON MONO。素材も6,000種類以上あり、色を変えると無限大ですので、上手に利用してみると良いと思います。またCanvaを使って画像編集を行うとより用途の幅が広がります。
またより詳しいSVG画像のサイズや色の編集方法はコチラ
おすすめのアイコンダウンロードサイトはこちらです。（※全て商用利用可・クレジット表記不要です。）
