Advertisement

zwicon

 

この記事では、ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリをまとめて紹介しています。

 

豊富な収録数に加え、サイズや配色などのカスタマイズ性、モダンデザイン対応のヴィジュアル性もアピールできる、使い勝手の良いシンプルなアイコン素材が揃います。

 

MITライセンスで、商用利用も可能なオープンソースの素材が中心で、クライアント案件でも安心して利用できます。また、サポートしているファイル形式も豊富で、あらゆるデザインアプリで利用できる点もポイントです。

iconly

 

 

商用可で無料!UIデザイン用のSVGアイコンライブラリまとめ

 

CSS.gg

CSSのみで描いたアイコンやSVGスプライトで利用可能なSVG & Figma UIアイコン、統一感のあるコンポーネント700以上が揃った、完全オープンソースのアイコンライブラリ。詳しい使い方はGithubレポジトリよりどうぞ。

free-ui-icons-2

  • Figmaコンポーネントライブラリで整理されたUIアイコン
  • CSSアイコンの他に、React向けやFigma、Adobe XDコンポーネントも利用可能
  • 柔軟なカスタマイズがCSSで可能に

 

 

Heroicons

Tailwind CSSのクリエイターによって作成された、オープンソースアイコンライブラリ。ウェブサイトで必要な224個のアイコンは、塗りつぶしとアウトラインスタイルによる提供。アイコンをクリックするだけで、SVGコードをコピーできお手軽です。

heroicons_-_open_source_svg_icons

  • MITライセンスの完全オープンソースライブラリ
  • Githubレポジトリより全アイコンをSVGファイル形式で入手可能
  • Figmaファイル形式も無料ダウンロード可能

 

 

Ionicons

スッキリとしてわかりやすいアウトラインアイコンが揃ったSVGライブラリ。スクリプトファイルを読み込めば、name属性を変更するだけでアイコンを追加、変更できます。

ionicons-open-source-preview

 

 

 

Feather Icons

282個のSVGアイコンが収録されたライブラリ。ダウンロードする前にアイコンのサイズやストローク幅、色の設定も可能。マークアップ記述が楽にある仕様。

feathericons-svg-icons

 

 

 

Zwicon

どんな案件にもフィットするUX/UIデザイナーが必要なアイコン素材566個を揃えた素材。Webサイトへの利用も簡単なSVGアイコン同時収録。

zwicon

 

 

 

Bootstrap Icons

人気フレームワークBootstrap公式のアイコンライブラリがついに登場です。1,100種類以上のSVGアイコンが揃い、サイズや配色などのカスタマイズをCSSから手軽に行うことができます。

primary_bootstrap_icon_library

  • BootstrapオフィシャルSVGアイコンライブラリで、Bootstrapとの互換性あり
  • Githubレポジトリ

 

 

Forge Icons

300+種類のSVGアイコンをまとめた無料ライブラリ。ショッピングサイトや旅行サイト、ソーシャルメディア、アプリデザインなどにも最適なあらゆる素材が揃います。

forge_icons_-_300__right_mix_of_svg_icons_for_use_in_e-commerce__travel__social_media__app_design_and_much_more_

  • サイズ、ストローク、カラー変更をウェブ上で手軽に編集できる
  • アイコンクリックで、ソースコードのコピーとSVGファイルのダウンロード

 

 

Ikonate

カスタマイズ性を重視したSVGアイコンセット。必要なアイコンのみを選択すれば、実際にHTMLで利用したデモファイルと一緒にダウンロード可能。

ikonate_-_fully_customisable___accessible_vector_icons

  • サイズや配色、ストロークを直感的にカスタマイズできる
  • 必要なアイコンのみを選択してダウンロード可能
  • HTMLデモファイル、SVGスプライトに対応したファイルも同時に入手可能

 

 

Tabler Icons

バージョンアップを重ね、現在681個のSVGアイコンが揃った、MITライセンスで完全無料のライブラリ。ウェブ上でサイズや配色、ストロークも変更でき、そのままダウンロード可能なシンプルで、使い勝手の良いスタイルも素敵。

  • ウェブでお好みの配色やストローク、サイズに変更可能
  • 随時アップデートで、あらゆるUIデザインが追加、網羅されている
  • MITライセンスで、商用プロジェクトにも対応できるユニバーサルデザイン

 

 

Eva Icons

480個を超えるオープンソースのアイコン素材を、SVGまたはPNGファイル形式で無料ダウンロードでき、ウェブサイトはもちろん、iOSやAndroidにも対応したデザイン。じつはホバー用のCSSアニメーションを選択できる細かさも。

eva-icons

 

 

 

Remix Icon

2,000個以上の美しいSVGアイコンを揃えたオープンソースの巨大ライブラリ。ビジネス、金融、地図などさまざまなカテゴリあり。SVGまたはPNGファイルでダウンロード、またはアイコンをクリックでソースコードを直接コピーできます。

remix_icon_-_open_source_icon_library

  • 2,149個のあらゆるカテゴリを網羅したライブラリ
  • SVG、PNGアイコンの他、ボタンひとつでソースコードをコピーできる
  • ライブラリ全体の一括ダウンロード、SVG Spritesの作成も楽

 

 

Simple Icons

およそ1,400ものブランドロゴとブランドカラーを揃えた、無料SVGアイコンライブラリ。

simple-icons

 

 

 

Unicons

24pxのミニサイズSVGアイコン1,100種類以上が無料で提供されているコレクション。27のカテゴリを網羅しており、SVGアイコンおよびWebフォントとしても利用可能。

unicons

  • 27のカテゴリ、分野別に整理された巨大ライブラリ
  • SVGアイコンとWebフォント形式
  • 統一感のある使い勝手のよいデザイン

 

 

Gradientify

お好みのグラデーションカラーを選択でき、合計476個という大量のSVGアイコンを無料ダンロードできるアイコンコレクション。

gradientify-icons

 

お好みのグラデーションカラーを選択でき、合計476個という大量のSVGアイコンを無料ダンロードできるGradientify Iconsが公開されていたので、今回はご

 

 

Material Icons Library

マテリアルデザインをベースにしたアイコン1,000種類が揃うライブラリ。PhotoshopやSketch、Adobe XD、Figma、InVisionそしてSVGファイルもひとまとめに揃います。ラインセスApache License Version 2.0による、個人および商用にも無料利用可能。1000-material-icons-library-1

  • スタイルは角丸、アウトライン、ツートンで、それぞれ1,000種類のアイコン収録で合計3,000個
  • PhotoshopやSketch、Figmaなど豊富なファイル形式
  • マテリアルデザインベース

 

 

Sysmtem UIcons

システム設計やプロダクトのUIデザインを想定した、シンプルで統一感のあるSVGアイコン220個セット。

system_uicons

  • クレジット表記なしで商用利用も可能
  • SVGコードの他にCDNリンクでの利用も可能

 

 

Teenyicons

15×15ピクセルの極小ミニサイズで設計された、SVGミニアイコン1,000個以上が揃ったコンプリート?コレクション。はっきり鮮明な見た目が特長で、商用案件にもばっちり対応できます。

teenyicons_-_tiny_minimal_1px_icons

 

 

Animated Icons 2.0

アイコンに目を引くアニメーションを加えた新しいライブラリで、500個以上を無料ダウンロードできます。UIやWebはもちろん、ソーシャルやジェスチャー、天気、食べもの、スポーツなど幅広いカテゴリに対応。

animated_icons_2_0

 

最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの
 

 

Potlab Icons

UIデザインで見かけるアニメーション付SVGアイコン集。アイコンの色やストロークの太さ、サイズなども自由にカスタマイズできます。

 

ダウンロードしたSVGファイルの使い方、カスタマイズについては、以下の動画が分かりやすいでしょう。

  • UIデザイン向きのアニメーションSVGアイコン
  • ダウンロードしたHTMLファイルをコピペで利用可能

 

 

Movin Icons

魅力的だけど控えめなアニメーションも実装したSVGアイコン素材100+個を揃え、あらゆるアプリやプラットフォームに対応できる柔軟さもポイント。無料版は5個のアイコンをダウンロードできます。

movin-icons

 

 

 

300 Free Colored Icons Pack

色付きのかわいいイラストアイコン300個を揃えたライブラリ。Illustrtaorで編集できる他、SVGとPNGファイル形式で無料ダウンロード可能。

300-colored-icon-set

 

 

 

Iconly Essential Bulk

ウェブサイト制作に最低限必要な、120種類のUIアイコンが揃った素材で、丸みのある柔らかい雰囲気が印象的。PhotoshopやIllustrator、Adobe XD、Sketch、Figma、SVGと豊富なファイル形式でダウンロード可能。

free-iconly-essential-icons-piqo-design-230520-prev1

 

 

 

350+ Free Icons

一般的なサイズ24pxでバランス良くデザインされたアウトライン型アイコンライブラリ。随時アップデートが行われており、現在350個。Illustrator用Aiファイル、SVG、Figmaファイル形式を選択可能。

350-free-icons

  • ウェブの一般的なサイズ規格に合わせたデザイン設計
  • Ai、SVG、Figmaファイルを無料公開中
  • 実際のクライアントプロジェクトですでに利用されている

 

 

Freebie | Magni icon set

どんなWebプロジェクトにも対応できる、アウトライン型ピクセルアイコン300個セット。Figmaファイルで配布中。

300-magni-icon-set

 

 

 

266 FREE Responsive Icons in 3 Sizes (16/20/24px)

ユーザーインターフェースとワイヤーフレームでの利用に特化した、シンプルでわかりやすいSVGアイコン。3サイズ (16/20/24px)でそれぞれ作成された、FigmaとSketch向けアイテム。

1

 

 

 

200 Free Dripicons Icons Library

UX、UIデザインを想定したFigmaアイコンライブラリ。カスタマイズしやすく、ミニマルなデザインを得意としたシンプルアイコン200個セット。

dripicons-icons-figma-library-3

 

 

 

Indie Icons

Webサイトやスマホアプリ制作で使いそうな、204個のUIデザイン向けアイコンが、SVGとCSSファイル形式でダウンロードできるライブラリ。画面右にあるオプションより、配色やサイズ、SVGまたはCSSファイル形式の選択などを行うことができます。

icons___visiwig

  • SVGとCSSファイル形式でできた基本アイコン素材セット
  • HTML/CSSにコピペで利用できる

 

 

ICONSVG

アイコンをSVGコンポーネントに変換するプロセスをシンプル化できるユニークなツール。基本となるインターフェース用アイコンが揃い、自由に好みに合わせてカスタマイズ、あとは最後に表示されたSVGコードを貼り付けるだけ。

iconsvg