こいつ、動くぞ！ 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

2021/11/10 346 users SVG アニメーシ フォント こいつ アイコン

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーシ... 続きを読む

Font Awesomeの代替え版となるか!?オープンソースのアイコンフォント「Line - エンジニア・プログラマのソーシャルITメディア

2019/11/02 62 users プログラマ line Font Awesome エンジニア

◆ Line Awesome https://icons8.com/line-awesome 紹介 「Line Awesome」は、名前から分かる通りFont Awesomeをインスパイアしたオープンソースのアイコンフォントです。 1380以上のフリーフォントが無料で使えます。 <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awe... 続きを読む

UI用のアイコンが1,400種類以上！商用でも完全無料で利用できる、シンプルなアイコン素材 -Remix Icon | コリス

2019/04/18 231 users SVG コリス デベロッパー UIデザイナー クライアント

商用でもクライアントのプロジェクトでも完全無料で利用できる、UIデザイナーやデベロッパーのためのアイコン素材を紹介します。 アイコンのアイテムはなんと1,441種類！ SVG、アイコンフォント、そしてPowerPoint...記事の続きを読む 続きを読む

こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons | コリス

2018/06/28 301 users コリス SVG MITライセンス 商用 フォント

400種類以上のアイテムが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 MITライセンスで、個人でも商用でも無料で利用できます。また、アイコンフォントやSVGとして利用...記事の続きを読む 続きを読む

無料で700種類以上の画像アイコンとアイコンフォントをダウンロード可能で商用利用もOKな「IconBros」 - GIGAZINE

2017/12/21 47 users GIGAZINE ウェブページ 身の回り アイコン うえ

身の回りの物や行動をシンプルに表して、直感的に理解させてくれるアイコンはウェブページやアプリのUIに欠かせないものです。そんなアイコンを700種類以上揃えて無料でダウンロードできるうえに、商用利用も可能で毎週新しいものが追加されているサイトが「 IconBros 」です。サイトで用意されているアイコンの形式は、画像形式のものと、アイコンを文字として扱うことが可能な「アイコンフォント」の2種類です。... 続きを読む

260種類以上のアイコンが無料で商用利用OK、CSSツールキットも付属したアイコンフォント「Fontisto」 - GIGAZINE

2017/11/05 68 users GIGAZINE アイコン 商用利用OK 無料

続きを読む

260種類以上のアイコンが無料で商用利用OK、CSSツールキットも付属したアイコンフォント「Fontisto」 - GIGAZINE

2017/11/05 68 users GIGAZINE Instagram Twitter ロゴ

TwitterやInstagramのロゴやピクトグラムなど、ウェブサイトでは多種多様なアイコンが使われますが、そういったアイコンをウェブフォントにした「Fontisto」が無料で公開されています。商用利用もOKで、さらにCSSツールキットも付属。ライセンスは「 MIT License 」です。 Fontisto - the iconic font and css toolkit http://ww... 続きを読む

Webアイコンフォント「Font Awesome」の使い方と注意点について - webproduct-lab

2017/04/24 29 users bookmark webproduct-lab さい 注意点

2017 - 04 - 25 Webアイコンフォント「Font Awesome」の使い方と注意点について css webツール・サービス Bookmark! Facebook Twitter Google+ Pocket Webアイコンフォント使ってますか？ Webフォントの中でも画像を使わずにリストマークなどにアイコンを表示することができる“アイコンフォント”は、レスポンシブデザインのようなサイ... 続きを読む

Font Awesomeの設定方法とよく使うアイコンフォント50個まとめ

2016/12/06 47 users Font Awesome リズ アクセント CSS3 制作

Font Awesomeは、CSS3の登場で使用する機会が多くなりました。私の制作でも、ボタンやリストなどのアクセントとして使用する機会は多いです。そこで今回は、Font Awesomeでよく使うアイコンフォントを50個ご紹介します。Webサイト制作時にチェックしながらコーディングしてみてください。Font Awesomeは、CSS3の登場で使用する機会が多くなりました。私の制作でも、ボタンやリス... 続きを読む

アイコンフォントか？ SVG アイコンか？ ¦¦ Website Usability Info

2015/12/16 56 users SVG UCD アイコン accessibility 公開日

Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2015年12月17日 カテゴリー : アクセシビリティ , ユーザーインターフェース (UI) この記事は、「 Web Accessibility Advent Calendar 2015 」の17日目のエントリーです。 ウェブデザインにおいて、アイコンを配置するこ... 続きを読む

GulpでSVGスプライトとアイコン一覧を一発生成 - Bit Journey's Tech Blog

2015/08/04 31 users SVG Gulp SVGスプライト dex1t ベクター素材

2015-08-04 GulpでSVGスプライトとアイコン一覧を一発生成 出口 (@dex1t) です。 ベクター素材をSVGスプライト化し、インラインSVGとして利用する仕組みを作ったので紹介します。 アイコンフォントかSVGか アイコンフォントとSVGの違いは、ググるとたくさん出てくると思うのですが、 現在開発中のサービスはモダンブラウザのみ対象にしている SVGのまま利用すれば、フォント化す... 続きを読む

アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題について – Rriver

2015/07/20 26 users ディスレクシア Rriver アクセシビリティ 失読症 課題

「Death to Icon Fonts（アイコンフォントに死を） 」というSeren D さんのスライドプレゼンテーションで、アイコンフォントではディスレクシア向けのフォントで問題が起こるし、他にも課題があるので使用は控えたほうが良いですよ、ということを訴えています。A List Apartブログ で紹介されていて気になったので、どんな問題が起こるのか確認してみました。 どんな問題が起こるのか ... 続きを読む

Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ | コリス

2015/07/06 427 users コリス Bootstrap jQuery インタラクション

Bootstrapなどのフレームワークは無し、HTML5とCSS3のシンプルなコードをベースに、jQueryなどでいろいろなインタラクションやアイコンフォントなどを使ったレスポンシブ対応のテンプレートをTemplated...記事の続きを読む 続きを読む

sprite画像はもう終わり？gulpでIcon Fontをつくろう！ | MEMOPATCH

2015/01/26 55 users Gulp MEMOPATCH ベクターデータ 太朗 CSS

こんにちは。太朗です。 最近案件で使ったアイコンフォントが便利だったのでご紹介致します。 アイコンフォントのメリット スプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！ アイコンフォントをgulpで作る では、どうやってアイ... 続きを読む

アイコンフォントを横断検索できるサイト「GlyphSearch」 ｜ ライフハッカー［日本版］

2014/10/03 55 users Glyph フォント 横断 ライフハッカー アイコン

「GlyphSearch」はアイコンフォントを横断検索できるサイトです。アイコンを検索することができ、さらにアイコンフォントで使うタグをコピーすることができます。アイコンフォントを提供している複数のサイトを横断検索してくれるので便利。アイコンが一覧で表示されているので、お気に入りのものがあればそのフォントをいれてみるという使い方もできますね。 以下に使ってみた様子を載せておきます。 まずGlyph... 続きを読む

SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス

2014/07/30 78 users SVG オブジェクト 装飾 記述 ベクター画像

これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…！？今回はSVGのアウトライン（線）の装飾に注目！オブジェクトを徐々に描いていくラインエフェクトにも挑戦します！SVGの基本的な情報や書き方は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ SVG線種プロパティの基礎 基本的な書き方ですが、SVGのコード内に直接記述... 続きを読む

IcoMoon·pplogの中で使われているアイコンフォント（Web Font） MOONGIFT

2014/07/17 16 users MOONGIFT IcoMoon アイコ pplog.net

最近は画像でアイコンを表示する代わりにWeb Fontを使うケースが増えてきました。Font Awesomeをはじめとして、公開されているものを使うのは容易ですが、自分のために新規で作成するというのは難しい印象があります。 そんな中、参考にしてみたいのがIcoMoonです。pplog.netの中で使われているアイコンフォントになります。 IcoMoonの使い方 こちらがフォントです。かわいいアイコ... 続きを読む

SVGアイコンを実用するために知っておきたい、リンク周りの記述方法 | Webクリエイターボックス

2014/07/01 166 users SVGアイコン Webクリエイターボックス SVG 記述方法

以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼るこ... 続きを読む

GitHubで使用されているアイコンフォント「Octicons」が一般公開を開始 - GIGAZINE

2014/06/17 263 users GIGAZINE GitHub Octicons アイコン

世界中のソフトウェア開発者のための共有ウェブサービスであるGitHubは、同サイトで使用されているアイコンフォント「Octicons」を一般向けに公開を開始しました。 Octicons http://octicons.github.com/ 公開されたアイコンフォントの一覧がこちら。GitHubが使っているアイコンだけあって、開発系のWebサイトやソフトに特化したアイコンが揃っているといえます。 ... 続きを読む

GitHub、アイコンフォント「Octicons」を一般公開 - 窓の杜

2014/06/17 75 users GitHub Octicons Atom アイコン 現地時間

ニュース GitHub、アイコンフォント「Octicons」を一般公開 “GitHub”や「Atom」で利用されているアイコンを自分のWebサイトにも （2014/6/17 14:37） 「Octicons」の公開サイト 米GitHub Inc.は16日（現地時間）、アイコンフォント「Octicons」を一般公開した。現在、同社のWebサイトからダウンロード可能。 「Octicons」は、同社が運... 続きを読む

SVGやアイコンフォントが揃ってる！太っ腹なライセンスで無料利用できる高品質なアイコン素材 -Themify Icons | コリス

2014/06/03 85 users コリス SVG ベクター 商用 アイコン

再販売だけがNGで、個人でも商用でも無料で利用でき、バックリンクやクレジット表記も不要の太っ腹なライセンスで提供されているアイコン素材を紹介します。 Themify Icons ライセンスが緩いからといって、アイコンの質が落ちるわけではありません。 アイコンはベクターで、極小サイズでも巨大サイズでも美しいまま利用できます。 ダウンロードできるアイコンはSVGとアイコンフォントで利用できます。 SV... 続きを読む

全600種類以上！ビジネスからホビーまで、ソリッドなラインでデザインされた美しい無料のアイコン素材 -Linea | コリス

2014/05/30 106 users コリス ソリッド ライセ TTF SVG

ビジネスからホビーまでさまざまなアイテムが揃った、ソリッドなラインが美しいアウトラインでデザインされたアイコン素材を紹介します。 アイコンは個人でも商用でも無料で利用できます！ Linea ダウンロードできるアイコンはウェブ制作でよく使うフォーマットが揃っています。 ベクター（.svg） アイコンフォント（.eot, .ttf, .woff, .svg） ビットマップ（.png） アイコンのライセ... 続きを読む

アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス

2014/05/28 529 users SVG Illu ブラウザー ベクター画像 普及

ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 SVGってなに？ SVG（Scalable Vector Graphics）はIllu... 続きを読む

手描きのさまざまなアイコンフォントやUIをダウンロードできる「Hand Drawn Goods」 | DesignDevelop

2014/05/14 44 users テイスト DesignDevelop 雰囲気 テーマ 素材

豊富にインターネット上で配布されている素材にはいろいろなテイストがあり、制作しているデザインに合わせて選ぶことができるようになっています。そんな中今回紹介するのは、手描きのさまざまなアイコンフォントやUIをダウンロードできる「Hand Drawn Goods」です。 ラフな雰囲気の手描きアイコンフォントがいろいろなテーマで用意されており、それぞれフリーで手に入れることができます。 詳しくは以下 ラ... 続きを読む

手軽にアイコンフォントを作成できる、無料オンラインジェネレーター9個まとめPhotoshopVIP |

2014/04/18 146 users ジェネレーター 配色 速度 エントリー たくさん

Webサイト制作で最近よく利用されているアイコンフォントは、配色を変更できたり、Retinaディスプレイ表示に対応したり、ページ読み込み速度が上がったりとメリットがたくさんあります。あなただけの特製アイコンフォントを作成しませんか。 海外デザインブログSmashing Appsで、オンライン上でアイコンフォントを手軽に無料で作成できるジェネレーターまとめたエントリー「Free Icon Font ... 続きを読む