Search over 15,000 open-source icons from Lucide, Tabler Icons and Google's Material Symbols in one place. Pick an icon, set its color, size and stroke width, then download a clean SVG or a PNG, or copy the SVG, JSX or data URI.
Last updated:
Loading icons…
Advertisement
Advertisement
How to use the Free Icon Search and Download
Search for an icon by typing a word in English, such as home, arrow or cart, or tap a popular search.
Filter by set if you want a consistent style: Lucide and Tabler are clean outline icons, Material Symbols are Google's filled, outlined, rounded and sharp styles.
Click an icon to open it in the panel and set its color, size and stroke width.
Download SVG for websites, apps and print, or Download PNG for slides, documents and chat apps.
Copy the code instead if you develop: SVG markup, a JSX component for React, or a data URI for CSS.
The three icon sets compared
Set
Style
Grid
License
Good for
Lucide
Outline, rounded line ends
24 × 24, stroke 2
ISC
Web apps, dashboards, a friendly modern look
Tabler Icons
Outline (and some filled variants)
24 × 24, stroke 2
MIT
Large interfaces that need many matching icons
Material Symbols
Filled, outlined, rounded and sharp
24 × 24
Apache 2.0
Android-style apps and Google-like interfaces
Each icon card shows a small colored dot for its set. For a consistent look, use icons from one set throughout a project, at the same stroke width.
Tips for using icons well
Size on the grid. These icons are designed on a 24-pixel grid, so they look sharpest at 24, 48 or 96 px. At 16 px, prefer simple shapes.
Keep strokes consistent. If you scale outline icons up a lot, reduce the stroke width so lines do not look heavy; if you scale them down, increase it slightly.
Add accessible labels. An icon-only button needs an aria-label. A purely decorative icon should get aria-hidden="true".
Check contrast. Icons that convey meaning should have at least a 3:1 contrast ratio against the background.
Use SVG inline for theming. Paste the SVG code into your HTML and swap the color for currentColor so the icon follows your text color, including dark mode.
Frequently asked questions
Are these icons free for commercial use?
Yes. Lucide is released under the ISC License, Tabler Icons under the MIT License and Material Symbols under the Apache License 2.0. All three allow free use in personal and commercial projects, including modification. Attribution is not required in your product, though the MIT and ISC licenses ask that the license text is kept when you redistribute the icon set itself.
Where do the icons come from?
Search results and icon shapes come from the public Iconify API, an open-source service that hosts these icon sets. Only your search word is sent to it. Recoloring, resizing and PNG conversion happen in your browser.
Should I download SVG or PNG?
Choose SVG for websites, apps, logos and print: it is a tiny vector file that stays sharp at any size and can be restyled with CSS. Choose PNG when the program you use does not accept SVG, such as some slide, chat or document apps. Pick a PNG size at least as large as it will be displayed.
How do I change the icon color?
Use the color box or type a HEX code. The color is written directly into the downloaded SVG and PNG. If you copy the SVG code and want to style it with CSS instead, replace the color value with currentColor and set the color property on the parent element.
What does the stroke width setting do?
Lucide and Tabler icons are drawn with lines (strokes) that are 2 units thick on a 24-unit grid. Lowering the value gives a lighter, thinner look and raising it gives a bolder look. Material Symbols are filled shapes, so the setting does not apply to them.
Why does my search find nothing?
Icon names and tags are in English and usually use simple nouns, such as trash instead of delete bin. Try a shorter or more general word, or switch the set filter back to All sets. If an error message appears, the icon service could not be reached; check your connection and press Try again.
Can I use the JSX code in React?
Yes. Copy JSX gives a small function component with the SVG attributes converted to camelCase (strokeWidth, strokeLinecap and so on) and props spread onto the svg element, so you can pass className, width or aria attributes.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.