3 ms·

Amazing! With SVG being supported on all browsers you should care about today, it obsoletes icon fonts, which require the entire icon set to be downloaded. Any

Amazing! With SVG being supported on all browsers you should care about today, it obsoletes icon fonts, which require the entire icon set to be downloaded. Anyone know of a FontAwesome-like project, ideally with a CDN, that serves SVG icons like Font Awesome has so including them in a website is easy and compact?

vogt 9y ago
As a designer I always recommend https://feathericons.com/ https://feathericons.com/ as an alternative to font awesome. All SVG, all with uniform sizing and a pretty diverse selection - not as diverse as FA, but still. Very pretty and not as widely adopted as FA.
jazoom 9y ago
I use these and inline them: https://materialdesignicons.com https://materialdesignicons.com Huge selection of images.
michaelbuckbee 9y ago
No CDN, but there's multiple repos of people taking the FontAwesome icons and converting them over to SVG. Here's the one I used: https://github.com/encharm/Font-Awesome-SVG-PNG https://github.com/encharm/Font-Awesome-SVG-PNG Also, the new "Font Awesome Pro" comes with all icons as SVG out of the box - https://fontawesome.com/ https://fontawesome.com/ Last, one annoyance (in the midst of many benefits) of using SVG instead of fonts as icons is that you can't change their color via CSS if you're including them via <code>img src='file.svg'</code> So I use BoxySVG. Boxy is to Illustrator as Acorn or Pixelmator are to Photoshop. A tightly focused editor that lets you do simple things (like edit colors) very rapidly and doesn't bog you down with a ton of extraneous features. https://boxy-svg.com/ https://boxy-svg.com/
- MayeulC 9y ago
  I am pretty sure you can change a lot of SVG properties trough CSS (use "currentColor" to change the color, for example). There was a discussion about http://slides.com/sdrasner/svg-can-do-that/ http://slides.com/sdrasner/svg-can-do-that/ some time ago, which gives some nice SVG styling examples.
  - michaelbuckbee 9y ago
    So the distinction is inlining SVGs vs referring to them like you would a png with an img src=filepath.svg|png in your HTML. It's handy to just treat them as you would images, but you lose some flexibility wrt being able to manipulate them via CSS b/c the browser now "thinks" of them like an image. This SO post has a clever workaround (with I'm sure more caveats wrt performance, etc) that will auto-inline your svgs that you need to manipulate so you can get a best of both worlds type situation going. https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color https://stackoverflow.com/questions/24933430/img-src-svg-cha...
darekkay 9y ago
Font Awesome 5 icons are available in SVG. However, it's still in beta and available only to backers via early access until it is released. https://fontawesome.com/ https://fontawesome.com/

vogt 9y ago

As a designer I always recommend https://feathericons.com/ https://feathericons.com/ as an alternative to font awesome. All SVG, all with uniform sizing and a pretty diverse selection - not as diverse as FA, but still. Very pretty and not as widely adopted as FA.

jazoom 9y ago

I use these and inline them: https://materialdesignicons.com https://materialdesignicons.com Huge selection of images.

michaelbuckbee 9y ago

No CDN, but there's multiple repos of people taking the FontAwesome icons and converting them over to SVG. Here's the one I used: https://github.com/encharm/Font-Awesome-SVG-PNG https://github.com/encharm/Font-Awesome-SVG-PNG Also, the new "Font Awesome Pro" comes with all icons as SVG out of the box - https://fontawesome.com/ https://fontawesome.com/ Last, one annoyance (in the midst of many benefits) of using SVG instead of fonts as icons is that you can't change their color via CSS if you're including them via <code>img src='file.svg'</code> So I use BoxySVG. Boxy is to Illustrator as Acorn or Pixelmator are to Photoshop. A tightly focused editor that lets you do simple things (like edit colors) very rapidly and doesn't bog you down with a ton of extraneous features. https://boxy-svg.com/ https://boxy-svg.com/

MayeulC 9y ago
I am pretty sure you can change a lot of SVG properties trough CSS (use "currentColor" to change the color, for example). There was a discussion about http://slides.com/sdrasner/svg-can-do-that/ http://slides.com/sdrasner/svg-can-do-that/ some time ago, which gives some nice SVG styling examples.
- michaelbuckbee 9y ago
  So the distinction is inlining SVGs vs referring to them like you would a png with an img src=filepath.svg|png in your HTML. It's handy to just treat them as you would images, but you lose some flexibility wrt being able to manipulate them via CSS b/c the browser now "thinks" of them like an image. This SO post has a clever workaround (with I'm sure more caveats wrt performance, etc) that will auto-inline your svgs that you need to manipulate so you can get a best of both worlds type situation going. https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color https://stackoverflow.com/questions/24933430/img-src-svg-cha...

darekkay 9y ago

Font Awesome 5 icons are available in SVG. However, it's still in beta and available only to backers via early access until it is released. https://fontawesome.com/ https://fontawesome.com/