1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。 けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma、Sketch、Illustratorとさまざまなアプリ用のファイルも用意されています。 iconsax iconsax -GitHub iconsaxの特徴 iconsaxのダウンロード iconsaxのアイコン iconsaxの特徴 iconsaxは、vue.jsのオープンソースのフレームワーク「vuesax」の公式アイコンです。個人でも商用プロジェクトでも完全無料で利用できますが、別の名前で販売および配布はできません。詳しくはライセンスをご覧ください。

この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSVGツールやSVG最適化ツールなど、SVGにまつわるあらゆるツールを揃えています。 新しいツールが見つかり次第アップデートしていく予定なので、ブックマークしておくと良いかもしれません。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作をもっと楽に！便利なSVGツールまとめ Haikei ユニークなSVGシェイプや背景、シームレスパターンを作成できるオンラインツールで、グラデーションや波ウェーブなど基本的なシェイプはほぼ揃います。 配色やサイズなど、本格的なカスタマイズができるのも特長で、作成したデザインはSVGやPNGファイルとして無料ダウンロード可能です。 Cool Backgrounds お好みの配色をつか

企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。

Noun Project is the World's Most Diverse and Extensive Collection of Icons and Mission-Driven Photos.

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと

この記事では、無料ですぐに利用できるハイクオリティな最新アイコン素材をまとめてご紹介します。これらの素材を利用すれば、ウェブサイトのUIデザインやプレゼン用の資料やスライド作成などを、手軽に仕上げることができます。 紹介しているアイコン素材は、シンプルで使い勝手の良いものから、デザイン性に優れたユニークなもの、IllustratorやPhotoshopはもちろん、SketchやFigmaなどのツールでも利用でき、何かと重宝するアイテムが揃っています。 イチからアイコンを作成する時間がないときや、オリジナルアイコンを作成したいときの参考にもなります。 高クオリティ！すぐに使える最新フリーアイコン素材まとめ Material Icons Library Googleのマテリアルデザインを基準としたアイコンデザイン1000種類以上画揃った素材セットで、SketchやPhotoshop、Adobe

あたらしい年がはじまり、Webサイト制作フローにあたらしいPhotoshopプラグインを追加してみませんか。制作スピードをアップしてくれる、便利な拡張機能、スクリプトをまとめました。 海外デザインブログDesignModoで、Webデザイン制作をより効率化してくれる、Photoshop拡張機能プラグインをまとめたエントリー「Photoshop Plugins You Won’t Be Able to Live Without」が公開されていたので、今回はご紹介します。以前ご紹介した、無料Photoshopプラグインも参考にどうぞ。 詳細は以下から。 Webサイト制作をスピード化！Photohsop拡張機能プラグインまとめ Photoshop SVG Export 価格 $20（およそ2,100円） SVGファイルを作成するときに活用したいプラグインで、特にSVGアイコン作成に適しています。

この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？ この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？ たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。

商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision

Simple tool to find, customize and generate common SVG icons for your project

SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。 この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 03の内容を一部抜粋し、この記事用にリライトしたものです。 やったほうがよいこと 曲線のアンカーポイントを減らす ブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるのて

Fast native apps with icons, illustrations and photos

SVGアイコンを自分で選んで、好みのセットをつくり、ダウンロードできる無料オンラインサービスを紹介します。 使い方は簡単で、登録などの面倒なことも一切不要です。

シンプルなUIなのに、非常に多機能で便利なSVGアイコンの管理・作成・コード変換ができるOS X用の無料ツールを紹介します。 SVGアイコンに関するほとんどのことがこれ一つでできてしまいます。 Svgsus まずは、初期状態。 デフォルトで登録されているSVGアイコンは無料で利用でき、カテゴリやキーワードで目的のアイコンを見つけることができます。

2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目

以前であればアニメーションGIFを用いることが多かったローディングアニメーション（プリローダー）も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。 また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。

26 Free Vector Animal Graphics - Ukiyo-e SVG 浮世絵の作者は江戸時代末期に活躍した浮世絵師: 歌川 芳虎（Wikipedia）で、パブリックドメインの浮世絵をベクター化したものです。 まずは、動物から。 「新版獣尽（1857）」の26種類の動物・空想動物が描かれています。