DEV Community

Cover image for How to get free SVG Icons for your projects?
Amr Elmohamady
Amr Elmohamady

Posted on • Edited on • Originally published at amrelmohamady.hashnode.dev

Free SVG Icons How to get free SVG Icons for your projects?

We always find problems searching for Icons that we can use in our projects such as desktop, mobile or web Apps.

From the biggest problems that there's a lot of resources we can get Icons from, so this causes a problem for all of us as these Icons are not all similar so to solve this problem I always advise that when you download Icons for your project download them from the same place.

In this article, I will give some resources for thousands of Icons to use whether you are a designer or a developer.


material design icons

Material Design Icons

Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. This is what I prefer the most as you can download the icon after giving it the size and color you want and if you are a developer you can there package or you can use the cdn.


nucleo

Nucleo

You can download their Desktop App for MacOs and windows.

You can use more than 30231 free Icons and there are also unfree Icons that you can't use so if you want to use those free Icons you have to pay one time then you will be able to download all the paid icons .


feather icons

Feather Icons

You can download all of its Icons by one click and they will be distributed in structured folders and you can choose the color and the size of each icon before downloading it.
If you are a designer and you design on figma, they have a figma extension so you can directly download the icons into your project.


icons8

Icons8

This website has a lot of services but we'll stick to the icons, they have about 139,430 icons you can download the icon as PNG or SVG.


heroicons

Heroicons

Heroicons is a set of free SVG icons by the makers of Tailwind CSS that come in two different sizes, and are pre-optimized to be styled with CSS classes directly in your HTML. I would recommend using it in simple projects.


Subscribe to my newsletter

Twitter: @Amr__Elmohamady

Top comments (8)

Collapse
 
shrihankp profile image
Shrihan • Edited

Heroicons is a great place to find the simplest collection of icons. I would recommend it if you want just simple icons for your app quickly.

Btw, I am a huge fan of Material Icons and Material Design Icons. (Yes they are different)

Collapse
 
amrelmohamady profile image
Amr Elmohamady

Thanks, I will edit it and add Heroicons.

Collapse
 
winstonpuckett profile image
Winston Puckett • Edited

I have used bootstrap icons for most projects (icons.getbootstrap.com/). It's amazing.

Collapse
 
shrihankp profile image
Shrihan

I agree šŸ‘
Bootstrap Icons pair nicely with the actual Bootstrap framework. They look so good!

Collapse
 
winstonpuckett profile image
Winston Puckett

Ironically, I've never used bootstrap... I probably should at some point haha

Thread Thread
 
shrihankp profile image
Shrihan

"The person who is into Web development should use Bootstrap once in their development journey."

---- Who knows, who said this šŸ˜ŽšŸ¤”šŸ˜‚

Collapse
 
thinkjrs profile image
Jason R. Stevens, CFA • Edited

If you're using React, react-icons is a lifesaver, including many of these by default!

Collapse
 
uuware profile image
uuware

Great post. Here is an open source icons collection and tool for generating partial icon font or downloading icons as an image.

GitHub logo uuware / icons-font-customization

A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.

icons-font-customization

AĀ collectionĀ ofĀ over 33,000 high-quality freeĀ svgĀ iconsĀ andĀ toolsĀ forĀ generatingĀ customizedĀ iconĀ font. All icons are completely free for personal or business requirements.
Open See all icons, to view all icons. You can change color, background color, size for icons and can search or cache selected results.
Update: Now you can download PNG, JPG, ICO and Apple ICNS image files directly from online.
šŸ”¶Desktop Application for Windows, Linux, MacOS is released, or goto Download Releases šŸ”¶

ļ¼ˆäø­ę–‡čÆ“ę˜ŽčÆ·å‚č€ƒåŽåŠéƒØ分ļ¼‰


šŸ”¶All icons collected here are completely free for your personal or business requirements.šŸ”¶
You can use thisĀ toolĀ toĀ combineĀ /Ā generateĀ yourĀ ownĀ iconĀ webfontsĀ forĀ yourĀ projectĀ fromĀ differentĀ sources.
ThisĀ relevant license informationĀ isĀ includedĀ inĀ generatedĀ cssĀ file automatically.
logo.png

Icon Collections:

  • ant-design-iconsĀ Source:Ā visit, License:Ā MIT
  • Bootstrap IconsĀ Source:Ā visit, License:Ā MIT
  • BoxIconsĀ Source:Ā visit, License:Ā CC 4.0
  • ā€¦

Some comments may only be visible to logged-in visitors. Sign in to view all comments.