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 既存のアイコンを
GitHubのREADMEの見た目をイケてる感じにする
どうも、hanetsukiです。 GitHubにはアカウントそれぞれにREADMEを乗せられるリポジトリがついているのはご存知でしょうか？ 以前から簡易的なプロフィールは掲載していたのですが、訪問していただいた方に「おっ！」っと思わせるようなREADMEにしたいと思い更新することにしました。 今回更新するにあたって何を使ったのかというのを忘備録的に残していきます。 これが今回完成したREADME 詳しいソースコードは、リポジトリをご覧ください。 Skill Icons 自分が持っているスキルなどを表示するときに便利。 他にもお気に入りの言語や、今学習の言語という使い方もできそうですね！ 詳しい利用方法は、https://github.com/tandpfun/skill-icons#readme をご覧ください Badge Generator Zennのフォロワー数の記載に利用しています。
React でアイコンを使うなら React Icons がおすすめ
概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。
６０００種の汎用ピクトグラムアイコン「Iconsax」:phpspot開発日誌
Iconsax ６０００種の汎用ピクトグラムアイコン「Iconsax」 非常に使いやすそうなアイコン１０００種を６種のスタイルで配布されています。アプリやWEB開発に使えそうですね
Facebook、Twitter、LINE、Instagram、YouTubeのアイコンロゴ一覧 - Qiita
SVGロゴ 公式サイトからダウンロードしたデータから、SVGロゴを作成しました。 アクセシビリティ対応やコードのリファクタリングやサイズの統一も行いたい… よろしければお使いください。 <svg id="Logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1021"><defs><style>.cls-1{fill:#1877f2;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M1024,515C1024,232.23,794.77,3,512,3S0,232.23,0,515c0,255.55,187.23,467.37,432,505.78V663H302V515H432V402.2C432,273.88,508.
商用利用無料！さまざまなUIデザインに適した、SVG完備の美しく精密なアイコン素材 -SWM Icon Pack
企業サイト、オンラインショップ、アプリ、ブログ、プレゼンなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるSWM Icon Packを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。また、スタイルは3種類（アウトライン・ブロークン・デュオトーン）で、美しく精密にデザインされたアイコンです。 Freebie SWM Icon Pack アイコンの特徴 アイコンのダウンロード ダウンロードできるアイコンの種類 アイコンの特徴 SWM Icon Packは、WebサイトやスマホアプリのUIに使用されるSVGアイコンのセットです。アイコンは24pxのグリッドに基づいたピクセルパーフェクトで、ベクターで作成されています。 Freebie SWM Icon Pack アイコンは8つのカテゴリに、全296種類。
商用利用無料、UIデザイン用のSVGアイコンが220種類！改変・再配布も可の太っ腹ライセンス -System UIcons
システムとプロダクトのUI用にデザインされた、オープンソースのSVGアイコンを紹介します。Webサイトやスマホアプリに最適です！ アウトラインのシンプルなデザインで、220種類のアイコンが揃っています。SVGなので、サイズやカラーなども簡単に変更して利用できます。 System UIcons System UIcons -GitHub System UIconsの特徴 System UIconsのダウンロード System UIconsの使い方 System UIconsの特徴 System UIconsは、システムとプロダクトのUIによく使用されるアウトラインのアイコンです。フォーマットはSVGなので、使いやすいと思います。 ライセンスはThe Unlicenseで、商用プロジェクトでも無料で利用できます。改変・再配布もOKです。
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～JavaScriptes6FontAwesomewebpackbabel 概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。
Android Asset Studio
A collection of tools to easily generate assets such as launcher icons for your Android app.
Androidアプリのアイコン画像を変更する方法【初心者向け】
アイコン画像を用意する まずは、Androidアプリのアイコンに使う画像を用意します。 使用できる画像は、PMGやJPG、GIFですが、PNGを使われることが多いです。また、画像のサイズは、もとの大きさに関係なく適当に作成しても自動でリサイズをして表示してくれます。 解像度に応じて表示させるアイコンを作成したいという場合は、以下のサイズで作成してください。 低解像度(mdpi) ： 48px 中解像度(hdpi) ： 72px 高解像度(xhdpi) ： 96px 超高解像度(xxhdpi) ： 148px また、Google Playストアでリリースしたいと言う場合は、512pxのPNG画像が必要になります。 今回は例として、このような単純な画像を使ってアイコンを変更をします。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中 作成したアイコンをプロジェクト内に保存
CSSのみでアイコンフォント風の図柄を表示できる「CSS ICON」の使い方
CSS ICONとは CSS ICONは、CSSのみで描画されたアイコンを表示させることができるコードが集められたアイコン集です。 この記事を書いた2016年11月時点では500以上のアイコンを利用することができます。 CSSのみで描かれたものということなので、思いっきり簡素なものと思いきや、かなり実用的なアイコンがそろっています。 CSS ICONの使い方 アイコンを利用するには、まずCSS ICON利用したいアイコンを選択します。 すると、画面右側に「アイコンを利用するためのコード」が表示されます。 CSSをコピペ これを利用するには、まずCSSをコピーします。 すると、以下のようなコードがクリップボードに貼り付けられるので、CSSファイルなどに貼り付けます。 .heart.icon { color: #000; position: absolute; margin-top: 6px;
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
お料理アイコン大集合！あのチーズ、あの肉、あのキノコなどがかわいくデザインされた手描きのアイコン素材
クッキング関係のかわいいアイテム一つひとつを丁寧に手描きし、それをベクターにしたアイコン素材を紹介します。 Free Cooking Icon Set アイコンの利用にあたっては個人でも商用でも無料で、クレジットの必要も特にない、とのことです。 ダウンロードできる素材のフォーマットは.epsのベクター、カラーやサイズを自由に変更して利用できます。 アイテムは全部で55種類あり、あのチーズ、あの玉子、あの肉、あのキノコ、あのニンジン、あのバナナ、あの目玉焼きなどが揃っています。
Ajaxload - Ajax loading gif generator
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Iconify Design: All popular icon sets, one framework.
GitHub - Richard9394/MingCute: Carefully Designed Icon Library. MingCute is a set of simple and exquisite open-source icon library. Whether you're a designer or a developer, it's perfect for use in web and mobile.
High Quality Royalty Free icons
GitHub - thii/FontAwesome.swift: Use FontAwesome in your Swift projects
Android Asset Studio - Launcher icon generator
Icons | Font Awesome
