Generator Family

Icon Gallery Generator

Search a compact SVG icon library, preview your styling choices live, then copy one icon at a time or export a reusable sprite sheet for a design system, app shell, or docs site.

  • 24 built-in line icons with searchable tags
  • Live size, stroke, color, and background controls
  • Single-icon copy or download actions
  • Bundle export for selected icons as one SVG sprite

Set your icon rules

All controls are applied client-side. Sizes are in pixels, stroke width is rounded to one decimal place, and exported symbols keep currentColor so you can recolor them later in CSS.

Matches icon names and tags such as commerce, weather, or media.

Filter the gallery before selecting icons for export.

Letters, numbers, and hyphens only. Invalid characters are removed automatically.

Allowed range: 16 to 256 pixels.

Allowed range: 1.0 to 4.0.

Corners stay rounded to preserve legibility at small sizes.

Use a 3- or 6-digit hex value such as #16202B.

Used only for the gallery preview. Downloads remain transparent.

Exported SVGs still use a transparent canvas.

0 icons selected for export.

Copy inline SVG for quick usage, or select a set of icons and generate one sprite file below.

0 visible
0 selected

Sprite export

The bundle output includes one <symbol> per selected icon. Reference each icon later with <use href="#icon-name">. If nothing is selected, export actions stay disabled and show a clear error.

Select one or more icons to generate a sprite preview.


    


    

      

        

          
How it works

          
The gallery uses inline SVG markup stored directly in the page. Inputs are sanitized, clamped to safe ranges, and re-rendered immediately so the preview and exported markup stay in sync.

        

      

      

        

          
1. Filter the library

          
Use keyword search and category filters to narrow the icon list. Search matches both icon names and tags, so broader terms still work.

        

        

          
2. Adjust presentation

          
Size, stroke width, cap style, and preview colors update every visible icon. The preview background helps review contrast without baking a fill into the exported SVG.

        

        

          
3. Export what you need

          
Copy or download any single icon, or select a set and generate one sprite sheet. Sprite IDs use your chosen prefix and are cleaned to safe lowercase names.