【商用利用可】フリーアイコン素材サイト『icooon-mono』の使い方【色変更なども解説】

アイコンのフリー素材を探せるいいサイトないかな？

今回はサイト制作では欠かせないアイコン素材におすすめのサイト『icooon-mono』の使い方を解説します。

icooon-monoでダウンロードできるアイコンは色々とカスタマイズが出来ます。

コーダーはあまり使わないかも知れませんが、デザイナーは重宝しそうなサイトです。

サイトはコチラ↓

アイコン素材ダウンロードサイト「icooon-mono」

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

フリーアイコン素材サイト icooon-monoとは？

まずサイトの説明をさせて頂きます。

こちらはアイコン素材のダウンロードサイトで、商用可能なフリー素材が6000種類以上もあります。

さらに登録不要なのですぐ使えます。

イラストだと登録が必要だったり1日のダウンロード制限があったりするサイトもあるので、登録不要で特に制限もなくつかえるのは非常に快適です。

もちろんWeb制作での使用も可能ですし、加工してもOKでファビコンにすることも可能です。

ただし再配布禁止などの規約もあるので、トップページ右上にあるLICENCEをよく読んでからご利用ください。

icooon-mono：LICENCEメニュータブ

icooon-monoの使い方

アイコンの探し方は2種類あります。

さらに別ページで個性的なアイコンや文字素材を探すことも出来ます。

カテゴリーで探す

アイコンの上にマウスを乗せると『動物・植物』といったカテゴリー名が表示されます。

icooon-mono：カテゴリー選択（動物・植物）

ちなみにページを開いた時に表示されているアイコン達（バットやハサミなど）は、トップページにデフォルトで表示されている物です。

そして今回は『動物・植物』をクリックします。

icooon-mono：カテゴリー選択（動物・植物）

すると表示されるアイコンが変わったのが分かると思います。

そして今回は右上のリスのアイコンを選択して編集していきます。

アイコンのサイズ選択、色変更、透過率変更

まずはアイコンのサイズを選択します（初期値は256pxです）

icooon-mono：アイコンサイズ選択

そして次は色を変えます。この色を変えられるのが便利です。

icooon-mono：アイコン色変更

ここに初期値ではグレーのような数値になっています。

この枠内をクリックすると、次のような画面が表示されます。

icooon-mono：アイコン色変更

この色をクリックするか、枠内の数値を変更することでも色は変更できます。

また右側のバーでは透過率を変更できます。

icooon-mono：アイコン透過率変更

今回は50％にしてみました。

また『rgb』も『rgba』に変わったのが分かると思います。

『rgb』と『rbga』の違いについては以下の記事を参照ください。

また『rgb』ではなく、次のように16進数でも色を変えられます。

icooon-mono：アイコン色変更（16進数）

ただし、ここで透過度を変えるとまた『rgba』に戻ります（16進数では透過度を表せない為）

ダウンロード

あとはダウンロードしたい種類のファイルを選択してダウンロードするだけです。

icooon-mono：ダウンロードファイル形式選択

またアイコンの右下にある＋をクリックすることでストックしていくことが出来、最大12個まで一括でダウンロードすることが出来ます。

icooon-mono：ダウンロードファイル追加

ただしアイコンのサイズやファイルの種類などは全て同じになります。

検索フォームで探す

先ほどはカテゴリーで探しましたが、検索フォームで探すことも出来ます。

この検索フォームは日本語でも英語でも検索できます。

例えば『犬』と『dog』で検索してみます。

icooon-mono：『犬』で検索

icooon-mono：『dog』で検索

検索結果は微妙に違いますが、どちらも犬関係のアイコンが表示されました。

ちなみに見つからなかったときは、

「そんなアイコン素材は残念ながら置いてません」

と冷たく言われますが気にしないようにしましょうｗ

icooon-mono：検索結果（見つからない場合）

さらに個性的なアイコンなど

実はページ上部にはこのようなアイコンがあります。

icooon-mono：ページ上部のアイコン

上の画像は『マンガ文字』にカーソルをあてている状態です。

それでは『マンガ文字』をクリックしてみます。

icooon-mono：マンガ文字素材

かなり個性的な文字素材ですね。

これもアイコン同様に色などを変えられます。

icooon-mono：マンガ文字素材編集画面

これら『icooon-mono』のページ上部にあるアイコンたちはそれぞれ別ページになるので、ページのレイアウトが多少違います。

また、使用する際にはライセンスを確認しましょう。

まとめ

今回はフリーアイコン素材サイト『icooon-mono』の使い方を解説してきました。

ライセンスの確認が必要な場合もありますが、色やサイズを自由に変えられるのは便利ですね。

デザイナーさんには特に便利なサイトかと思います。

以上になります。