【無料】おすすめのSVGアイコンダウンロードサイト3選

【無料】おすすめのSVGアイコンダウンロードサイト3選

WebデザインやWebサイト制作をする際に頻繁に使うアイコン画像。

自分で作っても良いですが、デザインの提案段階などでは、アイコン作成に時間をかけるのは非効率的です。

そこで、私もよく利用している無料でかつ商用利用可能なアイコンをダウンロードできる特におすすめのサイトを3つ紹介します。

SVG形式でダウンロードできるサイトに絞っています

特にWebサイト制作をする際、拡大縮小してもぼやけたりしないベクター画像であるSVG形式の画像を頻繁に使うため、

• 無料
• 商用利用可
• SVG形式でダウンロード可能

以上の条件を全て満たすサイトのみピックアップしています。

SVG形式だとアイコンの色を変えるのも簡単なので、非常に便利です。

SVG形式とJPGやPNG形式の違いについては、こちらの記事にまとめています。
【Webデザイン】最適な画像ファイル形式の選択

おすすめのSVGアイコンダウンロードサイトまとめ

• Material Symbols and Icons – Google Fonts
• Feather – Simply beautiful open source icons
• Tabler Icons: over 4200 vector icons for web design

それぞれの特徴は以下の通りです。

Google Fonts

Material Symbols and Icons – Google Fonts

Googleフォントは非常に人気があるので知っている方も多いと思いますが、実はフォントだけでなくアイコンも提供しています。

シンプルなデザインでかつ種類も豊富にあるので、アイコン探しはまずここから始めましょう。

ページ内でアイコンの大きさや線の太さの変更をライブプレビューで確認できる便利機能付きです。

• 無料
• 商用利用可
• ファイル形式: SVGまたはPNG
• 会員登録不要

Feather

Feather – Simply beautiful open source icons

FeatherもGoogle Fonts同様、シンプルなデザインのアイコンをダウンロードできます。

こちらもページ内でアイコンの大きさや線の太さ、カラーコードを指定すれば色の変更をライブプレビューで確認しながらできます。

また、特徴としてアイコンの角が丸まっており、余白がやや広めなのでGoogle Fontsのアイコンよりも優しい印象を受けます。

デザインイメージに合わせて使い分けると良いですね。

• 無料
• 商用利用可
• ファイル形式: SVG
• 会員登録不要

Tabler Icons

Tabler Icons: over 4200 vector icons for web design

Google FontsやFeatherのアイコンと同様にシンプルなデザインですが、とにかく種類が豊富です。

あまりにも種類が多く、どれを使うか迷うこと間違いなしなので、他のサイトで探したが気に入るものが見つけられなかった場合に、Tabler Iconsで探すようにしています。

このサイトも、ページ内でアイコンの大きさや線の太さの変更をライブプレビューで確認しながら行えます。

• 無料
• 商用利用可
• ファイル形式: SVGまたはPNG
• 会員登録不要

SNSのアイコンは公式サイトからダウンロードする

汎用的なアイコンの他に、FacebookやInstagram、Twitterなどのサービスのアイコンを使うこともよくあります。

これらのアイコンは、上記のアイコンダウンロードサイトからも入手できますが、各公式サイトでダウンロード可能です。

そして、使用上の注意（最低限確保すべき余白の大きさや各種禁止事項）が事細かに決められているので、それに従う必要があります。

それを知らずにアイコンを勝手に使うのは避けた方が無難なので、私は公式サイトからダウンロードしたもののみを使うようにしています。

主要なSNSアイコンのダウンロードリンク

主要なSNSのアイコンがダウンロードできる公式サイトのリンクをまとめています。

ここに無いものも、検索すればすぐに公式サイトが見つかります。

• Facebook: https://about.meta.com/ja/brand/resources/facebookapp/logo/
• Instagram: https://about.meta.com/ja/brand/resources/instagram/instagram-brand/
• Twitter: https://about.twitter.com/ja/who-we-are/brand-toolkit
• LINE: https://www.linebiz.com/jp/logo/

CSSだけでアイコンを表現する

最後におまけです。

画像を使わずに「CSSだけでアイコンを再現する」こともできます。

CSS ICON — project by Wenting Zhang

ここにあるアイコンは全てCSSのみで構成されており、コードをコピーすることも可能です。

画像ではなくCSSを使う一番のメリットは、アニメーションを採用することができる点です。

CSSアイコンのアニメーションの作り方については、こちらにまとめています。

おわりに

文字だけのWebサイトはどうしても物足りなく見えます。

アイコンを効果的に使うことで、文字を読まなくても視覚的に意味を瞬時に理解することができ、UIの観点からも優れたWebサイトになります。

日頃使わせてもらっているアイコンを作ってくださるクリエイターの方々には感謝しかありません。