Table of Contents
There was a time when we used Transparent PNG Icons for our website projects. But now as all browsers upgraded themselves SVG is very useful to use. Now SVG Graphics are the best way to add icon or even use as large illustrations.
Why should we use SVG Icons instead of PNG or Jpeg or Gif Icons?
- SVG is a Vector Graphic Format . You can design anything in vector and export it as SVG, to use it on your website.
- No Size Restriction – Vector images are resolution-independent and can scale to any dimension without losing quality. Browsers just recalculate the math behind the image so there is no distortion. But you cannot resize Raster images without losing its quality because their small pixels are forced to expand beyond their original size when enlarged.
- Animated SVG – You can create animated SVG and still the file size will be far less than an animated GIF file.
- Low File Size – In comparison Jpeg, PNG, Gif image sizes are far more than a SVG file.
- SEO Friendly – SVG images are defined in XML text files, so key words and descriptions can be used and more easily recognized by search engines. With raster images, you are limited to the title or alt attribute of your file.
List of websites for Free SVG Icons
Bootstrap Icons
Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they’re built for Bootstrap, they’ll work in any project.
Icon8
You can download these icons in PNG, SVG, PDF or use them as embed. This comes with Free and Premium Plan.
Freeicons.io
As the name suggests all SVG icons on this site are free to use.
Streamline Icons
30,000 icons are free to download and use straight away as PNG files. As an extra, download a sample of 100 vector icons in three weights. They also have FREE and Premium Plans.
http://svgicons.sparkk.fr/
All icons are free to use.
Vivid.js
Ready to use Free and Open Source SVG Icons Pack JavaScript Library. Vivid.js have 90+ pixel perfect and hand crafted ready to use icons. *Request for new icons are also accepted. Vivid.js is super lightweight and minified version equals around just half size of the original SVG icons.
https://iconify.design/
Iconify combines pixel perfect rendering of SVG with ease of use of glyph fonts, while offering more choice than any glyph font or SVG framework.
You can use Font Awesome, Material Design Icons, Unicons, Dashicons and many other icon sets on same page or application using one syntax.
https://icofont.com/icons
These Icons are marched with rich categories unleashing you the best ever experience of finding your desired icons among the 2100+ icons, sorted in 30 categories.
https://fontawesome.com/
Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.
https://iconstore.co/
All icons are free.
https://feathericons.com/
You can customize all the SVG icons and use them.
https://thenounproject.com/
Over 2 Million curated icons, created by a global community
UI/UX Consultant, Photoshop, XD, SketchApp, Product Designer, Website Designer, Mobile App Designer, Expert WordPress Developer. For web/mobile design and wordpress development related projects please contact me at dibakar@themepurpose.com