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 including Material Icons (Google), Lucide, Heroicons (Tailwind), Phosphor Icons, Tabler, Font Awesome, and many more. You can search by keyword across all collections simultaneously, or filter by a specific set to maintain visual consistency throughout your design or codebase. Each icon can be previewed at different sizes, downloaded as an SVG file in any color, or copied as ready-to-use SVG code.
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 filter to focus on one library like Lucide or Material.
- 3Click any icon to open its detail panel with size and color controls.
- 4Choose your preferred color using the color picker in the detail panel.
- 5Click "Copy SVG" to copy the SVG code, "Copy Name" for the Iconify identifier, or "Download" 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
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 restrict results to a specific set, such as Lucide or Heroicons.
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.