無料で商用利用も可能!フリーアイコンのおすすめサイト

2016/06/15

11_1
タイトなスケジュールでデザインの時間をあまり確保できないような時に、フリーアイコンを利用して作業時間の短縮をするといこともあると思います。ライセンス確認の手間を省けるように商業利用が可能なフリーアイコンサイトをまとめました!

icooon-mono

icooon-mono
11_2
禁止事項に違反しない限り商用利用ができてクレジット標記も必要ありません。16個のジャンル別になっていて、ワード検索もできます。そしてアイコンの色をカラーピッカーで決めることができます!

対応ファイル

JPG PNG SVG AI EPS

ファイルサイズ

16px 32px 48px 64px 128px 256px 512px

iconmonstr

iconmonstr
11_3
ワード検索と新着・人気順でアイコンを探すことができます。PNGでダウンロードする場合は、選択したサイズ内でさらにアイコンのサイズを選択することができます。また、背景の塗りつぶしや角丸などを選択できてアイコン色と背景色をカラーピッカーで決めることができます!

対応ファイル

PNG SVG AI EPS

ファイルサイズ

※PNGの場合のみ
12px 16px 24px 32px 48px 64px 96px 120px 240px

Ionicons

Ionicons
11_4
IoniconsはアイコンフォントでダウンロードとCDNでの利用ができます。サイズや色をcssで変更できて、スマホ表示のときに画像サイズを気にしなくて平気なところが魅力です!ファイルをダウンロードすると512pxのPNG画像も入っています。

CDNでの使い方

 

1.cssの読み込み
まず、サイトの下部に記載してあるURLを読み込みます

<link rel="stylesheet"http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

 

2.classの確認
11_5
サイトのアイコンをクリックするとクラス名が表示されるのでコピーします。
 

3.classの埋め込み

<i class="ion-social-codepen icon"></i>

使用したいアイコンのクラス名をタグに付与します。
 

4.表示

See the Pen Icon Font by madka (@madka) on CodePen.0

こんな感じで表示されます。font-sizeとcolorでアイコンサイズと色を調整できます!

Evil-Icons

Evil-Icons
11_6
Evil-IconsはSVGアイコンをCDNで利用できるほか、AIファイルなどのダウンロードをすることもできます。

対応ファイル

SVG AI Sketch

CDNでの使い方

 

1.cssとjsの読み込み

<link rel="stylesheet" href="https://cdn.jsdelivr.net/evil-icons/1.7.8/evil-icons.min.css">
<script src="https://cdn.jsdelivr.net/evil-icons/1.7.8/evil-icons.min.js"></script>

使い方ページに記載してあるファイルを読み込みます。
 

2.data名の確認
11_7
サイトのアイコン下にクラス名が表示されるのでコピーします。
 

3.data-iconの埋め込み

<div data-icon="ei-archive"></div>

使用したいアイコンのdata名をタグに付与します。
 

4.表示

See the Pen YWWyrJ by madka (@madka) on CodePen.0

data-sizeでアイコンサイズを変えることができてクラス名をつけてcssで色を変えたりもできます。

FLAT ICON DESIGN

FLAT ICON DESIGN
11_8
カラフルでロングシャドウを使ったデザインのフラットアイコンをダウンロードすることができます。背景色のないものやシャドウだけのアイコンも用意されています!

対応ファイル

JPEG PNG SVG

ファイルサイズ※PNGの場合のみ

16px 32px 64px 128px 256px 512px

フリーアイコンを調べるとたくさんのサイトが出てきますが、商用はできなかったりクレジット表記が必要だったり・・・と時間短縮のはずがアイコン探しで時間をとられてしまったりします。そんなときは、まず紹介した5つのサイトから探してみると早いかもしれません。

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend