企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ
1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。 けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ
これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
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のストロークとなっています。アイコンのフォー
MicrosoftからAndroidやiOSのスマホのUI向けにデザインされたSVGアイコンを紹介します。もちろん、デスクトップで使用しても問題ありません。 アイコンは角が丸く、形状が単純化されており、スマホでの視認性や操作性が考慮されています。スタイルはソリッドとベタ塗りの2種類、2,186種類すべてがSVGアイコンです。 Fluent Icons ※オープンソースなので、有志によるサイトも作成されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンは全部で、2,186種類！ アイコンのスタイルは、Regularのソリッド、Filledの塗りつぶしの2種類。 スマホのUI用に、24pxでデザインされたアイコン。 ダークモードにも対応。 アイコンはSVGで、コードのコピーあるいはファイルのダウンロードで利用できます。 すべてSVGアイコンなので、サイズやカラー
もうこれでSVGアイコンを探すときに困らない！ 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
当ブログでもたくさんのSVGアイコンのライブラリを紹介してきましたが、それらのほとんどがひとまとめに閲覧・検索できる便利なサイトを紹介します。 複数のアイコンライブラリから探せるだけでなく、異なるライブラリのアイコンをまとめてアイコンフォントにもできます。矢印アイコンはMaterial Iconsで、ホームアイコンはBootstrapで、ということもできます。
2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社
はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー
UIデザインに最適！ シンプルなSVGアイコン素材が7,000種類以上揃っていて、完全に商用利用無料 -Phosphor Icons
WebサイトやスマホアプリのUIデザインをはじめ、プレゼンなどのさまざまな成果物に使用できるSVGアイコンのセットを紹介します。 アイコンのスタイルも豊富で、ソリッド・ベタ塗り・デュオトーンなども揃っており、さまざまなデザインに適用できると思います。 Phosphor Icons Phosphor Icons -GitHub Phosphor Iconsの特徴 Phosphor Iconsのアイコンのダウンロード Phosphor Iconsのアイコン Phosphor Iconsの特徴 Phosphor Iconsは、WebサイトやスマホアプリのUIデザインをはじめ、プレゼンテーションやダイアグラムなどさまざまな成果物に使用できるフレシキブルなアイコンのセットです。 7，000種類以上のSVGアイコンが揃っています。 6つのスタイル（Thin, Light, Regular, Bold,
これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、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
企業サイト、オンラインショップ、アプリ、ブログ、プレゼンなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるSWM Icon Packを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。また、スタイルは3種類（アウトライン・ブロークン・デュオトーン）で、美しく精密にデザインされたアイコンです。 Freebie SWM Icon Pack アイコンの特徴 アイコンのダウンロード ダウンロードできるアイコンの種類 アイコンの特徴 SWM Icon Packは、WebサイトやスマホアプリのUIに使用されるSVGアイコンのセットです。アイコンは24pxのグリッドに基づいたピクセルパーフェクトで、ベクターで作成されています。 Freebie SWM Icon Pack アイコンは8つのカテゴリに、全296種類。
この記事では、日常行っているWebデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめてご紹介しています。 これらの新しいツールやサービスを利用すれば、これまで後回しにしていた面倒な作業も自動化し、生産性アップ、円滑なプロジェクト進行を実現できるでしょう。「もっと早く知っておけばよかった」と思わせてくれる便利ツールが揃います。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール 新型コロナの影響で無料提供中のオンラインツール、サービスまとめ 現在新型コロナウイルスの世界的流行の拡大によって、無料提供されて
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. Web制作お役立ちツール 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. アイコン素材パック 7. デザインコレクション 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Fresh Folk スタイリッシュなイラストを作成で
無料のアイコンはたくさんありますが、中でもオープンソースで利用できるアイコンは非常に使い勝手がよく、重宝します。商用のプロジェクトでも無料で利用できる、オープンソースのSVGアイコンのライブラリを紹介します。 10 open source SVG icon libraries that you can use for your next project by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は先日、reddit上でお気に入りのアイコンライブラリはどれですか？というスレッドを立ち上げました。このスレはすぐに人気がでて、私が知らないオープンソースの素晴らしいアイコンライブラリがたくさんあることを知りました。スレに基づいて、オープンソースのアイコンライブラリのベスト10をリストしたいと思い
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール Web制作フ
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見たり、社内のデザインシステム整備の仕事をやったりしています。 さて、2021年に開催した弊社カンファレンス #pixivdevmeetup にて発表しましたデザインシステムの Web 版実装が先日 OSS 化されました 🎉 1。GitHub と npm から利用できます。 github.com www.npmjs.com 発表時点では「pixiv-elements」という名称でしたが、公開にあたって「charcoal」という名前になりました。「charcoal（木炭）」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。 （ただし、npm パッケージのスコープは
Notion用のおしゃれでシンプルなアイコン素材を紹介します。 私はデフォルトの絵文字を使用していましたが、シンプルで統一感のあるアイコンに変更すると分かりやすくなり、Notionを使用するのがより快適になりました。 アイコンをNotionで利用するのは簡単で、スマホならタップしてコピペ、デスクトップならクリックでコピペするだけです。 Notionでアイコンの変更方法 Notion用のおしゃれでシンプルなアイコン素材サイト Notionでアイコンの変更方法 Notionでアイコンを変更するのは、簡単です。 アイコンをタップ・クリックし、「絵文字」から選択したり、「画像アップロード」でアイコンを指定したり、「リンク」にアイコンのURLを入力します。 Notionでアイコンの変更方法 この記事で紹介しているサイトのアイコンを利用する場合は、上記の「リンク」にアイコンのURLをコピペするだけです
UIデザイン用のシンプルにデザインされた高品質なSVGアイコンが2000種類以上！ 改変・再配布も可の太っ腹ライセンス -Atlas Icons
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用にシンプルにデザインされた
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
この記事では、「もっと早く知りたかった」と思ってしまう、Web制作が加速する便利な最新オンラインツールをまとめてご紹介します。 面倒な設定をコピペで利用できるCSSツールや配色ツール、人工知能を使った便利ツールなどが数多く公開されており、ますますクリエイティブな表現が広がりそうなものばかり。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレスの少ない快適な作業フローを実現してみてはいかがでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. 配色ツール 3. デザインツール 4. プロトタイプ・アイコンツール 5. フォント・書体ツール 6. クリエイティブ・面白ツール 2021年のベストツールも一緒にどうぞ。 Web制作を変える！2021年の便利オンライ
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。 実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。 2019年に登場した最新オンラインツール一覧 以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。 ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ ウェブデザイン制作が加速中！便利な最新オンラインツ
この記事では、「もっと早く知りたかった」と思ってしまう、便利な最新オンラインツールをまとめてご紹介します。 AIをフル活用した次世代ツールから、これまでの作業が嘘のように捗る便利なものまで、今後のワークフローを変えてくれそうなツールを中心に揃えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザイン・配色ツール 3. モックアップ・アイコンツール 4. 面白・クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール 3D Perspective Glitch Hover Effect グリッチアニメーション中にピクセル化された画像を表示する、ユニークでたのしいホバーエフェクト。 Bike Demo Three.js マウススクロールに合
商用でも完全に無料！ WebサイトやアプリのUIに適したシンプルデザインで、SVG完備のアイコン素材 -Sargam Icons
企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるSargam Iconsを紹介します。 アイコンは下記のラインをはじめ、デュオトーン・塗りの3種類で、700個以上が揃っています。しかもオープンソースなのは、嬉しいですね。 Sargam Icons Sargam Icons -GitHub Sargam Iconsの特徴 Sargam Iconsのダウンロード Sargam Iconsのアイコン Sargam Iconsの特徴 Sargam Iconsは700個以上のアイコンが揃った、シンプルで一貫性の高いSVGアイコンのセットです。 ライセンスはMITライセンスで、商用プロジェクトでも無料で利用できます。
この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。 WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。 アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。 現役デザイナー直伝、アイコンデザインがもっと良くなる８個のヒント ヒント１ – グリッドを設定しよう アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。 以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース（Bo
この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 これまではむずかしいと思っていたことや、面倒な作業をボタン一発で完了できるなど、デザイン制作の時間短縮にぴったりなツールから、遠隔でのテレワークにも便利な新機能、ユニークなツールやサービスなどが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Tail Blend CSSmix-blend-modeプロパティをリアルタイムで
SVGアイコンを探すときの新定番！ オープンソースのSVGアイコンを横断検索で、好みのデザインを見つけることができる -Iconhunt
オープンソースのSVGアイコンを探すときに大変なのが、好みのデザインを見つけることだと思います。たとえば、検索用の虫メガネアイコンだとレンズの大きさ、持ち手の長さ、レンズと持ち手のバランス、ストロークの太さなど、いろいろなデザインのアイコンがあります。 オープンソースのさまざまなアイコンを横断検索して、好みのデザインを見つけることができるSVGアイコン特化の検索エンジンを紹介します。 Iconhunt Iconhuntは、オープンソースのアイコン（約150K）を対象にした検索エンジンです。キーワードを入力すると、各ライブラリのそのアイコンが一覧で表示されます。アイコンはすべて、MITライセンスの下でライセンスされているIconify -GitHubに従っています。
簡単・便利・時短！おすすめ最新オンラインツール35選
この記事では、Webデザイン制作を快適にする最新オンラインツール30個をまとめてご紹介します。 ウェブデザインだけで、あらゆるクリエイティブな場面で活躍しそうな、「あったら便利。」を実現した驚きの新しいツールを中心にセレクト。 これまで時間のかかっていた面倒なことも、ウソのように簡単にこなす便利な機能や素材などずらり揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 🧰 Webデザイン便利ツール 🦄 デザインツール 🗺 プロトタイプ・アイコンツール 🤯 クリエイティブ・面白ツール Web制作の効率性アップ！おすすめ最新オンラインツールまとめ 🧰 Webデザイン便利ツール 100 Buttons 自由に利用できるHTML/CSSボタン100種類をコレクション。どれも魅力的なアニメーションが目を引きます。GitHubページも公
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常の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 既存のアイコンを
これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
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のストロークとなっています。アイコンのフォーマッ
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 ↑私が10年以上利用している会計ソフト！ チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input t
商用のプロジェクトでも無料で利用できる、スマホなどの小さなスクリーンに適した極小サイズでくっきりと鮮明に見えるSVGアイコンを紹介します。 SVGなので、もちろん大きいサイズでも美しく表示され、カラーの変更も簡単。しかもオープンソースなのは、嬉しいですね。 Radix Icons Radix Icons -GitHub Radix Iconsの特徴 Radix Iconsのダウンロード Radix Iconsの使い方 Radix Iconsの特徴 Radix Iconsはスマホなどの非常に小さいスペースでも視認性を損なわずに使用できるようデザインされたSVGアイコンで、極小サイズ（15x15）でもくっきりと鮮明に見えるようにデザインされています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
WebサイトやスマホアプリのUIデザインにぴったりなSVGアイコンを紹介します。「Humble」の名の通り、主張しすぎない控えめでシンプルなデザインです。 オープンソースで個人でも商用でも無料で利用できます。アイコンはSVGなので、サイズやカラーの変更はCSSで簡単にできます。さらに、Figma用も用意されているのは、嬉しいですね。 Humbleicons Humbleicons -GitHub Humbleiconsは、WebサイトやスマホアプリのUIデザイン用にニュートラルでシンプルにデザインされたSVGアイコンのセットです。MITライセンスで商用プロジェクトでも無料で利用できます。 アイコンはまとめて全部のダウンロードもできます（後述）が、個別に使用することもできます。アイコンをクリックすると、SVGのインライン・スプライトのコードがコピペできます。
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが無料で利用できるIconicを紹介します。 アロー・ホーム、サーチ・ショッピングカート・バッグ・スター・メールなど、UIデザインでよく使用されるアイコンが揃っており、フォーマットはSVGで利用できます。また、Vue, Reactのコンポーネントとしても利用できます。 Iconic Iconic -GitHub Iconicアイコンの特徴 Iconicアイコンの使い方 Iconicアイコンの種類 Iconicアイコンの特徴 Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。 Iconic アイコンは26のカテゴリに、全160種類。 24pxグリッドに基づくピクセルパーフェクトなデザイン。
ウェブサイトや配布物を作っているときに、制作物にぴったりのアイコンが見つからず、写真やイラストを元に自分でアイコンを作成したことがある人もいるはず。このような手間を大幅に省いてくれるのが「SVG Silh」で、無料＆商業利用可能なフォトストック「pixabay」にある人・動物・物といったさまざまなイラストや写真をSVG・PNG形式のアイコンに変えてくれており、制作物にぴったりのアイコンを探し出せるようになっています。 Free SVG Image & Icon. | SVG Silh https://svgsilh.com/ SVG Silhのトップページは以下のような感じ。画面上部にSVG画像、下部にカテゴリタグが表示されています。 ウェブサイト名の下には全21色のカラーボタンが表示されており、ボタンを押すと表示されているSVG画像を全ての色を変化させることが可能。「5」と書かれたボタン
これまた、便利なツールが登場しました！ 使用するアイコンだけをアイコンフォントやSVGアイコンのセットにできる無料オンラインツールを紹介します。 さまざまなアイコンプロジェクトがサポートされており、BootstrapやMaterial Designをはじめ、当ブログでも紹介したことのある数多くのアイコンから使用するアイコンだけを選択できます。 例えば、Bootstrapからホームとアローだけをセットにするとか、BootstrapのホームとMaterial Designのアローをセットにするとかも簡単です。 Icônes Icônes -GitHub Icônesの特徴 Icônesの使い方 Icônesの特徴 Icônesは複数の商用利用無料のアイコンから、使用するアイコンを選んでセットにして利用できるオンラインツールです。 登録など面倒なことは一切なく、ブラウザから簡単に利用できます。
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. SVGとは画像形式の１つで、おなじみのJPG形式やPNG形式と違い、２次元ベクターなので拡大縮小しても画質が落ちないというメリットがあります。また、XMLというマークアップ言語で記述されるため、テキストとしてテキストエディタで編集できるのが特徴です。 このSVGをwebデザインに応用すると、かなりクレイジーなことができてしまいます。なんと、ページにコードを書くだけで、画像ファイルを用意することなくイラストやアニメーショ
今週のはてなブックマーク数ランキング（2023年10月第5週） - はてなブックマーク開発ブログ
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。10月23日（月）〜10月29日（日）〔2023年10月第5週〕のトップ30です*1。 順位 タイトル 1位 「22時に寝る」を徹底して睡眠中心の生活に変えたら、良いことずくめだった 2位 「頭がおかしくなりそう」9時17時勤務のハードさに新社会人が涙の訴え（コスモポリタン） - Yahoo!ニュース 3位 家の購入を考え始めたら読んでほしい。購入体験を良くするために知りたいことの全て｜Yuko Kawashima 4位 英語習得の近道は、ChatGPTで“自分で教材を作る”こと 『英語は10000時間でモノになる』著者がすすめる学習法 - ログミーBiz 5位 「映画やドラマにセックスシーンは要らない」「いちいち恋愛に発展させるな」若者の声、米調査 | THE RIVER 6位 霞ヶ関パワポ
タイトルの通り、Gatsby.js, TailwindCSS, Netlifyの組み合わせでフロント技術オンリーのフリー素材サイトを作ってみたので、使っている技術とサイトの紹介をしたいと思います。 Qiitaに書くかZennに書くか(同時にどちらにも投下するか)迷ったんですが、Zennにしました。 作ったものと動機 「FLAT SVG DESIGNS」というSVGアイコンやイラストを無料で配布する素材サイトを作成しました。アイコンはまだ130個ほどしかありませんが、順次追加していきます。アイコン作成からサイト作成まで全て一人でやってますので、更新はゆっくりになると思います。(1週間に10個が目標) FLAT SVG DESIGNS アイコンはこんな感じのデザインです。 ここがこだわり サイト全体でPNG形式などのラスター画像を使っているのはファビコンのみ。それ以外は全てSVGファイルで画像
なんとなく記憶があいまいだったため、 illustratorでsvgファイルを書き出した後、 マウスオーバー時や状況に応じて、アイコンやロゴの色をCSSで変更する方法をまとめてみました。 SVGファイルの基本の色指定Illustratorでのsvg書き出しまずはSVGファイルの基本となる色指定についてです。 例えば、illustratorの書き出しから デフォルト設定でsvg形式に保存した場合、SVGファイルをエディターで開くと <svg xmlns="http://www.w3.org/2000/svg" width="102.75" height="97.72" viewBox="0 0 102.75 97.72"><defs><style>.a{fill:#ff7bac;}</style></defs><polygon class="a" points="51.37 0 67.25
この記事は次の日本語訳です（Reactの部分のみ抜粋） https://github.com/enaqx/awesome-react 公式 React Official Website React Documentation React GitHub コミュニティ Reactiflux Discord Channel React StackOverflow React Twitter オンラインでReactのコードを試せるサービス CodePen CodeSandbox JSFiddle チュートリアル Reactのチュートリアル React Official Tutorial - 公式 Using React in Visual Studio Code - ReactをVSCodeで使う Scrimba - Learn React for free interactively - Scr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons
全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs
こいつ、動くぞ！ 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons
全部、完全に商用利用無料！スマホのUIデザインに適した2,186種類のSVGアイコン素材 -Fluent Icons
商用利用無料！さまざまなUIデザインに適した、SVG完備の美しく精密なアイコン素材 -SWM Icon Pack
ウェブ制作がサクサク捗る！便利な最新オンラインツール37個まとめ
Webデザイン制作が変わる！便利な最新オンラインツール45個まとめ
商用利用無料！オープンソースで利用できる、SVGアイコンのライブラリのまとめ
Web制作フローが変わる！便利な最新オンラインツール43個まとめ【2020年版】
pixiv のデザインシステム実装『charcoal』を OSS 化します - pixiv inside
無料で使える！ Notion用のおしゃれでシンプルなアイコン素材サイトをまとめました
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
知らなきゃ損！Web制作を爆速にする最新オンラインツール40個まとめ
2019年間ベスト！Web制作を変える便利オンラインツール厳選85個
もっと早く知りたかった！便利な最新Web、オンラインツール30選
現役デザイナーが教える、アイコンデザインがより良くなる８個のヒント
ラクラクWebデザイン制作！便利な最新オンラインツール39個まとめ
CSSとSVGでチェックボックスを装飾しよう！
商用利用無料！スマホなどのUIデザインに最適、極小サイズでくっきりと鮮明に見えるSVGアイコン -Radix Icons
商用利用無料！ UIデザインに最適、シンプルで控えめにデザインされたSVGの高品質なアイコン素材 -Humbleicons
商用利用無料！UIデザインに適した、シンプルで使い勝手がよいSVG完備のアイコン素材 -Iconic
無料で商業利用可能なSVGアイコンの数々をダウンロード可能な「SVG Silh」レビュー
複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール
CSSで絵が描ける！コード入力によるアニメーションやパララックス付きSVG風景イラスト12選
Gatsby.js, TailwindCSS, Netlifyでフリー素材サイト作ってみた
SVGのアイコンやロゴの色をCSSで変更する方法 | MW Design
Awesome React - Reactのオススメ記事・ライブラリ・ツール まとめ - - Qiita