UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
Post on:2024年7月3日
sponsors
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。
WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。
LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。
Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
アイコンの利用には、さまざまな方法が用意されています。アイコンの一覧から各アイコンをダウンロードしたり、SVGコードをコピーしたりできます。
アイコンのダウンロード
Figmaをはじめ、ReactやAngularやVue2, 3などのライブラリからパッケージとして利用できます。
各パッケージの利用方法は、下記ページをご覧ください。
Featherのアイコンではなく、Lucideのアイコンにする利点があります。
- アイコンの種類が多い。
2024年6月現在、Featherは287種類、Lucideは1,470種類です。 - 人気があるフレームワークやデザインツールとの公式ライブラリおよび統合。
- きちんと管理されたコード。
- コミュニティは活発で、定期的にアイコンのセットが成長しています。
Lucideはアイコンのカスタマイズも簡単で、カラーやサイズやストロークも簡単に変更して利用できます。
アイコンはデフォルトでは、カラー値currentColor、サイズ値24px、ストローク幅2になっており、CSSで簡単にスタイルを変更できます。
|
1 2 3 4 5 6 |
.icon{ color: #ffadff; width: 56px; height: 56px; stroke-width: 1px; } |
CSSについて詳しくは、下記をご覧ください。
Lucideには現在、1,470種類のアイコンがあり、カテゴリごとにまとめらています。その中からいくつか見てましょう。
まずはUIデザインでよく使用するアロー。かなりのバリエーションがあり、いいですね。ちなみに、Featherだと30種類くらいです。
コミュニケーションのアイコンも最近は出番が増えてきました。
デバイスも種類が豊富に揃っています。
食べ物・飲み物、家具、ゲームといったカテゴリのアイコンも揃っています。
アローとかぶるものもありますが、ナビゲーション用のアイコンもカテゴリであると便利ですね。
アプリに使用するアイコンも豊富に揃っています。
ソーシャルメディア関連で使用するアイコンもさまざまな種類が揃っています。
sponsors
