【6000種類から選べる】無料アイコン素材はICOOON MONO

icooon-mono

ICOOON MONOは会員登録なしで6,000種類以上のアイコン素材を無料で使える便利なサービスです。ブログやHPに使う商用利用も可能で、その際のクレジット表記も必要ありません。
アイコンはダウンロードして使用でき、テキストエディタで大きさや色も好みに変更することが出来てロゴ作成や会社の資料作りにも重宝します。

使用例

ICOOON MONOでは複数のダウンロード形式を選ぶことが出来ます。では下の画像の医療機器AEDのアイコンもありますのでそれを例にして見てみましょう。

ICOOON MONO 例

JPG形式

JPG形式では背景(白色)付きでダウンロードが可能です。

ICOOON MONO 例1

PNG形式

PNG形式では背景が透明(透過)のアイコンをダウンロード可能です。

ICOOON MONO 例2

上記の画像は分かりやすく背景に「背景は透明」と表記しています。AEDのロゴの部分がICOOON MONOでダウンロードしたアイコン部分です。

SVG形式

SVGファイル形式でのダウンロードも可能です。あまり聞きなれないと思いますが、このような使い方も出来ます。

この施設にはAEDが常備されています。

アイコンの大きさも任意に変更することが可能です。

この施設にはAEDが常備されています。

この施設にはAEDが常備されています。

ブログ内で使用したりするのに便利です。

使い方

ICOOON MONOの使い方はとても簡単です。まずICOOON MONOのHPへ行きます。
下の画像のようにトップ画面にたくさんのアイコンが並んでいます。

ICOOON MONOはたくさんのアイコンが無料
6,000種類以上

好きなアイコンを選ぶ

画面の中から好きなアイコンを選びましょう。ここでは例として野球のバットのアイコンを選んでみます。すると下のような画面が出ます。

ICOOON MONO使い方

サイズ・色・保存形式を選ぶ

①で画像の大きさ(サイズ)、②でアイコンの色、③でダウンロードする際の保存形式を選びます。

ICOOON MONO 使い方2

下の画像はバットのアイコンを、526pxサイズで色を黄色、保存形式を背景を透明のPNG形式にして、野球の画像に貼り付けて使ってみた例です。

サンプル

またこのSVG形式にするとこんな感じに出来ます。

ホームラン量産!黄色いバット売ってます!

ではSVGファイル形式でダウンロードしたファイルの使い方を次から説明しています。

SVGファイル形式アイコンの使い方

好きなアイコンと色を選ぶ所までは同じです。ダウンロードして保存する際にSVGを選びましょう。

ICOOON MONO svg使い方

①ダウンロードされたファイルをテキストエディタで開きます。テキストエディタが分からない場合はファイルを開いて右クリックし「ぺージのソース表示を開く」を選択するとSVG形式でダウンロードしたアイコンのソースコードが表示されます。

サンプル

②たくさんの文字が並んでいますがその中の<svg ~</svg>までをコピーします。

③そのコピーしたコードをアイコンの表示させたい場所に貼り付けます。※ビジュアル編集ではなくHTML編集の場所に貼り付けて下さい。

注意

コード内にhttpのURLが記載されている部分がありますので、SSL化済みのブログに使う場合はhttpsに変えましょう。

サイズ変更

SVG形式のアイコンはサイズを変更できますので、コード内の「style=”width: 256px; height: 256px」部分の数字を好きなサイズに変更しましょう。※数字は最初にダウンロードする前に選んだサイズ(px)になっているはずです。

このようなやり方で全てのアイコンを下のような感じで使えます。

今日はマグロのお寿司を食べよう!

まとめ

このように便利に使えるICOOON MONO。素材も6,000種類以上あり、色を変えると無限大ですので、上手に利用してみると良いと思います。またCanvaを使って画像編集を行うとより用途の幅が広がります。

またより詳しいSVG画像のサイズや色の編集方法はコチラ

おすすめのアイコンダウンロードサイトはこちらです。(※全て商用利用可・クレジット表記不要です。)

トップへ戻る