SVG Icon Search
Search Lucide & Heroicons—click to copy SVG, React, or Vue code.
Customize size, color, and stroke width.
🔒All operations run entirely in your browser.
About
SVG Icon Search lets you search through the Lucide icon set and copy SVG code with one click. Customize size, color, and stroke width, and generate ready-to-use React or Vue component code. Everything runs in your browser with no network requests.
How to Use
Search by Name
Type a keyword (arrow, home, etc.) to filter icons.
Select & Customize
Click an icon, then adjust size, color, and stroke width.
Copy Code
Copy SVG, React, or Vue code directly into your project.
Glossary
- SVG (Scalable Vector Graphics)
- An XML-based vector image format that scales without quality loss, ideal for web.
- Lucide
- An open-source SVG icon set with 1500+ icons. Licensed under ISC.
- Heroicons
- SVG icons by the Tailwind CSS team. Licensed under MIT.
- viewBox
- SVG attribute defining the coordinate system, ensuring proper scaling.
- stroke-width
- Controls the thickness of icon stroke lines.
- currentColor
- An SVG keyword that inherits the CSS color value for stroke/fill.
FAQ
- Q.Sous quelle licence sont les icônes ?
- Lucide est sous licence ISC, Heroicons est sous licence MIT. Les deux sont gratuits pour un usage commercial.
- Q.Les données sont-elles envoyées à un navigateur ?
- Non. Toutes les opérations s’exécutent dans votre navigateur.
Cas d'utilisation
Web Design
Find perfect icons for UI projects.
React Projects
Copy component imports instantly.
Design Mockups
Preview icons before adding to Figma.
Library Comparison
Compare Lucide vs Heroicons side by side.