Using icons on your site allows you to effectively communicate with your visitors by increasing readability, highlighting important content, re-enforcing functionality or features, and enhancing the design. We have compiled a great list resources where you can download free and premium icon packs to use in your existing and future projects.
Many of the resources listed offer SVG format icon packs. These vector files will provide you with endless flexibility and their small file size will help in reducing your website load times. SVG icons will look sharp on retina and high density displays and eliminate the need to duplicate the same icon files to support different density displays. SVG files can also be modified with CSS to change properties like colour and size, and if you want to take things to the next level, SVGs can also be animated.
Free Ecommerce Icon Pack
We’ve partnered with one of the world’s leading icon sites, Iconfinder, to provide you with the ultimate icon pack for ecommerce. By downloading our free pack, you’ll get access to four premium ecommerce icon sets, and a total of 100 icons — everything you need for your next ecommerce design.
Download the icon packIcons8
Icons8 guarantees that you can find all of the icons you’ll ever need on their site. If there’s an icon you need and you can’t find it, Icons8 will make it for you for free. All of Icons8’s icons follow iOS, Android, and Windows icon guidelines, ensuring that your icons will match the operating system’s native icons.
Why it’s good:
- A large collection of icons: 16,200
- SVG, PNG, and HTML formats
- Icons available in different styles, such as line icon, filled icon, and full colour
- Mac, Web, and Windows App
- All icons can be downloaded via zip file
- Linkshare license with premium options
The Noun Project
The Noun Project’s vast collection of icons are created by designers from all over the world. This creative community has led to a great set of diverse icon packs ranging from Wildlife to Tattoo Packs. If you’re looking for a unique icon for your project, make this your first stop.
Why it’s good:
- Over 150,000 icons
- SVG, PNG formats
- Great search and discovery tools
- CC Creative License with premium options
FlatIcon
FlatIcon offers over 90,000 vector icons for you to download for your next design project. Their free Adobe Extension allows you to easily import icons inside Photoshop, Illustrator, and After Effects, so you will always have a great collection of icons at your fingertips. If you’d like to use a web font instead of static files for your icons, FlatIcon will take care of the format conversion and generate a web font ready to use. Furthermore, you can download the icon packs directly to your system so you can have access to them when you’re offline.
Why it’s good:
- Over 90,000 icons
- SVG, EPS, PSD, and PNG formats
- Icon Fonts
- Adobe Extension for CC suite
- Linkshare license with premium options
SVG Icons
This is a simple and elegant set of icon packs curated by the Dribbble design community. The SVG icons are ready for your web project. Just copy and paste the HTML code provided for the icon you would like to use, and that’s it!
Why it’s good:
- HTML and CSS provided for quick implementation
- SVG, HTML formats
- Curated icon sets from Dribbble
- Free
You might also like: [Free Icon Pack] How to Use Icons to Enhance Your Ecommerce Website
Swifticons
If you’re looking to add some character to your project with a unique set of icon packs, then Swifticons is your resource. This icon pack is organized into 17 categories and each icon comes in three different styles: outlined, filled, and coloured. There is also a free sample pack available, which will help you decide if this premium resource is right for you.
Why it’s good:
- 1624 high quality premium icons
- Unique style and aesthetic
- 17 wide categories
- Outlines, filled, and colored variations
- SVG, EPS formats
- $98 (Free sample available)
Iconmonstr
Iconmonstr has a great search and discovery tool that features a large display of the icons so you can see each intricate detail. You can click shuffle to get a random set of icons, or you can click the heart tab to browse the most popular icons. There’s also some icon swag you can buy to support this free service, which doesn’t require attribution in your designs.
Why it’s good:
- Great categories with easy to navigate filters
- SVG, PNG formats
- Free - No attribution necessary
Streamline
This is one of the few icon packs which is optimized for Sketch, making it easy to manipulate stroke widths and colours. Sketch features included in Sketch such as symbols and shared styles makes reusing elements, like icons, a quick and easy process.
Why it’s good:
- 4000 vector icons organized in 97 categories
- Smart Strokes to modify outline thickness
- Sketch, AI, EPS, PDF, PNG, SVG formats
- $67 (Free sample available)
Glyph
Create an icon sprite or just copy the icon SVGs you need for your project and Glyph will generate a semantic and versatile SVG icon set which you can use in an IMG tag and style with CSS. The icons are recommended to be used on a 16x16 grid, but can be set to any width or height.
Why it’s good:
- Icon Font and SVG
- Semantic and versatile SVG for easy customization
- Free - attribution required
SmartIcons
With SmartIcons Mac App, you can drag and drop icons into your designs and they will work with virtually any design program, including Sketch. Smarticons also syncs with Dropbox to make it easy to search, organize, and sync your icon packs.
Why it’s good:
- 2600 icons, 100 new icons released every month
- Web and Mac App
- Free with premium options
Freebiebug
With new icon packs submitted to Freebiebug on a weekly basis, you can find a variety of different icon pack styles to fit your design concept. From flat icon styles to line icon styles, there’s something here for everyone. It’s also a great resource to find themed icon packs for seasonal occasions like Christmas and Halloween.
Why it’s good:
- Great Selection of icon sets
- SVG, PSD, AI, Sketch formats available
- Free
Font Awesome
The popular web framework Bootstrap uses Font Awesome to easily and quickly add icons to your web projects. You can browse Font Awesome to discover individual icons or packs that can be easily integrated into your design. Font Awesome can also be delivered through a CDN, which boosts performance, saves bandwidth, and reduces your hosting costs for your site.
Why it’s good:
- 585 Icons
- Vector Font
- Every icon comes with a CSS Class & Unicode
- Free
Bonus Icon Pack Resource: 40 Free eCommerce Icons
These free icons will come in handy when you’re building your next Shopify store for your clients. By modifying stroke width and colour, you can customize the icons to match your client’s brand.
Why it’s good:
- AI, EPS, PDF formats
- Great variety of eCommerce icons for your Shopify Store
- Free
We hope you liked this list of icon pack resources. Use the comment section below to let us know what you think or to share even more great resources!
Read more
- How to Write a Freelance Contract 101
- Introducing Online Store 2.0: What it Means For Developers
- How to Customize Content by Country with Shopify
- The 21 Best Atom Packages for Front End Developers
- The 25 Best Sublime Text Plugins for Front End Developers
- Creating Dynamic Color Schemes with Theme Options and Presets
- Tips for Using Snippets in Your Shopify Theme Work
- Building a Clickable Call-to-Action Button for Your Shopify Theme
- Top Ecommerce Web Design Trends for March
- Top Ecommerce Resources for July
You might also like: How to Upload and Animate SVG Icons in 3 Simple Steps
