最近のWebサイトやスマホアプリで見かける、ウェーブやポリゴンやブロブなどの抽象的で美しいSVGの背景デザインを簡単に作成、カスタマイズできる無料ツールを紹介します。 カスタマイズはかなり柔軟性があり、色や形、数、角度、カラーモードなどを変更でき、サイズはデスクトップ用、タブレット用、スマホ用が揃っています。 Mossaik.app Mossaikは、Webサイトやスマホアプリ、デスクトップ、タブレット、スマホ用の抽象的で美しいデザインの背景を作成できるオンラインツールです。作成したデザインは、SVGとPNGでエクスポートでき、商用でも無料で利用できます。

Untitled UI JS Untitled UI JSは1100以上の汎用的でミニマルなスタイルのアイコンを用意、Framer Motionと統合してアニメーションにも出来るOSSのアイコンセットです。 1100もの大量のSVG（JSX用コードも有）アイコンが全てオープンソースで提供されており、Framer Motionを使って手軽にアニメーションエフェクトも追加できるようになっています。 スタイルはどんなプロジェクトにも自然と馴染んでくれそうなミニマルで汎用的なデザインですし、種類も非常に豊富なので導入しやすいのではないでしょうか。ライセンスはMITとの事です。 Untitled UI JSGithub The post 1100以上の汎用的でミニマルなスタイルのアイコンを用意、 Framer Motionと統合してアニメーションにも出来るOSSのアイコンセット・「Untitled

Lsicon Lsiconはカスタマイズ性を意識してデザインされた、700以上のミニマルで汎用的なオープンソースSVGアイコンのセットです。 どんなプロジェクトにも使えるような汎用的なアイコンを出来る限り用意した、という印象のラインナップで、スタイルは線画と塗りつぶし、ストロークの太さ、サイズ、色、角丸の有無などを配布サイトでカスタマイズする事が出来ます。 シンプル、オープンソース、多くの種類を用意、といったアイコンセットは沢山存在しますが、どれも使いやすく導入もしやすいので選択肢が増えるのは有難いですね。ライセンスはMITとの事です。 LsiconGithub The post カスタマイズ性を意識してデザインされた、700以上のミニマルで汎用的なオープンソースSVGアイコンのセット・「Lsicon」 first appeared on かちびと.net.

Webサイトやスマホアプリをはじめ、プレゼン・スライド・インフォグラフィックなど、さまざまなプロジェクトで無料利用できる矢印・アローのSVG素材を紹介します。 矢印・アローは200種類以上あり、すべて手描きです。直線でデザインされたのもいいですが、手描きもなかなかいい味をだしますよね。 Handy Arrows Handy Arrows -GitHub Handy ArrowsはDaryaKroによる手描き矢印のギャラリーです。SVGコードを1クリックでコピー、Reactコンポーネントに即時に変換、SVGファイルを1クリックでダウンロードできます。 ライセンスはCC BY 4.0で、個人でも商用プロジェクトでも無料で利用できます。ただし、クレジットの表示が必要となります。

無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。

ソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロードすることもでき、簡単に利用できます。2024年6月現在、419種類のロゴが揃っており、ブックマークしておくと便利です。 ロゴのデザイン集としてもいいですね。

SNSやブラウザ、CMS、ソフトウェア、AIなど様々なサービスのロゴをSVGのアイコン形式でコピーまたはダウンロードすることができる「Svgl」がとても便利に活用できそうだったのでメモ書きとして紹介します。 A beautiful library with SVG logos – Svgl A beautiful library with SVG logos – Svgl 各サービスのロゴはSVG形式でコピーまたはダウンロードすることができます。 「Svgl」では下記のジャンルに分かれた形で様々なサービスロゴが400種類以上も提供されています。 ※2024年5月28日現在 ・AI – 人工知能 ・Browser – ブラウザ ・CMS – コンテンツ管理システム ・Community – コミュニティ ・Compiler – コンパイラ ・Crypto – 暗号 ・Database – デ

商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。 FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。 Iconbuddy -200K+ open source free svg icons Iconbuddyの特徴 SVGアイコンの利用方法 Iconbuddyで利用できるSVGアイコン Iconbuddyの特徴 Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。 Iconbuddy -200K+ open source fr

テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを

WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。2,452種類のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォーマッ

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ

SVGmixは大量のSVGアイコンプロジェクトやSVGロゴデザインを横断検索し、ダウンロードも出来る大規模なSVGのプロジェクトコレクションサイトです。 193以上のアイコンプロジェクトや大量のロゴデザインが用意されており、総数30万以上のSVG素材を横断検索可能となっています。 著作権はそれぞれの素材が明示するライセンスに従って欲しいとの事でした。ユーザー登録等は不要で誰でも利用可能となっています。 SVGmix

Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UI Skeleton Gallery UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。

Flowbite IconsはReact(JSX)やFigmaもサポートしている、400以上用意されたオープンソースのSVGアイコンセットです。 以前ご紹介したFlowbite Svelteを提供するFlowbiteプロジェクトの新しいOSSで、tailwindやFlowbiteと互換性があるそうです。 ソリッドとラインの2種が用意されており、クセが無く使いやすい汎用的なスタイルのアイコンで統一されています。プロジェクトページでラインの太さやサイズの変更のプレビューも可能です。 Flowbiteを今まで使っていた方は、より開発が捗るのではないでしょうか。ラインセスはMITとの事です。 Flowbite Icons

こんにちは。Gaji-Labo 横田です。SVG 画像の読み込み方を使い分けているパターンについて紹介します。 SVGをdataURLでCSSに記述する同じ画像だけれど、色やサイズをページやコンポーネントごと、状態変化によって変更したい時、dataURL で CSS に記述して使います。 div { background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 12" width="12" height="7"><path d="M6.7,5.3l-5-5A.967.967,0,0,0..." fill="%23000000"/></svg>') no-repeat right center; &:has(select:invalid) { b