ノウハウ

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

2020年4月30日

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

  • サイズ変更可
  • 色変更可
  • 透過率変更可
  • 3種類のファイル形式からダウンロード可

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

サイトはコチラ↓

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

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

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

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

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

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

icooon-mono:LICENCEメニュータブ

icooon-mono:LICENCEメニュータブ

 

icooon-monoでのアイコンの探し方

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

  • カテゴリー
  • 検索

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

 

icooon-monoの使い方(カテゴリーで探す方法)

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

icooon-mono:カテゴリー選択(動物・植物)

icooon-mono:カテゴリー選択(動物・植物)

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

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

icooon-mono:カテゴリー選択(動物・植物)

icooon-mono:カテゴリー選択(動物・植物)

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

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

 

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

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

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

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

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

icooon-mono:アイコン色変更

icooon-mono:アイコン色変更

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

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

icooon-mono:アイコン色変更

icooon-mono:アイコン色変更

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

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

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

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

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

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

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

あわせて読みたい
XDなどで良くある8桁のカラーコードの見方と一覧
XDなどで良くある8桁のカラーコードの見方と一覧

続きを見る

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

icooon-mono:アイコン色変更(16進数)

icooon-mono:アイコン色変更(16進数)

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

 

画像をダウンロード

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

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

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

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

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

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

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

 

icooon-monoの使い方(検索フォームで探す方法)

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

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

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

icooon-mono:『犬』で検索

icooon-mono:『犬』で検索

icooon-mono:『dog』で検索

icooon-mono:『dog』で検索

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

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

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

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

icooon-mono:検索結果(見つからない場合)

icooon-mono:検索結果(見つからない場合)

 

icooon-monoの使い方・番外編(個性的なアイコンから探す)

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

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

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

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

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

icooon-mono:マンガ文字素材

icooon-mono:マンガ文字素材

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

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

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

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

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

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

 

まとめ

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

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

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

以上になります。

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-ノウハウ