Icon Search — Find Copy SVG Icons
Browse hundreds of SVG icons organized by category. Search, click to copy the SVG code, and use in your projects. 100% client-side — no data leaves your browser.
What is an SVG icon? An SVG icon is a small vector image described as XML geometry — lines,
polylines and paths inside an <svg> element — rather than as a grid of pixels. Because the shape
is stored as coordinates, it stays sharp at any size and on any display density. The icons here are 24 × 24 outline
glyphs drawn with stroke="currentColor", so each one takes the text color of whatever element you
paste it into.
How to Use the Icon Search
- Pick a category — The tabs cover 22 groups — Arrows, Business, Code, Files, Maps, Media, Weather and more. Browsing a category is often faster than searching when you do not yet know what the icon is called.
-
Search by name — Typing filters across every category at once. Matching is on the icon's own name and its category name, so
arrowreturns the whole arrow family andweatherreturns that entire tab. -
Click an icon to copy it — One click puts the complete
<svg>element on your clipboard — the wrapper plus its geometry — and a toast confirms which icon was copied. - Paste it inline — Drop the markup straight into your HTML, JSX or template. Inline SVG needs no build step, no font file and no extra network request.
-
Restyle it with CSS — Because
strokeiscurrentColor, settingcoloron a parent recolors the icon. Remove thewidthandheightattributes to size it with CSS instead.
How the Copied SVG Is Built
Every icon in the grid is stored as raw geometry — a handful of <path>,
<line>, <circle>, <rect> and
<polyline> elements plotted on a 24 × 24 grid. When you click, that geometry is wrapped in a
standard <svg> element with a fixed set of presentation attributes and written to the clipboard
through the browser's asynchronous Clipboard API. Nothing is fetched and nothing is generated on a server; the
entire library ships with the page.
The wrapper is deliberately uniform, which is what makes a mixed set of icons look like one family:
| Attribute | Value | What happens if you change it |
|---|---|---|
viewBox | 0 0 24 24 | The internal coordinate system. Leave it alone — the geometry is drawn against it. |
width / height | 24 | The rendered size. Delete both and control the size from CSS instead. |
fill | none | Keeps the icon an outline. Set it to currentColor for a solid silhouette. |
stroke | currentColor | Makes the icon inherit the CSS color property. A literal hex here breaks theming. |
stroke-width | 2 | Line weight. Try 1.5 for icons under 20px and 2.5 for large hero icons. |
stroke-linecap | round | Shape of open line ends. butt or square gives a more technical feel. |
stroke-linejoin | round | Shape of corners where two segments meet. |
This is the 24-pixel, 2px-stroke, round-capped convention shared by most modern outline icon sets — Feather, Lucide
and Tabler all use it — which is why icons drawn to it mix cleanly and why substituting one for another rarely
disturbs a layout. Keeping stroke-width at a constant 2 across a screen matters more than the icons
coming from any one library: mismatched stroke weights are the single most visible way an icon set falls apart.
Search Matches Names, Not Meanings
The filter is a plain substring test against the icon's name and its category, run over all 22 categories at once.
That makes it fast and predictable, but it has no synonym list: searching delete returns nothing
because the icon is called trash, and settings will not surface sliders. When
a search comes up empty, drop back to the category tab — Status, Objects and Tools between them hold most of the
icons whose names are hard to guess.
The 22 Categories
| Group | Categories |
|---|---|
| Navigation and state | Arrows, Signs, Status, Shapes |
| Interface and content | Business, Code, Files, Images, Media, Objects, Tools |
| People and contact | Communication, Social, Hands, Gender, Health |
| World | Maps, Transport, Weather, Time, Food, Design |
Using Inline SVG Well
Inline SVG is the default choice for interface icons for three reasons: there is no extra request, the shapes
inherit CSS so a single color change retints them, and individual elements inside the icon can be
animated or targeted. The cost is markup weight. If the same icon appears fifty times on a page, define it once in
a hidden <symbol> and reference it with <use> rather than repeating the paths,
or extract it into a component in your framework.
Accessibility is the part most often skipped. An icon that sits beside a text label is decoration, and it should
carry aria-hidden="true" so screen readers do not announce it twice. An icon that is the
control — a bare close button, a lone search button — needs a name: either
aria-label="Close" on the button, or role="img" plus a
<title> as the first child of the SVG. Getting this wrong produces either a stream of
meaningless announcements or a button that reads as "button" and nothing else.
Two smaller details pay off. Icon buttons need a hit area of at least 24 × 24 CSS pixels — the size the WCAG 2.2 target-size criterion asks for — which usually means padding around a 16px or 20px glyph rather than a bigger glyph. And meaning should never rest on the icon alone: pair a warning triangle with the word "Warning", because an unlabeled symbol is guesswork for anyone outside the convention it came from.
- Vector geometry on a 24 × 24 grid — sharp at any size, no raster assets.
stroke="currentColor"is what makes CSS theming work.- Keep one stroke weight across a screen; mismatched weights read as sloppy.
- Decorative icons get
aria-hidden; meaningful ones get a name. - Repeat-heavy pages should use
<symbol>and<use>.
Frequently Asked Questions
An SVG icon is vector geometry — lines, arcs and paths described by coordinates — rather than a grid of pixels. It renders sharply at any size and on any screen density from one definition, where a PNG needs a separate export per size. Because SVG is markup, its shapes also respond to CSS: you can recolor, resize, rotate and animate an icon without touching an image file.
Click any tile in the grid. The complete <svg> element, including its geometry and presentation attributes, goes to your clipboard and a toast confirms which one you took. Paste it directly into HTML, a JSX component, a Vue or Svelte template, or any editor. There is no import, package or build step involved.
Color comes free: the icons use stroke="currentColor", so setting the CSS color property on the SVG or any ancestor recolors them, and they follow theme switches automatically. For size, either edit the width and height attributes, or delete both and apply width: 1.25rem; height: 1.25rem in CSS — sizing in em makes an icon scale with the text beside it.
The filter matches literal text in the icon name and category name only — there is no synonym or tag index. delete finds nothing because the icon is named trash, and settings will not reach sliders. Try a shorter fragment such as arrow or file, or clear the box and browse the category tab instead.
Copying uses the browser's asynchronous Clipboard API, which only works in a secure context. Over plain HTTP, or inside a sandboxed iframe without clipboard permission, the write is rejected and no error is shown. Loading the page over HTTPS resolves it. Some Linux desktops also clear the clipboard when the source tab closes, so paste before navigating away.
They are provided for free use in personal and commercial work, and the geometry is simple enough to modify however you like. If your project needs a formal license record for an audit, standardize on an upstream set that ships an explicit license file — Feather, Lucide and Tabler are all MIT-licensed and use this same 24-pixel outline convention — rather than relying on copied markup.
Inline SVG for interface icons: no extra request, CSS inheritance, and individual parts can be styled or animated. An <img> tag for large decorative illustrations you do not need to restyle, since the browser caches the file and keeps your HTML small. Icon fonts are largely obsolete — they misalign against the text baseline, fail as blank boxes when the font does not load, and are announced as stray characters by some screen readers.
It depends on whether the icon carries meaning. Next to a visible text label it is decorative, so add aria-hidden="true" and let the label do the work. Standing alone as a control, it needs a name — put aria-label on the button, or add role="img" to the SVG with a <title> as its first child. Also give icon-only buttons a target of at least 24 by 24 CSS pixels, and never let color or symbol be the only signal of state.
No. The whole icon library is embedded in the page's JavaScript, the search filters an in-memory list, and the copy goes straight to your system clipboard. Nothing is requested from a server while you use the tool and nothing you type is transmitted or logged.
Use Cases
Adding One Icon Without a Dependency
A landing page needs a single chevron. Copy the markup instead of installing an icon package and shipping a whole library for one glyph.
Filling Gaps in a Wireframe
Paste real vector glyphs into a mockup so a prototype reads as a product rather than a set of grey boxes, before any icon set is chosen.
Marking Up Docs and READMEs
Inline SVG renders in GitHub-flavored Markdown and most docs sites, so a check or warning glyph works without hosting an image anywhere.
Building an Email or HTML Template
Copy the geometry as a starting point for a template where an external icon request would be blocked or stripped by the client.
Finding What an Icon Is Called
Browse the category tabs to learn the conventional name for a shape, then search for it confidently in whatever icon library your project already uses.