スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

フリーでフラットなアイコン素材がダウンロードできるサイトのまとめ

最近フラットな感じのデザインが流行っているということで、フラットなデザインに使えそうなフラットなアイコンがダウンロードできるサイトを集めてみました。

flat-icon00.png

ファイル形式は、pngやjpgなどの画像形式、aiやsvgなどのベクター形式、Webフォント形式など様々あります。最後にWebフォントの使い方を説明していますのでぜひご覧ください。

この記事はちょっと前に書いていたのですが、よくよく調べると同じような記事は国内外にあるようですね。せっかく作ったので載せます。基本フリーですがライセンス等はサイトをご確認ください。

Some Random Dude

flat-icon0.png

様々なフォーマットで提供されていて、アイコンの種類も色もかなり多いです。

  • png
  • svg
  • Webフォント

Simple Icons

flat-icon0.png

16x16から4096x4096まで11のサイズのpng形式のアイコンがダウンロードできます。アイコンの色は白と黒があって、背景は透明ですのでこちらで自由に指定して使うのがいいと思います。

  • png

Freebie: Flat Web Icon Set

flat-icon0.png

32x32と64x64のpng形式のアイコンです。色は黒とそれぞれ色が付いたものがあります。

  • png

Premium Flat Social Icon Set

flat-icon0.png

主要なソーシャル系のアイコンがダウンロードできます。四角で角が少し丸くなっているものと丸型の2種類あります。

  • png
  • jpg

WPZOOM Developer Icon Set

flat-icon0.png

様々なフォーマットで提供されています。pngは48pxサイズです。

  • png
  • jsd
  • ai

Publicons — publishing platform logos

flat-icon0.png

丸型のアイコンです。

  • png
  • svg

Eldorado mini free | Icojam

flat-icon0.png

pngの40x40だけですが、1262種類もあります。

  • png

ikonic: 180 real iOS icons | Radesign

flat-icon0.png

png形式で25個が無料で提供されています。

  • png

20 Flat Icons (PSD) | GraphicsFuel.com

flat-icon0.png

カラフルでフラットなアイコンが20個ダウンロードできます。

  • png
  • psd

Dribbble - Free Glyphs by Michael Zenaty

flat-icon0.png

psd形式で32x32のアイコンが20個ダウンロードできます。

  • psd

Icons DB - free custom icons

flat-icon0.png

現在1532種類のアイコンがあり、日々増えています。サイズは16x16から512x512までの8種類、形式はico、png、gif、jpgの4種類があります。

  • ico
  • png
  • gif
  • jpg

Flat Design Icons Set Vol1 | Media Icons | Pixeden

flat-icon0.png

フラットでカラフルなpsd形式のアイコンがダウンロードできます。

  • psd

Flat Design Icons Set Vol2 | Media Icons | Pixeden

flat-icon0.png

先ほどと同じくフラットでカラフルなpsd形式のアイコンがダウンロードできます。

  • psd

Flat Design Icons Set Vol3 | Media Icons | Pixeden

flat-icon0.png

3つ目です。

  • psd

Forecast Weather Icons | Conceptual Icons | Pixeden

flat-icon0.png

天気に関するアイコンがai、eps、psd形式でダウンロードできます。

  • ai
  • eps
  • psd

iconmonstr - Free simple icons for your next project

flat-icon0.png

現在1434種類のアイコンがあります。6種類のpngとsvg形式で個別にダウロードできます。

  • png
  • svg

Batch • 300+ Icons for Web & User Interface Design

flat-icon16.png

pngは16x16、32x32、64x64の3種類あります。

  • png
  • psd
  • svg
  • Webフォント

Dribbble - Eco Ico by Matthew Skiles

flat-icon0.png

線が細めでさわやかなpsd形式のアイコンがダウンロードできます。

  • psd

Foundation Icons Fonts - ZURB Playground - ZURB.com

webfont-icon.png

使い勝手がよさそうなWebフォント形式のアイコンです。

  • Webフォント

Typicons

webfont-icon.png

使い勝手のよさそうなアイコンが揃っています。

  • Webフォント

Font Awesome, the iconic font designed for use with Twitter Bootstrap

webfont-icon.png

249種類もあり、Webフォントとしてはかなり多いと思います。

  • Webフォント

Free Font Web Symbols by Just Be Nice Studio | Font Squirrel

webfont-icon.png

線が太めのWebフォント形式のアイコンです。

  • Webフォント
Webフォントについて

サイトによって提供されているフォント形式が違っている場合もありますが、次のようにして呼び出すのが一般的です。

CSS
@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

これだと様々な環境に対応できます。

で、実際にフォントを使う場合ですが、アイコンの場合は直接記述せず、「:before」や「:after」を使ってCSS内に記述する場合が多いみたいです。

CSS
.home:before {
  font-family: "MyWebFont";
  content: "C";
}

この場合クラス名が「home」の要素の前に「C」に該当するアイコンが入ります。

HTML
<i class="home"></i>ホーム

こんな感じで、ホームの文字の前にアイコンが表示されます。

なぜこんな回りくどいことをするのか?これは推測ですが、検索エンジン対策ではないかと思います。

検索エンジンからすれば、アイコン型のフォントであることは恐らく分かりませんので、途中に謎のアルファベットが入った文章だと解釈してしまうのではないでしょうか?そんな誤解を防ぐためにCSSでアルファベットを挿入するようにしているのかなと思います。

あくまで私の推測です。。

あと、TTFやOTFしか提供されていない場合もありますが、@FONT-FACE GENERATORを使えばWOFF、EOT、SVGなど様々な形式に変換してくれて、フォントを呼び出すコードも作成してくれます。

FONT-FACE-GENERATOR.png

ということでWebフォントの予備知識を簡単に説明しました。

さいごに

ということでサイトをフラットなデザインにしたいときに使えそうなアイコンを紹介しました。

Webフォントは基本的にフラットです。Webフォントの普及とフラットデザインの流行は関係してるかもしれませんね。Webフォントはまだまだありましたが、使いやすそうなのをピックアップしました。

他にもよくある感じの記事ですがお役に立てればうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。