IT関連 Web 紹介など

無料でシンプル!商用利用OKなアイコン素材サイトを入手方法も含めて紹介!Webデザインやチラシ・スライド資料作成などに

前回の記事では写真素材サイトの紹介をしましたが、今度はアイコン素材サイトを記事にしてみました。
自分でデザインしても良いのですが、やっぱり時間をかけたくないものです。使えるものは使っちゃいましょう!

※フリーで使用できるサイトを紹介していますが、各サイトの使用条件やライセンス規約は念のため確認してから使用する方が安全です。
英語なので、読めない方はGoogle翻訳などを使って読み解いていきましょう。

1. Iconmonstr (アイコンモンスター) - 約4500個ものアイコン数

iconmonstr - Free simple icons for your next project
https://iconmonstr.com/

ここがあれば定番系のアイコンはだいたい揃っており、時々新たにアイコンを追加することもあるようです。
線が太めのアイコン、細めのアイコンという感じで特徴別に探せます。
また、フォント形式で手に入るものもあります。
SVG、EPS、PSD、PNG形式でダウンロードが可能です。

Iconmonstrでの素材入手方法

ページ上部にある「Search ...」に、探したい英単語キーワードを入力して検索します。

すると検索結果が表示されるので、良いと思ったアイコンがあればクリック。
ページ上部でダウンロードしたい形式(SVG、EPSなど)を選択し、ページ中央下のI agree to the License Agreement(ライセンス規約に同意します)のチェックボックスをONにした上で青い「Download」ボタンを押してダウンロードできます。

2. Material Design (マテリアルデザイン) - UIに使えるような実用性重視

Icons - Material Design
https://material.io/resources/icons/

WebやアプリケーションUIのボタンとして使用できそうな、実用性の高そうなアイコンが揃っています。
アイコンデザインに統一性をもたせたい場合は、ページ左のメニューにて塗りつぶしアイコンかアウトラインアイコン、丸っこいアイコンなど、テーマに絞り込んで探すことができます。

Material Designでの素材入手方法

ページ左上の「Filter by name」で検索できますが、左側にある「THEMES」でテーマを指定したり、「CATEGORIES」でジャンルを指定した方が見つかりやすい場合があります。
欲しいアイコンが見つかったらクリックし、ページ左下に表示された青い「SVG 24」ボタンをクリックするとダウンロードできます。

また、黒い「Selected Icon」ボタンを押すとオプションが表示され、色の指定(白黒のみですが)ができたり大きさ、PNG形式でのダウンロードなどができたりします。アイコンフォントにも対応しているようです。

3. Material Icons Library (マテリアルアイコンズライブラリー) - 1000種類以上のアイコン

Material Icons Library
https://icons.pixsellz.io/

1000種類以上のシンプルなアイコンをテーマ別に一括でダウンロードできるサイト。
ダウンロードしたファイル内にPSD、XD、SVGなどの形式で多くのアイコンが含まれているので、一つずつアイコンをダウンロードするのが面倒な場合に役立つかもしれません。

Material Icons Libraryでの素材入手方法

ページ左にある緑の「Get It」ボタンを押すとページ下部にスクロールします。
すると緑の「Download」ボタンが現れるのでクリック。
遷移後のページの右下に「公平な価格を設定して下さい」という箇所があるので、「0」を入力した後に下にある緑ボタン「Purchase」をクリック。
メールアドレスとオファーコードを入力するフォームが表示されますが、メールアドレスだけ入力して「手に入れる」をクリックすればダウンロードできます。

なお、ダウンロード後にファイルを解凍すると、ファイル形式ごとにフォルダー分けされているので、例えばPSDフォルダーに入っている「Outlined.psd」を開くと、一つのキャンバスに多くのアイコンが含まれていることがわかります。
必要なものだけコピーしたりエクスポートしたりして使用することができます。

4. Ikonate (アイコネイト) - 色・太さ・大きさなどをカスタム可能

Ikonate – fully customisable & accessible vector icons
https://ikonate.com/

なんと色、大きさ、太さ、コーナーの形をカスタムしてからダウンロードできるという自由度の高いサイト。
主にUIに使えそうなアイコンがメインです。

Ikonateでの素材入手方法

ページ中央にある青い「Get Icons」ボタンを押します。
アイコン一覧が表示されますが、左側にカスタマイズできる項目が表示されます。上から「線の太さ」「大きさ」「コーナーの形」「色」「ダークモードプレビュー」そして「出力」ボタンとなります。

欲しいアイコンだけ入手するなら、欲しいアイコンをクリックして選択し、その後に「Export all icons」をクリックします。

5. REMIX ICON (リミックスアイコン) - ビジネス向けもたくさん!パワポ形式でもDL可能

Remix Icon - Open source icon library
https://remixicon.com/

UIに使えるようなアイコンが1700種類以上そろっています。
特筆すべきはビジネス向けアイコンが多い上にPowerPointおよびKeynoteの形式も含まれるということです。

REMIX ICONでの素材入手方法

◆個別または複数アイコンを入手
ページに表示されているアイコンをクリックし、「PNG」「SVG」ボタンを押してダウンロードすることができます。
また、アイコンをホバーした際に表示される右上の「+」を押すと、後で一括でダウンロードできるようにページ右上のフォルダーアイコンに数が表示されます。一通り選択し終えたら、フォルダーアイコンをクリックし、欲しいアイコンが表示されていることを確認して右下のダウンロード形式ボタンをクリックすれば入手可能です。

◆パワポ・keynote形式含めすべて入手
ページ右上の青い「Download」ボタンをクリックします。
4つの項目のあるダイアログが表示されますが、Icon packだとSVG形式で、そしてKeynote & PowerPointだと.key .pptx形式でダウンロードすることができます。

まとめ

いかがでしたでしょうか。
アイコンは視覚的に何かと重要で、テキストのみの場合と比べて認識度がかなり変わってきます。
アイコンを使える場所にはどんどん、かつ適切に使っていきたいですね。

それではまたの機会に。

  • この記事を書いた人

Maesuke

2年目Webデザイナー。 IT全般やWeb関係、ガジェット、暗号資産(仮想通貨)などに興味を持ち、気になった情報などを日々つぶやき続ける普通の人。

イチ押し記事!

1

いくつかの副業を試してきましたが、プログラミングのようにガッツリ勉強する必要もなく、さらに数日で数千円、月収で3〜5万円くらい稼げるコスパの良い「動画編集」という副業を、今回は紹介しちゃおうかなと思い ...

2

2020年10月23日に発売したiPhone 12シリーズ。筆者は発売日にiPhone 12 Pro 128GB ゴールドを手に入れ、とても喜んでいたが… iPhoneケースどうしよう!? と、iPh ...

AirPods Pro革製ケース 3

昨年AirPods Proを購入し、その保護ケースとして簡易的なシリコンケースをとりあえず装着していたのですが、ネットを見ていると魅力的なケースが他にもたくさんあるじゃないか!…と。 そこで特に目を惹 ...

-IT関連, Web, 紹介など
-, ,

© 2024 maesuke.comブログ