A high-quality selection of free icons. Your new alternative to Noun Project, Flaticon, and all Figma resources. Available in SVG, Font, React, React Native, Flutter, Figma and Framer.
proof of concept / Beta versions, not intended for production use!
概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。
概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。 Font Awesome を npm でインストールして、 JavaScriptのコードで必要なアイコンだけを import して Font Awesomeの必要最小限が含まれるように w
Googleは、同社のクラウドに対応したシステム構成図を作成するときに役立つアイコン集「SOLUTION ICONS FOR ARCHITECTURAL DIAGRAMS」を公開しました。 アイコンは、Compute Engine、App Engine、Container Engine、Cloud Functionsなどのコンピュート関係に加え、Cloud Storage、BigQuery、Cloud SQL、BigTable、Persistent Diskなどのストレージ関係、Cloud Virtual Network、Cloud DNSなどのネットワークサービスを含む幅広いサービスがカバーされています。 これらのアイコンのライセンスは、「Google ブランド使用許諾」に準ずるとされています。通常の使用の範囲では問題になることはないと思いますが、製品などに添付されるドキュメントなどで利
FREE for you, forever. 1,800種類ものミニマルにデザインされた、永遠に無料利用できるアイコン素材を紹介します。 PSD, AI, Sketch, SVGも完備されており、ダウンロードしておいて損はないですね。 1,800種類は多すぎるので、ごく一部 カテゴリは16、それぞれ100種類くらいある感じです。 Utilities Arrows Messages, Mails Emoji Map, Transport Tools Design Media Network, Web Users Time, Education Social Tech Shop Other Files, Folders アイコンの基本サイズは20x20pxで、鋭角と角丸の2種類でデザインされています。
ParrotHD Open-source ParrotHD Middle ParrotHD Reverse ParrotHD Aussie ParrotHD Goth ParrotHD Old Timey Parrot Bored ParrotHD Shuffle ParrotHD Shuffle Further Parrot* Conga Line ParrotHD* Reverse Conga Line ParrotHD Party ParrotHD Sad ParrotHD* Cop ParrotHD* Fast ParrotHD* Ultra Fast ParrotHD* Slow ParrotHD* Slo-mo Parrot* Dad ParrotHD* Deal With It ParrotHD Deal With It Now ParrotHD Fiesta Parrot
フラットデザインに最適なフラットアイコン素材がフリー（無料）でダウンロードできる「FLAT ICON DESIGN」。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材。利用規約はこちら ファイルのフラットデザインアイコン ノートのアイコン素材 あざらしのフラットアイコン 博士のフラットアイコン素材 はさみのフラットデザインアイコン ハンマー（とんかち）のフラットアイコン ドル袋のフラットアイコン素材 無料の暴れ牛のフラットアイコン素材 スペースシャトルのフラットデザインアイコン ギリシャのパルテノン神殿風のフラットアイコン 目玉のアイコン素材 にわとりのフラットアイコン素材 計算機のフラットアイコン素材 その2 コーヒーカップのフラットアイコン素材 バッファローのフラットアイコン 乳牛のフラットアイコン 海外の大学帽子のフラットアイコン おさるさんのフラット
アプリ開発を行う際には、キャラクター素材はもちろん、背景、BGMといった様々な素材が必要となります。 特にゲームアプリにおいてはちょっとした効果音も含め多くの素材を使用します。 全てを一からデザインするという手もありますが、最近では数多くのフリー素材を無償公開しているホームページも多数存在しますので、利用しない手はありません。 今回は、アプリ開発で使えそうなフリー素材を配布中のホームページをまとめてご紹介します。 キャラクター素材から、音楽素材までジャンルごとにピックアップしておりますので、アプリ開発用の素材を探しているという方はぜひ参考にしてみてください。 アイコン素材を配布しているホームページ 1.Google Material Icon http://google.github.io/material-design-icons/ Googleのマテリアルデザイン向けのアイコン素材をダ
「App Icon Resizer」はiOS／Androidアプリに必要なアイコンを一括生成できるサイトです。アプリの申請時には、様々なデバイスに対応したサイズのアイコンを提出する必要があります。それらのアイコンを一括で作成してくれるので便利。Apple Watchにも対応していますよ。 以下に使ってみた様子を載せておきます。まずApp Icon Resizerへアクセスしましょう。一括生成したいアイコンの画像をアップロードします。大きさは512pxまたは1024pxの正方形がベストです。 このように必要な分だけチェックをいれてダウンロードすることができますよ。すべてのサイズをまとめてダウンロードすることも可能。 このように様々なサイズのアイコンを一括生成することができました。元の大きな画像1枚を作っておけば自動でリサイズしてくれるので便利ですね。生成するサイズに漏れもないですし、アプリ開
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
Webサイトにはアイコンが付き物ですよね。しかしフラットUIが流行とあって、アイコンも派手なものではなく単色でシンプルなものが好まれるようになっています。例えばWeb Fontを使ったアイコンです。 Web Fontを使った場合、カラーリングやサイズの自由が大きいですが、向きを変えたりアニメーションさせたりするのは難しいでしょう。そこで使ってみたいのがMarkaです。 Markaの使い方 MarkaはJavaScriptを使って制御できるアイコンです。 var m = new Marka('#icon'); m.set('circle') .color('#FF6600') .size('50'); こんな感じでアイコンを指定します。四角いアイコンにする場合は、 var m = new Marka('#icon'); m.set('square') .color('#FF6600') .s
美し過ぎるネットワークトポロジ図が一部界隈で有名なINTEROP Tokyoですが、今年のネットワークトポロジ図で利用されたアイコンがPowerPointのフリー素材として公開されています。 図面とともにあらんことを！：第二面 ネットワークのゲンバ -ShowNetを支えるメンバーたちの奮闘ブログ- 昨年に続き、今年もネットワークトポロジ図を作成されている河口さんがネットワークトポロジ図作成に向ける熱い想いを綴ったブログが公開されていますが、その5ページ目に「One more thing...」として、以下のようにあります。 ここでご紹介したポイントの殆どは、PowerPoint でも実践できると思います。興味のある方は、一度ご自分の図面に採り入れてみてはいかがでしょうか。オマケになりますが、ShowNet の図面で使っているアイコンを PowerPoint で使えるようにしたものを置いて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
