Icon Search
Browse and download 200,000+ free icons from 100+ collections. Copy SVG code or download files instantly.
About Icon Search
Icons are the visual language of user interfaces. A well-chosen icon communicates faster than words, but finding the right one across dozens of icon libraries is time-consuming — especially when you need consistency across your project. Our Icon Search aggregates over 200,000 icons from 100+ open-source collections into a single, fast search interface.
The tool is powered by Iconify, which brings together all major icon sets. You can search by keyword across every collection at once, or narrow the results to one of seven popular sets — Material Icons (Google), Lucide, Heroicons (Tailwind), Phosphor, Tabler, Font Awesome or Bootstrap Icons — to keep a consistent look across your design or codebase. Each icon can be previewed at 32, 64 and 128 pixels side by side, recoloured with a picker, downloaded as an SVG file in that colour, or copied as ready-to-use SVG code. Results load 96 at a time with a "Load more" button that tells you how many are left, and the tool opens on a set of popular icons so there is something to look at before you type anything.
For developers, the detail panel shows the exact icon name in Iconify's `collection:icon-name` format (e.g., `lucide:arrow-right`), which you can use directly with Iconify's npm packages or React, Vue, and Svelte components. This eliminates the need to manually import individual icon packages for each library.
How to Use Icon Search
- 1Type a keyword in the search bar — for example "download", "arrow", "user", or "settings".
- 2Browse results from all collections, or use the collection dropdown to focus on one of the seven listed libraries, such as Lucide or Material.
- 3Click any icon to open its detail panel with size and color controls; click it again to close the panel.
- 4Choose your preferred color using the color picker in the detail panel — the previews update immediately.
- 5Click "Copy SVG" to copy the SVG code, "Copy Name" for the Iconify identifier, or "Download SVG" to save the file.
Use Cases
- →Find a consistent icon set for a UI project without browsing multiple separate websites
- →Copy SVG code directly into React, Vue, or plain HTML without external dependencies
- →Download icons in your brand color for use in Figma, presentations, or documents
- →Use the Iconify name format to integrate icons with @iconify/react or similar packages
- →Search across all icon libraries simultaneously to find the best option for a specific concept
- →Preview icons at different sizes before committing to one for a specific UI context
Tips
- ✓Filter by collection (e.g. Lucide or Heroicons) to maintain a consistent visual style throughout a project
- ✓Use the color picker to preview icons in your exact brand color before downloading
- ✓Copy the icon name (e.g. lucide:arrow-right) for use directly with Iconify libraries and frameworks
- ✓Phosphor Icons and Tabler are excellent alternatives to Material if you want a lighter, more modern look
- ✓Search for conceptual terms like "warning" or "success" to find icons that communicate status clearly
- ✓Download icons as SVG and adjust stroke-width in code to match your design system's weight
- ✓Leave the filter on "All Collections" when you are hunting for a concept — it reaches sets that are not in the dropdown
- ✓The downloaded file is named collection-icon.svg (e.g. lucide-arrow-right.svg), which keeps an assets folder self-documenting
- ✓Unlike the rest of our tools, this one queries the public Iconify API to fetch icons — nothing is uploaded from your device, but it does need a connection
Frequently Asked Questions
All icons are served via Iconify, an open-source icon framework that aggregates over 200,000 icons from 100+ collections including Material Icons, Lucide, Heroicons, Phosphor, Tabler, Font Awesome, and Bootstrap Icons.
Yes — all icons available through Iconify use open-source licenses such as MIT, Apache 2.0, or CC BY. Always check the specific license for the collection you are using, especially for commercial projects.
Click any icon to open the detail panel, then click "Copy SVG" to get the raw SVG code you can paste directly into HTML or a React component.
Yes. In the detail panel, use the color picker to preview the icon in any color and the size slider to adjust the preview. The downloaded or copied SVG will use the selected color.
Yes. Use the Collection dropdown next to the search bar to narrow results to one of seven popular sets: Material Icons, Lucide, Heroicons, Phosphor, Tabler, Font Awesome or Bootstrap Icons. Leave it on "All Collections" and your search runs across every set Iconify hosts, including the ones missing from the dropdown.
Icon search and previews are served live from the public Iconify API, so this tool needs a connection — your search term and the icons you view are requested from api.iconify.design. Nothing is uploaded from your device and no account is involved.
All icons are SVG — a vector format that scales to any resolution without losing quality. SVG files are ideal for web, app UI, and high-resolution print use.