スマホサイトのデザインに役立つアイコンまとめ50選

スマホサイトのデザインに役立つアイコンまとめ50選


今や常識となりつつあるサイトのスマホ化。

ニーズは高まる一方ですが、制作側としては考える事も作るものも多く大変なものです。
少しでも効率よく作業したいですね。

 

そこでスマホサイトの制作を強力にサポートしてくれる使い勝手の良いアイコンをまとめてみました。小さい画面でも視認性の高いものを中心に集めましたので、ぜひ活用してみてください。
【ご注意】利用規約については使用前に必ず配布サイトでご確認の上、ご利用下さい。

 

目次

シンライン、アウトラインアイコン

Simple Line Icons Set Vol.1

Simple Line Icons Set Vol.1

http://graphicburger.com/simple-line-icons-set-vol-1/

とてもシンプルですが洗練された美しいアイコンです。
どんなサイトにも違和感無く馴染んでくれそうですね。
他のバージョンも要チェックです: Vol.2 / Vol.3 / Vol.4
└ 商用利用可 / Free / psd, ai, eps, svg, png形式 / 40個

 

Bikini 60s

Bikini 60s

https://iconstore.co/icons/bikini-60s/

シンプルでミニマルなアイコンです。
ラインアイコンも画像のように2色で使用するとよりクールですね。
└ 商用利用可 / Free / ai, psd, svg形式 / 60個

 

The Elegant Icon Font

The Elegant Icon Font

http://www.elegantthemes.com/blog/resources/elegant-icon-font

アウトラインとベタ塗りのアイコン2種が360個もあります。
ベーシックなモチーフは大体揃っているので
とりあえずDLをしておいて損はないでしょう。
└ 商用利用可 / Free / png, svg, ttf, woff, eot形式 / 360個

 

Free line icon pack

Free line icon pack

https://www.behance.net/gallery/24796105/Free-line-icon-pack

角に丸みのあるアウトラインアイコンです。
スタイリッシュなデザインに合いそうですね。
└  商用利用可 / Free / ai形式 / 60個

 

Icon Set (144)

Icon Set (144)

https://dribbble.com/shots/1357137-Icon-Set-144

シンプルですが細部にかわいらしさを感じさせるアウトラインアイコンです。
└ 商用利用可 / Free / ai形式 / 144個

 

Line icon set for UI & more

Line icon set for UI & more

https://www.behance.net/gallery/Line-icon-set-for-UI-more-Infinitely-scalable/10712283

丸みが大きく線も太めで、POPなフォルムのアイコンです。
└ 商用利用可 / Free / psd, ai, eps形式 / 124個

 

99 beans

99 beans

https://dribbble.com/shots/1370290-99-beans

小サイズで線が太めのアイコンです。
主張はしたいけどスペースが小さい時に便利ですね。
└ 商用利用可 / Free / psd形式 / 99個

 

IconAlone: 110 Line Icons

IconAlone: 110 Line Icons

http://graphicburger.com/iconalone-110-line-icons/

食べ物やスポーツなど、ベーシックなアイコン以外にも、
様々なバリエーションを含んだ110個セットです。
└ 商用利用可 / Free / ai, eps, svg, png形式 / 110個

 

150 outlined icons

150 outlined icons

http://freebiesbug.com/psd-freebies/150-free-outlined-icons-psd-ai-svg-webfont/

可愛らしくミニマルにまとめられたアイコンです。
制作者は男性ですが、女性が好みそうなテイストですね。
└ 商用利用可 / Free / psd, ai, svg, webfont形式 / 150個

 

Thin Line UI Icons 170

Thin Line UI Icons 170

https://www.behance.net/gallery/24974365/Thin-Line-UI-Icons-170

定番で使いやすいテーマが揃っています。
種類も豊富なので、他のシンプルなアイコンと組み合わせても良いですね。
└ 商用利用可 / Free / eps, png, svg形式 / 170個

 

168 Vector Stroke Icons

168 Vector Stroke Icons

http://www.dreamstale.com/download-168-free-vector-stroke-icons

矩形と円形のコントラストが可愛らしいシンプルなアイコンです。
└ 商用利用可 / Free / ai, eps, png形式 / 168個

 

Uniicons

Uniicons

https://iconstore.co/icons/uniicons-free/

太めの線でも細めの線でも美しいシンラインアイコンです。
└ 商用利用可 / Free / psd, svg形式 / 100個

 

Simple Line Icons PSD

Simple Line Icons PSD

https://dribbble.com/shots/1411474-Simple-Line-Icons-PSD

線が細く優美なシンラインアイコンです。
セット数は少ないですが定番ものはしっかり揃っていて使い勝手は良さそうです。
└  商用利用可 / Free / psd形式 / 36個

 

Free 200 Nanoline Icons

Free 200 Nanoline Icons

https://iconstore.co/icons/free-200-nanoline-icons/

こちらも細めラインで描かれていますが、POPで可愛らしいテイストです。
動物や洗濯表示など珍しいジャンルのアイコンもあります。
└ 商用利用可 / Free / ai, eps, svg形式 / 200個

 

Ingenicons 100 Icons Set

Ingenicons 100 Icons Set

http://graphicburger.com/ingenicons-100-icons-set/

ラインアイコンの中でも、ラインのとり方が独特で面白いです。
少し書き込みが細かいですが、縮小して使用しても問題なく利用できます。
└ 商用利用可 / Free / ai, psd, png形式 / 100個

 

Pixelvicon Icon Set

Pixelvicon Icon Set

https://dribbble.com/shots/1637033-Freebie-Pixelvicon-Icon-Set-80-Icons-PSD-PNG-SVG-Webfont

ドットで描かれていますが、編集データはベクターなので拡大縮小も心配ありません。
└ 商用利用可 / Free / psd, png, svg, webfont形式 / 80個

 

230 Wireframe Icons

230 Wireframe Icons

http://sm-artists.com/?page_id=1884

細いライン、太いライン、ミニマルバージョンの3タイプがセットになっています。
└ 商用利用可 / Free / psd形式 / 230個

 

Random Stuff Iconset

Random Stuff Iconset

https://iconstore.co/icons/random-stuff-iconset/

アナログイラストのようなテイストの、可愛らしいツートンアイコンです。
ドクロ、ロボット、フラスコ等珍しいジャンルもあります。
└ 商用利用可 / Free / ai, svg形式 / 48個

 

100 Ink Style Icons

100 Ink Style Icons

https://www.behance.net/gallery/29190435/100-Ink-Style-Icons

インクで描かれたような質感を持つアイコンです。
使いどころを選びますが、コンセプトにハマるようならぜひ挑戦してみたいですね。
└ 商用利用可 / Free / psd, ai, svg形式  / 100個

 

テーマのあるアイコン

100 gesture and fingerprints icons

100 gesture and fingerprints icons

100 gesture and fingerprints icons

http://thesquid.ink/free-line-icons/

タッチパネルのジェスチャーが100個も収録されている、
とてもありがたいアイコンセットです。
細かな説明がなくても十分伝わりますね。
└ 【テーマ:ジェスチャー】 商用利用可 / Free /  ai, psd形式 / 100個

 

15 Gesture icons

15 Gesture icons

https://dribbble.com/shots/2181099-Gesture-Icon-Freebie

2色で描かれているオシャレなジェスチャーアイコンです。
アナログのようなテイストが動作をよりうまく表現していますね。
└ 【テーマ:ジェスチャー】 商用利用可 / Free /  psd, ai形式 / 15個

 

16 hand gestures icons

16 hand gestures icons

https://dribbble.com/shots/2134796-Hand-Gestures-Update

英語でジェスチャー名が記載されている塗りのアイコンです。
よく見かけるピクトグラムと近いテイストなので、幅広いユーザーに理解してもらえそうです。
└ 【テーマ:ジェスチャー】 商用利用可 / Free /  psd形式 / 16個

 

The ultimate free eCommerce icon pack by Freepik & WooThemes

The ultimate free eCommerce icon pack by Freepik & WooThemes

http://www.woothemes.com/2013/06/freepik-free-ecommerce-icons/

ECサイトで使えるアイコンが豊富に用意されています。
汎用性の高そうなものばかりなので、これ1つDLしておけばECサイト制作も安心ですね。
└ 【テーマ:ECサイト】 商用利用可 / Free / png, ai, svg形式 / 250個

 

FREE 45 E-COMMERCE ICONS

FREE 45 E-COMMERCE ICONS

https://www.iconsmind.com/free-45-ecommerce-icons/

カートやカゴなど、ECサイトで必須となるアイコンが
最小限のラインで描かれています。
カートの状態を示すデザイン展開がとても分かりやすくて良いですね。
└ 【テーマ:ECサイト】 商用利用可 / Free / png, ai, svg, eps, psd形式 / 45個

 

Shopping Cart Icons

Shopping Cart Icons

https://iconstore.co/icons/shopping-cart-icons/

バッグ、買い物かご、カートのアイコンが
5つのデザイン展開×3サイズで用意されています。
└ 【テーマ:ECサイト】 商用利用可 / Free / svg, psd形式 / 45個

 

eCommerce Line Icons

eCommerce Line Icons

https://iconstore.co/icons/free-ecommerce-line-icons/

線は細いですが、全体的に丸みがあるのでクールになりすぎず
可愛い印象を受けるアイコンです。女性向けのEC用サイトに使えそうです。
└ 【テーマ:ECサイト】 商用利用可 / Free / svg, ai形式 / 30個

 

40 Battery Vector Icons

40 Battery Vector Icons

http://www.dreamstale.com/free-download-40-battery-vector-icons/

あると意外に便利そうな充電メータのアイコン。
バリエーションが40もある事に驚きますね。
└ 【テーマ:充電メータ】 商用利用可 / Free /  ai, eps, svg, png形式 / 40個

 

Free 20 arrow icons

Free 20 arrow icons

https://www.creativetail.com/20-arrow-icons/

細いラインの矢印を20のバリエーションで描いたアイコンセットです。
└ 【テーマ:矢印】 商用利用可 / Free /  ai, eps形式 / 20個

 

61 Outlined Weather Icons

61 Outlined Weather Icons

http://graphicburger.com/61-outlined-weather-icons/

丸いフォルムで統一されたオシャレなお天気アイコンが61個も配布されています。
└ 【テーマ:天気】 商用利用可 / Free / ai形式 / 61個

 

Sporties icon set

Sporties icon set

http://freebiesbug.com/psd-freebies/sporties-icon-set/

ラインのみで20種ものスポーツを表現したシンラインアイコンです。
シンプルですが何の競技か一目でわかる所が素晴らしいですね。
└ 【テーマ:スポーツ】 商用利用可 / Free /  ai, psd, sketch形式 / 20個

 

40 St Valentine’s Day icons

40 St Valentine’s Day icons

http://freebiesbug.com/psd-freebies/40-st-valentines-day-icons/

バレンタインをテーマにシンラインで描かれた
ハートたっぷりでキュートなアイコン達です。
└ 【テーマ:バレンタイン】 商用利用可 / Free /  ai, psd形式 / 40個

 

City Icons

City Icons

https://dribbble.com/shots/2328280-City-Icons

カナダ トロントをテーマに作成された個性派アイコン。
他では見つけられなかった面白いアイコンがあります。
└ 【テーマ:トロント】 商用利用可 / Free / ai, eps, pdf, psd, svg, webfont形式 / 150個

 

Punjab Icons

Punjab Icons

https://iconstore.co/icons/punjab-icons/

UIに便利そうなアイコンが、丸みのある矩形のフォルムで統一されています。
整然と並べても堅くなりすぎないところが良いですね。
└ 【テーマ:UI】 商用利用可 / Free / ai, svg形式 / 48個

 

ベタ塗り、白抜きアイコン

375 Retina-Display-Ready Icons

375 Retina-Display-Ready Icons

http://sixrevisions.com/freebies/icons/375-retina-display-ready-icons/

コミュニケーション、メディア、ゲーム等にカテゴリ分けされた
クオリティの高いアイコンが375個も収録されています。
└ 商用利用可 / Free / ai, eps, png形式 / 375個

 

Freebie: Free Vector Web Icons

Freebie: Free Vector Web Icons

http://www.smashingmagazine.com/2011/12/freebie-free-vector-web-icons-91-icons/

さりげなくエンボスがはいっている上品なイメージのアイコンです。
└ 商用利用可 / Free / psd形式  / 91個

 

Ultimate Free Icon Set

Ultimate Free Icon Set

http://sixrevisions.com/freebies/icons/free-icons-1000/

音楽、スポーツなど様々なジャンルのアイコンが豊富に揃っています。
同テイストのアイコンがこれだけ揃っていれば安心ですね。
└ 商用利用可 / Free / png, eps, ai形式  / 1000個

 

Captain Icon: 350 Vector Icons

Captain Icon: 350 Vector Icons

http://mariodelvalle.github.io/CaptainIconWeb/

ゆるくてポップなテイストのアイコンが350個も揃っています。
ページの最下部近くのボタンからDL可能です。
└ 商用利用可 / Free(寄付歓迎) / psd, png, eps, svg形式  / 350個

 

Token

Token

http://brsev.deviantart.com/art/Token-128429570

濃いめのグレーがスタイリッシュなレタープレスアイコンです。
Mac OSのdockに使えるラインナップですが、
サイトデザインにも汎用的に使用できますね。
└ 商用利用可 / Free /  png, psd形式 / 128個

 

枠ありアイコン

Free Social Media Line Icon Set Freebie No:139

Free Social Media Line Icon Set Freebie No:139

http://www.cssauthor.com/free-social-media-line-icon-set/

丸枠付きのソーシャルアイコンです。
各アイコンが優美なラインで統一されているので
スタイリッシュなサイトイメージを保ちたい時に便利ですね。
└ 【テーマ:ソーシャル】 商用利用可 / Free / psd形式  / 28個

 

60 social media icons

60 social media icons

https://iconstore.co/icons/60-social-media-icons/

ソーシャルアイコンの他、Skypeやyoutubeなど
60種ものサービスロゴを幅広くカバーしています。
└ 【テーマ:ソーシャル】 商用利用可 / Free / sketch, svg形式  / 60個

 

Circle Icons 110

Circle Icons 110

https://www.behance.net/gallery/22275863/Circle-Icons-110

サークルの白抜きアイコンが110種も揃っています。
イラスト部分の線が太めなので縮小しても
視認性が落ちないのが良いですね。
└ 商用利用可 / Free / 110個

 

90 Social Media Vector Icons

90 Social Media Vector Icons

http://www.dreamstale.com/free-download-72-vector-social-media-icons/

角丸が大きめの正方形に白抜きでソーシャルアイコンが収まっています。
並べるとカラフルでよりPOPなイメージになりますね。
└ 【テーマ:ソーシャル】 商用利用可 / Free / svg, png, eps, ai, css形式  / 90個

 

45 SUBTLE SOCIAL ICONS

45 SUBTLE SOCIAL ICONS

http://www.bestpsdfreebies.com/freebie/45-subtle-social-icons/

矩形に近いですが全体的に丸みを帯びた形の白抜きアイコンです。
イラスト部分が一回り小さくゆとりをもって収まっているので、
やわらかなシェイプの反面、落ち着き感もあります。
└ 【テーマ:ソーシャル】 商用利用可 / Free / psd形式  / 45個

 

40 Social Media Flat Icons

40 Social Media Flat Icons

http://graphicburger.com/40-social-media-flat-icons/

近年増えているロングシャドウのフラットアイコンです。
完全な正方形なので、整然と並べたい時に便利ですね。
└ 【テーマ:ソーシャル】 商用利用可 / Free / psd形式  / 45個

 

イラストアイコン

Thousands Icons

Thousands Icons

http://www.baianat.com/resources/thousands/

カラーイラストからソリッドタイプまで、2000個ものアイコンが揃います。
アナログテイストで様々なジャンルが描かれており、大変重宝します。
└ 商用利用可 / Free / ai, psd, sketch, svg, png形式  / 2000個

 

Eldorado 1262 icons mini free

Eldorado 1262 icons mini free

http://www.icojam.com/blog/?p=380

アイコン提供サイト「Icojam」より高クオイティのイラストアイコンが
1262個も無料配布されています。
こちらではpng形式のみDL可能ですが「creative MARKET」より
有料でベクターデータも購入可能です。
└ 商用利用可 / Free / png形式(40px*40px)  / 1262個

 

300+ Free Flat Color Icons

300+ Free Flat Color Icons

https://icons8.com/c/flat-color-icons

3100以上ものアイコン提供を行う「icons8.com」から
312個ものハイクオリティなアイコンが商用OKで配布されています。
└ 商用利用可 / Free / svg形式  / 312個

 

Health & Fitness Icons

Health & Fitness Icons

https://dribbble.com/shots/2272171-Health-Fitness-Icons-download

食事、フィットネス、メディカルなどの健康的な生活を
アナログで温かみのあるイラストで表現したアイコンです。
└ 【テーマ:ヘルスケア】商用利用可 / Free / ai, psd, svg形式  / 40個

 

Isometricon

Isometricon

https://iconstore.co/icons/isometricon/

フラットデザインと相性の良さそうなテイストの立体アイコンです。
配色も落ち着いていて上品ですね。ポイントで使用すると目を引きそうです。
└ 商用利用可 / Free / ai, svg形式  / 90個

 

Flatilicious: 80 Free Icons

Flatilicious: 80 Free Icons

http://graphicburger.com/flatlicious-80-free-icons/

全体的に矩形のフォルムに整えられたフラットアイコンが90種あります。
書類などオフィス関連のものが多いですね。
└ 商用利用可 / Free / ai形式  / 90個

さいごに

いかがでしたでしょうか。お気に入りのアイコンは見つかりましたか?

 

今回は使い勝手を重視して、なるべくシンプルなものを集めましたが
ネット上にはニッチなテーマや質感のアイコンも多数公開されています。
活用できそうなものは活用して、効率よくデザインライフを楽しみましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Photoshop】レイヤースタイルのテクニックが身につくチュートリアル30選