実務で使えるフリーアイコン素材集10選【商用利用可】

デザインスキル

実務で使えるフリーアイコン素材集10選【商用利用可】

webデザインで使える無料のアイコン素材がほしい!

という方に、ハイクオリティなフリーアイコン素材集を紹介したいと思います。

 

また今回は、現役webデザイナーである著者が、クオリティだけでなく、実務で使いやすいかという観点から、フリーアイコン素材集を選別してみました。

 

実務で使いやすいアイコン素材集かどうかのポイント

  • ダウンロードしたアイコンが編集しやすいか
  • 検索機能が充実しているか
  • サイト上で細かい編集ができるか

 

現場を経験しているからこそおすすめできるフリーアイコン素材集を紹介します。

 

後半では、イメージしているアイコンが見つからない...という方向けに、効率の良いアイコンの探し方をまとめていますのでぜひ最後までご覧ください。

無料アイコン素材|ICON BOX

iconbox

無料アイコン素材|ICON BOX

 

HIKARINA incでWebデザイナーをやっているNaoyuki Agataさん(Twitterアカウント)が運営しているサイトです。

シンプルでスタイリッシュなアイコンが揃っており、webデザインでよく使うアイコンはだいたい入っています。

 

このサイトの素晴らしいところは、パスデータが生きている(アウトライン化されていない)SVGアイコンがダウンロードできるので、線の太さを自由に調整できます。

 

 

実は、SVG形式でダウンロードできるアイコン素材集は少なくないですが、パスデータが生きているSVGデータをダウンロードできるサイトは非常に希なのです。

 

その他にも、日本人デザイナーが運営者ということもあり、日本語での検索が可能なため目的のアイコンが探しやすいです。

ゆーし

僕が一番愛用しているアイコンと言っても過言ではないですね。

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:PNG、SVG
  • アイコン数:1300(2020年8月現在)
  • パスの編集:可(Illustrator・XD)
  • 検索機能:日本語・英語OK、検索補助機能なし

 

 

Free SVG & PNG Icons

Free SVG & PNG Icons - Orion Icon Library

Free SVG & PNG Icons - Orion Icon Library

 

webデザインに関するあらゆる素材を提供しているPixeden LLC.が運営しているサイトです。この会社はアイコンの他にも、イラストやモックアップ素材の提供をしているみたいですね。

 

素材数が約6400とICON BOXより多く、ダウンロードできるアイコンもパスが生きている貴重なアイコン集です。

 

またサイト上で「角あり」か「角丸」、「丸型先端」か「バット型先端」などの細かいパスの編集もでき、アイコンのクオリティをあげたいwebデザイナーには申し分ない機能が満載です。

 

角あり・バット型先端のアイコンと角丸・丸型先端のアイコン

 

海外のサイトなので、英語での検索しかヒットしませんが、優秀な検索補助機能のおかげで検索に苦労することはないです。

 

検索補助機能

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:PNG、SVG
  • アイコン数:6400(2020年8月現在)
  • パスの編集:可(Illustrator・XD)
  • 検索機能:英語のみ・検索補助機能あり

 

 

ICONSVG

ICONSVG - Quick customizable SVG icons for your project

ICONSVG - Quick customizable SVG icons for your project

 

デザイナーのGaddafi RusliさんTwitterアカウントが運営しているサイトです。

 

こちらもサイトもパスが生きている・サイト上で細かいパスの編集が可能といった機能面では、上記2つのサイトと変わりませんが、アイコン数が少ないため実務で使う機会はあまりありません。

今後の更新が楽しみです!

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:SVG
  • アイコン数:約200(2020年8月現在)
  • パスの編集:可(Illustrator・XD)
  • 検索機能:英語のみ・検索補助機能なし

 

 

Remix Icon

Remix Icon - Open source icon library

Remix Icon - Open source icon library

 

シンプルで洗練されたアイコン素材集です。小さくて可愛らしいアイコンが多いです。

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:PNG、SVG
  • アイコン数:約2300(2020年8月現在)
  • パスの編集:不可
  • 検索機能:英語のみ・検索補助機能なし

 

 

Eva Icons

Eva Icons - beautifully crafted Open Source UI icons for common actions and items.

Eva Icons - beautifully crafted Open Source UI icons for common actions and items.

 

web制作会社であるAkveo. LLCが運営しているサイト。

白ベタと黒ベタ両方のパターンのアイコンがあるので、サイトのイメージに合わせて選べます。

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:SVG
  • アイコン数:約500(2020年8月現在)
  • パスの編集:不可
  • 検索機能:英語のみ・検索補助機能なし

 

 

Icons - Material Design

material.io

Icons - Material Design

 

googleが提供するアイコン素材集です。

同じアイコンでFilled(黒ベタ)かOutlined(白ベタ)、rounded(角丸)かsharp(角あり)かのフィルターをかけられます。

少し線が太めですが、こちらもバリエーションが豊富で、洗練されたデザインなのでよく使用します。

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:SVG
  • アイコン数:約1300(2020年8月現在)
  • パスの編集:不可
  • 検索機能:英語のみ・検索補助機能なし

 

iconmonstr

iconmonstr - Free simple icons for your next project

iconmonstr - Free simple icons for your next project

 

デザイナーのAlexander Kahlkopfさんが運営しているアイコン素材集。

線画太く、少しフリー素材感のあるアイコンですが、数が多いので他のサイトで見つからなかった場合によく調べます。

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:SVG、EPS、PSD、PNG
  • アイコン数:約5000(2020年8月現在)
  • パスの編集:不可
  • 検索機能:英語のみ・検索補助機能なし

 

 

icon rainbow

商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』

商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』

 

こちらも線が太めですが、iconmonstrよりも丸みのある、日本のデザインテイストにあうアイコン素材が多いです。

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:SVG、JPGPNG
  • アイコン数:約6500(2020年8月現在)
  • パスの編集:不可
  • 検索機能:日本語・英語OK・検索補助機能なし

 

 

icooon-mono

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

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

 

デザイナーのTopeconHeroesさんTwitterアカウントが運営しているサイトです。

アイコンのテイストは若干icon rainbowに近いです。

 

また、TopeconHeroesさんはicooon-monoだけでなく、人物アイコンに特化した「ヒューマンピクトグラム2.0、吹き出し素材集の「ふきだし素材専門サイト「フキダシデザイン」など様々なアイコンを作っています。

どれも便利なのでチェックしてみてくださいね。

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:SVG、JPGPNG
  • アイコン数:約6700(2020年8月現在)
  • パスの編集:不可
  • 検索機能:日本語・英語OK・検索補助機能なし

 

 

Icons8

Icons8

Icons8

 

こちらはSVG形式でのダウンロードが有料であるため、無料版ではpng形式でのダウンロードしかできませんが、アイコン数が約133,800(2020年8月現在)と桁外れに多いということと、サイト上での編集機能もピカイチという点でおすすめしたいと思い紹介させていただきます。

 

サイト上での編集機能をもう少し詳しく説明すると、「オーバーレイ」という機能で選択したアイコンに+アルファのアイコンを追加できたり、テキストを挿入することもできます。

 

「オーバーレイ」でアイコンにプラスアルファの装飾が可能

 

このアイコン数のボリュームとリッチな編集機能があれば、SVGでダウンロードして編集する必要もないかもしれません。

 

アイコン詳細情報

  • 商用利用:可能
  • リンクやクレジット表記:不要
  • ダウンロード形式:PNG、SVG・PDF(有料:月額1,900円)
  • アイコン数:約133,800(2020年8月現在)
  • パスの編集:不可
  • 検索機能:日本語・英語OK・検索補助機能あり

 

 

イメージがわかないアイコンを見つける方法

 

これほどまでに素晴らしいアイコン素材集が存在するにせよ、イメージがわかないアイコンの場合は、検索の仕方もわからないため難しいですよね。

 

プロのwebデザイナーは、イメージがわかないアイコンであっても「検索力」を培っているため、効率よくアイコンを見つけることができます

悩んでいる人

「検索力」ってなに?プロじゃなくても身に付けられるの?

「検索力」というのは、実務経験を積み重ねていくうちに鍛えられるものですが、やりかたさえ知っていれば、未経験の方でも簡単に身に付けられます。

 

「検索力」を身に付けて、イメージにぴったりのアイコンを見つけたいという方は、「イメージがわかないアイコンの効率のよい探し方」という記事にて詳しく紹介しておりますので、是非ご覧ください。

イメージがわかないアイコンの効率のよい探し方

 

まとめ

 

上記で紹介した10サイトの中でも特におすすめなのは以下のサイトです。

 

特におすすめのフリーアイコン素材集

 

上記のサイトをおすすめするのは、冒頭でお話しした実務で使いやすいアイコン素材集かどうかのポイントをしっかり押さえているからです。

 

  • パスが生きている(アウトライン化されていない)SVGをダウンロードできる
    編集がしやすい
  • 日本語検索機能・検索補助機能がついている
    検索機能が充実している
  • サイト上で角丸や円形先端などの編集ができる
    サイト上で細かい編集ができる

 

おすすめの2サイトを探してもよいアイコンが見つからない場合は、その他の8サイトから探すようにしましょう。

 

人気記事

独学でwebデザイナーになるための完全ロードマップ【行動できない人へ】 1

ゆーし 新卒でweb制作会社のディレクターとして入社し、8ヶ月でwebデザイナーへ転職。 webデザイナー歴2年目 2019年12月からWebデザインの副業を始め、5ヶ月で100万円達成。 悩んでいる ...

【見本あり】デザインカンプの作り方とコツを現役webデザイナーの解説 2

未経験者からすると、デザインカンプはいわばあなたのデザインスキルをアピールする実績そのものです。 ポートフォリオに載せるものになるので、的外れなものを作りたくないですし、あわよくばいけてるデザインを作 ...

webデザインスキルを爆速で上げるトレースのやり方 3

悩んでいる人・Webデザインのトレースって意味あるの? ・デザイン力を効率よくスキルアップできるトレースの方法ってあるの? webデザインのトレースは、やり方次第でその効果は大きく変わります。 デザイ ...

-デザインスキル

Copyright© これだけデザイン , 2020 All Rights Reserved.