How many icons are included?

The library ships with 200+ icons across 10 categories, all hard-coded in the JavaScript.

Can I change the icon colour?

Yes. Use the colour picker to set any fill colour before copying or downloading.

Are these icons free to use?

All icons are simple path-based SVGs with no licence restrictions.

How do I use an icon in my project?

Click the icon to copy the SVG code, then paste it directly into your HTML or save via the download button.

SVG Icon Library

このツールについて

A fully client-side browsable library of over 200 clean, path-based SVG icons grouped into ten categories: Arrows, UI/Controls, Files, Media, Social, Business, Weather, Food, Travel, and Technology. Search by name to find the icon you need instantly. Click any icon to copy its SVG source code to the clipboard. Customise fill colour, stroke width, and preview the icon at multiple sizes (16 px, 24 px, 48 px) side by side before downloading it as a standalone SVG file. All icons use simple paths and are licensed for unrestricted use.

使い方

1 Browse by category using the category tabs or type in the search box.
2 Click an icon to select it and copy its SVG code to the clipboard.
3 Use the colour picker to change the fill colour.
4 Adjust stroke width with the slider.
5 Preview the icon at 16 px, 24 px, and 48 px in the preview panel.
6 Click 'Download SVG' to save the customised icon as a file.

Why SVG icons beat icon fonts and PNGs

An SVG icon is a small text file describing shapes with vector paths rather than a grid of pixels. That difference matters: an SVG stays razor-sharp at any size — 16 px in a toolbar or 200 px on a hero banner — without the blur a scaled-up PNG suffers, and it recolours with a single attribute change. Compared to icon fonts (which require loading an entire typeface and break accessibility), an inline SVG is self-contained, styleable with CSS, and adds nothing to your font stack. This library gives you 200+ such icons across ten categories, ready to copy as code or download as a file.

How these icons are built

Every icon here is a stroke-based outline, not a filled shape. Each one shares the same skeleton: a 24×24 coordinate system (viewBox="0 0 24 24"), fill="none", and a visible stroke with rounded caps and joins. That's the same construction style as popular open icon sets, and it's why the icons look consistent next to each other. Because they're drawn with strokes rather than fills, the colour control in this tool sets the stroke colour — the line itself — and the stroke-width slider (1 to 3, in 0.5 steps) controls how heavy those lines appear. Turning the width up gives a bolder, friendlier look; turning it down gives a thin, technical one.

The exported markup

When you copy or download an icon, the tool assembles a complete, standalone SVG element. A typical export looks like this:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>

Notice the dimensions are baked in at 24×24 with your chosen colour and stroke width. The three-size preview (16 px, 24 px, 48 px) shown beside the selected icon is for your eyes only — it demonstrates how the same path holds up at different scales, but the copied and downloaded code uses 24×24. To resize after pasting, simply change the width and height attributes, or remove them and size the icon with CSS; because it's a vector, nothing degrades.

A worked example

Say you need a search icon tinted to match your brand. Type "search" in the box, click the magnifier, and set the colour picker to #2563eb. The preview updates the stroke to blue across all three sizes. Click Copy and the full <svg> string lands on your clipboard via the browser's clipboard API — paste it directly into your HTML and it renders inline, no image request, no extra HTTP round trip. Prefer a file? Download SVG writes the same markup to search.svg as a Blob, ready to drop into a design tool or asset folder.

Common use cases

Inline UI icons in web apps where you want them to inherit text colour — replace the hard-coded stroke with stroke="currentColor" after pasting.
Buttons and navigation that need crisp icons at multiple breakpoints without exporting several PNG sizes.
Quick mockups in design tools — download the SVG and import it as an editable vector.
Email and documents where a single self-contained SVG is simpler than managing image attachments.

Tips for cleaner integration

Swap the colour to currentColor for theming. After copying, change stroke="#…" to stroke="currentColor" so the icon automatically follows your text colour, including dark mode.
Match stroke width to your typography. A 2.0 stroke pairs well with regular text; bump to 2.5–3 next to bold headings so the icon doesn't look spindly.
Strip the width/height for responsive layouts. Remove those attributes and control size with a CSS class so one icon scales to its container.
Add a title for accessibility. Insert a <title> element inside the SVG and an aria-label so screen readers announce the icon's meaning.

Common mistakes

Expecting the colour picker to fill the icon. These are outline icons — the picker colours the stroke. Setting a fill would have no visible effect because fill="none".
Assuming the preview size is exported. The 16/24/48 preview is illustrative; the copied code is always 24×24 until you edit it.
Pasting an SVG inside a <style> or attribute. Inline SVG belongs in the document body as an element, not inside a CSS rule.

Licensing and privacy

The icons are simple path-based outlines provided for unrestricted use, so you can ship them in commercial and personal projects without attribution worries. Everything — browsing, recolouring, copying, and downloading — runs entirely in your browser from a hard-coded icon set; no network request is made to fetch icons, and nothing you customise is sent anywhere.