11 Awesome Resources for SVG Icons

Resources for SVG Icons

We have covered SVG before, the most sought after visualization technology in most recent years. It has been around for nearly two decades, but only now is SVG makings its long awaited debut as a desirable format for icons, logos and data visualization forms. It’s fast, it can be animated, and it’s the perfect solution for retina displays. And while we’ve yet to see any feasible SVG frameworks being brought to life, a lot of the stuff is already being built without framework support.

In the past we covered how to work with SVG patterns and where to get resources for them, then we looked at SVG styling features for text and filters, and for those who were especially keen — we put together an amazing list of SVG books to help you get started with this web technology. Last but not least, a helpful post about SVG tools that will help you ease the pain of some of the SVG processes.

And then we arrive at today’s roundup, a reasonable resource of the best sites out there that provide SVG icons! You could use React.js to create them, but we both know how big of a struggle that can end up to create just a lousy one icon. Adobe recently went in-depth about SVG animations and the best way to approach, we highly recommend that you read this post about it.

1. SmartIcons

SmartIcons

SmartIcons is the host of thousands of amazing icons that will compliment any type of project out there, the free account will give you access to over 800 unique icons, with more icons available within a premium plan. You will really enjoy the flexibility of SmartIcons and the unique control panel that allows you to tailor each icon to your own specific needs. It’s everything you’d expect from such a niche website, brilliant!

2. Glyph

Glyph

Glyph is a sister site of SmartIcons that provides a list of 800 unique SVG icons that cover a wide variety of areas within the technology and industrial fields. Easy to use, and there’s documentation available at the bottom of the site in case you’re wondering how to use these.

3. Evil Icons

Evil Icons

That’s what you get when the web is running out of names to use, you get Evil Icons. Evil Icons is a simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN. I think that any blogger and website owner out there will love these, there’s plenty of social stuff in there as well to actually go for these permanently.

4. SVG Loaders

SVG Loaders

This comes back to that article we talked about at the beginning of the post, SVG animations are going to hit it big, and this resource is the perfect example of that. If you’re in need of fast and modern loaders built with SVG, look no further than this resource to get all your inspirational juices flowing. Truly amazing work!

5. PaymentFont

PaymentFont

Are you into the eCommerce market, or otherwise associated with projects that involve clearing and processing cash through payment gateways and other similar methods? PaymentFont (A sleek webfont containing 95 icons of all main payment operators and methods) is the perfect solution for all your smooth payment font needs.

6. SVG Morpheus

SVG Morpheus

This is an interesting project that might inspire you to look at some new possibilities in your design choices. The SVG Morpheus project will allow you to morph icons from one to the other by using a little bit of JavaScript. Certainly captured my attention, and it’s possible thanks to material design.

7. Material icons

Material icons

Google is coming out strong with the material design concept, and their resources are growing by the minute. The material icons resource is a page that’s organized in categories for easy access of SVG material icons that you can load up on your projects straight away. From images to maps, anything that Google itself might use on its own projects. And definitely, if you see a particular Google icon somewhere, you’ll for sure find it on this page.

8. iconmonstr

iconmonstr

At first glance, iconmonstr might seem like a lousy resource with lack of icons, but you need to immerse yourself into the search function to unfold the full potential of this site. I was able to find countless icons that I would otherwise find elsewhere. You get multiple sizes for each icon, and you can choose to download in either PNG or SVG format. Definitely worth bookmarking!

9. SVG Icons

SVG Icons

You will love these if you’re a LESS user, as they’re precompiled already. These icon sets range from everything such as social to media, from weather to payments, from interesting to boring and beyond. It’s hard to explain them without taking a look for yourself, isn’t it.

10. Fontastic

Fontastic

Fontastic lets you save the new font under a custom name, lets you define class-prefixes and change the unicodes. Just like Fontello, Fontastic is not able to provide you with PNG, PSD, whatsoever. IcoMoon is your only alternative, if you need these assets.

What sets Fontastic apart from the other two is the possibility of placing icons via data-attributes. Data-attributes see wide-spread use in HTML5-based designs nowadays. In this case they are an alternative to controlling the pictograms using CSS classes.

As narrated by Noupe…

11. Animated SVG Icons With Pure CSS

Animated SVG Icons

The last resource (for now) on our list is another amazing icon archive that’s modern, flat and appealing to the eyes of modern applications. There are tons of icons to choose from, including social stuff that you’ll find pleasantly refreshing.

The Best Resources for SVG Icons

That’s right, you won’t any better alternatives than these out there, and if you do — please be so kind to let us know about them in the comment section. It takes time to put these together, far more than it takes to write descriptions for them or put together appealing images. We’re always on the lookout for fresh content like this, so let us know.

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here