Load up your web design toolkit with our pick of the best SVG icons.
There has been a growing transition within web design from using standard graphical and font icons to using inline SVGs instead.
The Filament Group seemed to get the ball rolling when they published an article that demonstrated how much better it is using SVG in comparison to font icons. And Chris Coyier, who has been a big proponent of icon fonts for a number of years, has said that “using inline SVG and the
<use> element to reference an icon is a superior system.” And just in case these guys haven’t convinced you that SVG icons are the way to go, you should have a read of Ian Feather’s 10 reasons for switching from an icon font to SVG, he’ll convince you.
You guys though are not here to discuss the pros and cons of SVG icons, you’re here for the resources! Don’t worry, we have plenty for you. In total we have found 25 professionally designed icon sets, that are all available in SVG format, and are all waiting for you to download and use them in your next web project. As well as SVG, the vast majority of the icon sets come packaged with a variety of formats: PSD, AI, EPS, and web fonts.
With its 223 glyphs, Open Iconic is perhaps the most complete open source SVG icon set available. It has been designed to be readable down to 8px, and with the weight of their WOFF file weighing in at only 12.4kb (a quarter of the size of Font Awesome), this is certainly a set you should consider.
The impressive Unicons have been designed with minimum detailing, straight lines and angles, in order to maintain accuracy and clarity when used at any size. Most of the icons have been designed with micro-curves, unnoticeable in small sizes, but visible in large sizes. There are 150 individual icons in the set and they come in SVG, AI, PSD, PNG and EPS formats.
Linea is a free outline-style set with a massive 730+ individual icons. You can either download this huge icon set in one go, or you can download them by category (basic, music, ecommerce, software, arrows, weather…), allowing you to choose exactly what you need. As well as in SVG format, they also come in PNG format and an icon font is also available.
The Fineline icon set consists of 300 line-styled icons, and have been designed for use on high-resolution retina displays. The set comes in both SVG and PSD formats.
Feather is a growing collection of 130 ‘beautifully simple’ icons that comes packaged in PSD, CSH, Icon Font, and of course, SVG formats.
Created by Mirko Monti, the Simple Line Icons set have been designed for web and UI design. The pack contains 100+ free icons, and comes in SVG, AI, EPS and PSD formats.
Dripicons, designed by Amit Jakhu, is a simple set of 96 free icons that can be easily modified and adapted for many uses. The set comes in SVG, AI, EPS, PSD, and icon font formats.
The beautifully crafted Stroke Icons contains over 1350 icons covering standard web icons and almost all aspects of modern web design. It comes packaged in SVG, AI and EPS file formats.
Ikons is a set of 264 vector icons created by Piotr Kwiatkowski. The icons come in SVG, AI, ESP, PSD, CSH and PNG formats.
This vector set contains a massive pixel-perfect 1,000 crisp icons. The icons come in SVG, AI, EPS, PSD, CSH, PNG and icon font formats.
Designed by Mohammad Amiri, Pixelvicon is a set of 100 free SVG icons. As well as the SVGs, this icon set also comes in PSD, AI, PNG and Icon Font formats.
This pack contains 146 circular and flat-style icons. The modern icon set comes in SVG, AI, EPS, PSD and PNG (256px – 512px) formats, and thanks to the vector files, they can be easily resized and edited.
This icon set contains over 400 icons and comes in four distinct styles: Rounded, Dark Rounded, Rounded Corners and Square. It comes packaged with fully editable AI, EPS, and PSD files, and also well organized PNG and SVG files.
Designed by Alessio Atzeni, Metrize is a free collection of 300 metro-style icons. It comes in SVG, PSD, EPS, AI and icon font formats.
Outlined Icons, designed by Dario Ferrando, is a simple free icon set with over 150 glyphs. The download package consists of PSD, AI, sliced SVGs and icon font files.
Caffeine is a set of 500+ retina-ready icons that have been designed specifically for web and mobile designers. It comes in SVG, AI and PNG formats.
Maki is a clean point of interest icon set made specifically for web cartography. It includes 110 different symbols at 3 sizes each giving a total of 330 icons. Available in both SVG or PNG formats.
The crystal clear and minimal Forma icon set comes jam-packed with 472 easy to customize glyphs. As well as the SVG files, the icons are also available in PSD, CSH, EPS, AI and PSD formats.
Orlando Merone has created a really useful SVG icon font of payment systems and methods. Perfect for your next ecommerce project.
Delicons is a collection of 900 ‘del-style’ icons. Built on a grid system, these icons will scale down to as small as 16px and as large as required. They come in SVG, AI, EPS, PSD and icon font formats.
Meteocons is a free weather icon set. The download package contains 40+ icons and comes in SVG, PSD, CSH, EPS, and icon font formats.
IconMelon is a huge open-source repository of flat SVG icons. You can select individual icons as per your requirements and create your own personalised set.
This is a pack of 1111 solid vector icons and are ideal for use in websites, mobile apps and user interfaces.
A set of essential, modern vector icons including a network, cloud, laptop, folder, house, globe, computer, drive, file, wifi, cursor, hand, arrow, and window.
Here are a few other web design articles that you may find interesting: