What is an SVG Image and Icon?

SVG (Scalable Vector Graphics) icons are graphic images defined in XML format. They are scalable without losing quality, which makes them essential for web and app design.

They can be zoomed in or out to fit any screen size or resolution without becoming pixelated, ensuring a seamless user experience across different devices.

SVG icons are crucial in boosting productivity in web and app design. Due to their scalable nature, they eliminate the need to create multiple versions of the same icon to fit different screen sizes.

They can also be styled and manipulated using CSS and JavaScript, providing more flexibility for designers.

Why using Open-source SVG Icons

Open-source licensed SVG icons provide a valuable resource for designers and developers. They offer a vast array of pre-designed graphics that can be used freely, saving time and effort in creating icons from scratch.

In this list, we collected the best open-source free SVG icon sets to use in your web app, android app, iOS app, Flutter app, and even in existing web publishing projects.

1. Iconoir

Iconoir is a popular free and open-source SVG icon library. It can be used directly in React, Flutter, Figma, Framer, and React Native.

Pros

  • 1566 Icons
  • Supports many JavaScript frameworks
  • Download individual icons as SVG
  • Copy SVG icon directly
  • Icons are classified in groups
  • Ideal for mobile apps and web apps
  • Designed on 24x24

License

  • MIT License
Iconoir | Free Icons
Iconoir is the biggest open source icon library that provides a massive selection of high-quality icons, available for free download. No premium options or email sign-up required, free for real. Icons available in SVG, Font, React, React Nativ, and Flutter libraries, Figma and Framer.
Iconoir

2. Feather

Feather is an open-source collection of icons designed on a 24x24 grid, emphasizing simplicity, consistency, and flexibility. It is ready to use for JavaScript projects that include Meteor, React, ReactNative, Vue, and Angular.

Pros

  • Web app to search and filter icons.
  • Download individual icons.
  • Customize icon size, stroke width, and colors.
  • Test icons on Dark and light themes.

Cons

  • Limited number of icons
Feather – Simply beautiful open source icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
GitHub - feathericons/feather: Simply beautiful open-source icons
Simply beautiful open-source icons. Contribute to feathericons/feather development by creating an account on GitHub.
GitHubfeathericons

3. Heroicons

Heroicons, a hand-crafted SVG icon set from the creators of Tailwind CSS, offers unmatched beauty and functionality.

It's available as basic SVG icons and through first-party React and Vue libraries, making it suitable for any project. The set includes 288 icons.

Pros

  • Beautiful Icons
  • Ready to use for React, React Native, and Vue libraries
  • Icons are available as outline, solid, mini and micro icons
  • Supports Figma with a rich Figma file.
  • Download and copy individual icons
  • Download icons as JSX code
  • Icons in 24x24 and 16x16 formats

Cons

  • Only 288 icons available
Heroicons
Heroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required. Icons by @steveschoger. Website by @username_ZAYDEK.

4. CSS.gg

With over 700 UI icons in multiple formats and an impressive 6000+ glyphs, css.gg is your go-to resource. It even includes PNG versions in both white and black. These resources are conveniently available for immediate copy-pasting and through the Raycast extension.

If you are interested in installing a Glyphs collection, the developers created another set that contains 6000+ glyphs.

Pros

  • Available in CSS, SVG, TSX, JSON, and XML format
  • Figma file available
  • 700+ icons
  • Easy CSS import
  • Supports SVG animation
  • React library
  • Can run directly from the CDN.
700+ CSS Icons, Customizable, Retina Ready & API
Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma and Adobe XD. Easy integration: Embed, NPM & API
css.gg
GitHub - astrit/css.gg: 700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs
700+ Pure CSS, SVG, PNG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API and 6000 glyphs - astrit/css.gg
GitHubastrit

5. Lucide

Lucide confidently stands as a community-run fork of Feather Icons, born out of a necessity for better project moderation. With Feather Icons left behind, Lucide takes the reins to not only expand the icon set but also uphold the original simplistic design that users have grown to love.

Lucide is boasting more icons than Feather, Lucide also proudly provides official libraries and integrations with popular frameworks and design tools.

Pros

  • More icons than feather, 1435+ icons.
  • SVG is easily scalable
  • Clean icon set
  • Highly customizable
  • Customize color, stroke width, and size.

Supported platforms and systems

  • Web (JavaScript), CDN
  • React
  • React Native
  • Vue 2
  • Vue 3
  • Angular
  • Preact
  • Figma
  • Laravel
  • Svelte
  • Solid
  • Hyva
  • Eleventy
Lucide Icons
Beautiful & consistent icon toolkit made by the community.
Lucide
GitHub - lucide-icons/lucide: Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons. - lucide-icons/lucide
GitHublucide-icons

6. CoreUI icons

CoreUI Icons is an open-source icon set offering over 1500 beautifully crafted symbols in SVG, PNG, and Webfonts formats, suitable for common actions and items in web or mobile apps.

Pros

  • Supports CDN
  • Available as NPM package
  • Supports SVG sprites and symbols
  • Official support for React, Vue and Angular.

Cons

  • Free license and commercial license
GitHub - coreui/coreui-icons: CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats
CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats - coreui/coreui-icons
GitHubcoreui

7. Unicons

Unicons offers over 1000 pixel-perfect vector icons and Iconfont for your next project, designed by IconScout. They can be easily used on your website by inserting the provided CSS.

Pros

  • Official support for Reactjs, Vue and React Native.
  • Flutter official package
  • Solid style support
  • CSS import
  • Easy to remember CSS classes
  • CDN support
  • Flexible license to use in personal and commercial projects
  • SOLID, LINEAR style is available
  • Web Font and Iconfont ready.
GitHub - Iconscout/unicons: 1000+ Pixel-perfect vector icons and Iconfont for your next project.
1000+ Pixel-perfect vector icons and Iconfont for your next project. - Iconscout/unicons
GitHubIconscout

8. Simple Icons

Simple Icons confidently offers a free, open-source icon set boasting over 3000 SVG icons for popular brands. All of them can be conveniently viewed on one page at SimpleIcons.org.

Pros

  • Can easily included as a whole pack or as an individual SVG icon in CDN
  • JavaScript and TypeScript support
  • PHP and Laravel support
  • Web app to choose and download individual icons
  • Download as SVG or PDF icons

Extensions

  • Flutter
  • Angular module
  • Blender Add-on
  • Drupal module
  • Framer component
  • Hexo plugin
  • Java
  • Laravel
  • React
  • Ruby gem
  • WordPress plugin
  • Vue and Vue3 package
  • Python package
  • Svelte package
GitHub - simple-icons/simple-icons: SVG icons for popular brands
SVG icons for popular brands. Contribute to simple-icons/simple-icons development by creating an account on GitHub.
GitHubsimple-icons

9. Tabler

Use over 5200 MIT-licensed SVG icons, available for free for your web projects. Install them easily via npm or directly download from GitHub. These well-built SVG icons can be used as an image, a background-image, or inline in your HTML code.

Pros

  • Available as PNG, SVG, EPS, and font icons.
  • Web app to search and filter icons
  • Download solo icons or get the icon code
  • Download icons in SVG, PNG or copy SVG

Available packages

  • Figma
  • React
  • React Native
  • Svelte
  • Vue and Vue 3
  • Solid.js
GitHub - tabler/tabler-icons: A set of over 5200 free MIT-licensed high-quality SVG icons for you to use in your web projects.
A set of over 5200 free MIT-licensed high-quality SVG icons for you to use in your web projects. - tabler/tabler-icons
GitHubtabler

10- Super Tiny Icons

Super Tiny Icons are minuscule SVG versions of popular logos, each under 1KB in size. With a 512x512 viewbox, they can fit in a circle with a radius of 256 and can be scaled to suit various needs.

GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos - edent/SuperTinyIcons
GitHubedent

11. Boxicons

Boxicons is an open source iconset with over 1500 carefully designed icons to enhance web and app experiences. The latest version, Boxicons v2.1.3, fixes errors with some SVGs and adds 34 new icons.

Pros

  • Dozens of icons
  • Ready for JS projects
  • 150+ logos available

Install and use

$ npm install boxicons --save

Import in your JS project

import 'boxicons';

The library supports custom elements and allows dozens of customization and animation.

<box-icon
    type = "regular|solid|logo"
    name="adjust|alarms|etc...."
    color="blue|red|etc..."
    size="xs|sm|md|lg|cssSize"
    rotate="90|180|270"
    flip="horizontal|vertical"
    border="square|circle"
    animation="spin|tada|etc..."
    pull = "left|right"
></box-icon>
GitHub - atisawd/boxicons: High Quality web friendly icons
High Quality web friendly icons. Contribute to atisawd/boxicons development by creating an account on GitHub.
GitHubatisawd

12. Svg Icon

This project collects dozens of library to add them directly in any JS projects. We recommend it in big projects only.

svg-icon
svg-icon: An ultimate SVG icons collection DONE RIGHT.

13. Circle Flags

The library presents a collection of over 400 minimal circular SVG flags representing different countries, states, and languages.

How to use?

https://hatscripts.github.io/circle-flags/flags/xx.svg

(Where xx is the ISO 3166-1 alpha-2 code of a country).

For example, the following code:

<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/cn.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/gb.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/id.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/in.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ng.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ru.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">

to produces this:

GitHub - HatScripts/circle-flags: A collection of 400+ minimal circular SVG country, state and language flags
A collection of 400+ minimal circular SVG country, state and language flags - HatScripts/circle-flags
GitHubHatScripts