How to use the SVG Icon Finder
- Type what you need — home, arrow right, shopping cart — and pick a set, or search all of them.
- Click an icon to open it. Set the size, keep currentColor so it follows your text color, or choose a custom color; adjust the stroke for outline icons.
- Copy it as SVG, JSX for React, a data URI, a CSS mask, or paste it into Webflow — or download SVG or PNG.
- Click ☆ Save to keep icons you use often; they appear under ★ Saved next time.
Free icons you can actually use
Every icon here comes from an open-source set with a permissive license, so you can use it in personal and commercial websites and apps. The license and author are shown with each icon:
| Set | License | Style |
|---|---|---|
| Lucide | ISC | Outline, 24 px grid |
| Tabler Icons | MIT | Outline and filled |
| Heroicons | MIT | Outline, solid, mini |
| Phosphor | MIT | Six weights |
| Bootstrap Icons | MIT | Filled and outline |
| Feather, Iconoir | MIT | Outline |
| Fluent UI System Icons | MIT | Microsoft style |
| Material Symbols, Material Design Icons, Carbon | Apache 2.0 | Google, Pictogrammers and IBM styles |
MIT, ISC and Apache 2.0 licenses ask you to keep the copyright and license notice when you redistribute the icon files themselves (for example in an icon package). Using icons inside a website or app is the everyday case these licenses are written for.
Why currentColor matters
An icon whose fill or stroke is currentColor takes the CSS color of its parent, so the same SVG turns white on a dark button, blue in a link and gray when disabled — without editing the file. Keep currentColor for icons in UI text and buttons; choose a fixed color for illustrations and favicons.
Which format to copy
- SVG — paste straight into HTML, a Webflow Embed or an
.svgfile. - JSX — React-ready attributes (
strokeWidth,className) to drop into a component. - Data URI — for
<img src>or a CSSbackground-imagewithout a separate file. - CSS mask — an icon that inherits
currentColorfrom CSS, useful in pseudo-elements. - Copy to Webflow — pastes a Code Embed with the SVG into the Webflow Designer.
Optimize your own SVGs with the SVG Optimizer or turn one into a favicon with the Favicon Generator.
Also searched as: svg icons, free svg icons, icon finder, svg icon search, open source icons, lucide icons, heroicons, tabler icons.
Popular icons
Free SVG icon collections for the most common interface symbols:
- Home icons
- Search icons
- User icons
- Menu icons
- Arrow icons
- Check icons
- Close icons
- Shopping Cart icons
- Heart icons
- Star icons
- Mail icons
- Phone icons
- Calendar icons
- Settings icons
- Download icons
- Upload icons
- Trash icons
- Edit icons
- Share icons
- Lock icons
- Bell icons
- Play icons
- Image icons
- Location icons
- Clock icons
- Globe icons
- Chat icons
- File icons
- Folder icons
- Cloud icons
- Camera icons
- Video icons
- Music icons
- Wi-Fi icons
- Moon and Dark Mode icons
- Plus icons
- Info icons
- Warning icons
- Eye icons
- Link icons
- Filter icons
- Money icons
- Credit Card icons
- Chart icons
- Bookmark icons
- Tag icons
Tools that pair well with the SVG Icon Finder
- SVG to PNG Converter — Render SVG vector graphics as crisp PNG images at exactly the size you need — for app stores, social media, email or documents.
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- Barcode Generator — Make scannable barcodes for products, inventory, shipping and libraries — check digits are calculated for you, and you can download a sharp SVG for print or a PNG for documents.
- QR Code Scanner — Point your camera at a QR code, or drop an image or screenshot that contains one.