
今回はサイト制作では欠かせないアイコン素材におすすめのサイト『icooon-mono』の使い方を解説します。
icooon-monoでダウンロードできるアイコンは色々とカスタマイズが出来ます。
- サイズ変更可
- 色変更可
- 透過率変更可
- 3種類のファイル形式からダウンロード可
コーダーはあまり使わないかも知れませんが、デザイナーは重宝しそうなサイトです。
サイトはコチラ↓
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
5大無料特典2023年12月31日まで!
フリーアイコン素材サイト 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』の違いについては以下の記事を参照ください。
-
XDなどで良くある8桁のカラーコードの見方と一覧
続きを見る
また『rgb』ではなく、次のように16進数でも色を変えられます。

icooon-mono:アイコン色変更(16進数)
ただし、ここで透過度を変えるとまた『rgba』に戻ります(16進数では透過度を表せない為)
ダウンロード
あとはダウンロードしたい種類のファイルを選択してダウンロードするだけです。

icooon-mono:ダウンロードファイル形式選択
またアイコンの右下にある+をクリックすることでストックしていくことが出来、最大12個まで一括でダウンロードすることが出来ます。

icooon-mono:ダウンロードファイル追加
ただしアイコンのサイズやファイルの種類などは全て同じになります。
先ほどはカテゴリーで探しましたが、検索フォームで探すことも出来ます。
この検索フォームは日本語でも英語でも検索できます。
例えば『犬』と『dog』で検索してみます。

icooon-mono:『犬』で検索

icooon-mono:『dog』で検索
検索結果は微妙に違いますが、どちらも犬関係のアイコンが表示されました。
ちなみに見つからなかったときは、
「そんなアイコン素材は残念ながら置いてません」
と冷たく言われますが気にしないようにしましょうw

icooon-mono:検索結果(見つからない場合)
さらに個性的なアイコンなど
実はページ上部にはこのようなアイコンがあります。

icooon-mono:ページ上部のアイコン
上の画像は『マンガ文字』にカーソルをあてている状態です。
それでは『マンガ文字』をクリックしてみます。

icooon-mono:マンガ文字素材
かなり個性的な文字素材ですね。
これもアイコン同様に色などを変えられます。

icooon-mono:マンガ文字素材編集画面
これら『icooon-mono』のページ上部にあるアイコンたちはそれぞれ別ページになるので、ページのレイアウトが多少違います。
また、使用する際にはライセンスを確認しましょう。
まとめ
今回はフリーアイコン素材サイト『icooon-mono』の使い方を解説してきました。
ライセンスの確認が必要な場合もありますが、色やサイズを自由に変えられるのは便利ですね。
デザイナーさんには特に便利なサイトかと思います。
以上になります。