svgとuiに関するcolissのブックマーク (7)
-
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常の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のファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UISkeleton Gallery UISkeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。
-
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
-
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるAtlas Iconsを紹介します。 UIデザインをはじめ、ビジネス、ソーシャル、ハンドジェスチャー、ガジェット、エコロジー、フィットネス、食べ物・飲食物、医療など、33種類のカテゴリに2,000種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。 SVGアイコンだけでなく、Webフォント、Figma用なども揃っているので、使い勝手もよく、非常に便利です。 Atlas Icons Atlas Icons -GitHub Atlas Iconsの特徴 Atlas Iconsのダウンロード Atlas Iconsのアイコン Atlas Iconsの特徴 Atlas Iconsは、WebサイトやスマホアプリのUI用にシンプルにデザインされた
-
SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UIComponents WithSVG and CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. SVGで切り抜きを実装 2. SVGでセクションの見出しを実装 3. SVGでリンクの下線を実装 4. SVGでテープを実装 終わりに はじめに SVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケー
-
商用でもクライアントのプロジェクトでも完全無料で利用できる、UIデザイナーやデベロッパーのためのアイコン素材を紹介します。 アイコンのアイテムはなんと1,441種類！ SVG、アイコンフォント、そしてPowerPointやKeynote用まで揃っています。1,441種類のアイコンが1クリックでダウンロードできるので、備えておくと便利だと思います。
-
Webサイトやスマホアプリに使用する、UI用のSVGアイコンをカスタマイズしてダウンロードできるICONSVGを紹介します。 デザインは非常にシンプルで、使い勝手がよいと思います。 ICONSVG ICONSVGは登録など、面倒なことは一切不要。 簡単にアイコンをダウンロードできます。 アイコンの利用にあたっては、明記されていないので作者様に尋ねたところ、個人でも商用でも完全に無料で、商用のプロジェクトに利用しても無料、とのことです。 まずは、カスタマイズの紹介。 アイコンを選択し、右パネルで、アイコンのサイズやストロークを調整できます。
-
1
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery
これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
UIデザイン用のシンプルにデザインされた高品質なSVGアイコンが2000種類以上！ 改変・再配布も可の太っ腹ライセンス -Atlas Icons
Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック
UI用のアイコンが1,400種類以上！商用でも完全無料で利用できる、シンプルなアイコン素材 -Remix Icon
簡単で便利すぎる！UI用のシンプルなSVGアイコンをカスタマイズしてダウンロードできる -ICONSVG
