🎨
svg icon search,
SVG Icon Search
Search Lucide & Heroicons—click to copy SVG, React, or Vue code.
Customize size, color, and stroke width.
🔍
Multi-Set Search
Search across Lucide and Heroicons
📋
One-Click Copy
Copy SVG/React code instantly
🎨
Customizable
Adjust size, color, and stroke width
| License: Lucide (ISC) / Heroicons (MIT)
Selected Icon
🔒All operations run entirely in your browser.
about,
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,
How to Use
STEP 1
Search by Name
Type a keyword (arrow, home, etc.) to filter icons.
STEP 2
Select & Customize
Click an icon, then adjust size, color, and stroke width.
STEP 3
Copy Code
Copy SVG, React, or Vue code directly into your project.
glossary,
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,
FAQ
- Q.What license are the icons under?
- Lucide is ISC licensed, Heroicons is MIT licensed. Both are free for commercial use.
- Q.Is data sent to a server?
- No. All operations run in your browser.
use cases,
Use Cases
🎨
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.