SVG Icon Studio
UI ToolsBrowse 160,000+ free SVG icons from Lucide, Tabler, Heroicons, Bootstrap, Phosphor, Feather, Ionicons & 65 more packs. Recolour, reshape and export any icon as SVG — or build your own from scratch. 100% browser-based, no sign-up.
About SVG Icon Studio
SVG Icon Studio is a free, browser-based icon toolkit combining a 160,000+ icon library with a full visual editor. Browse and search across 73 packs — including Lucide, Tabler, Heroicons, Bootstrap, Phosphor, Feather, Ionicons, IconPark, Devicons and Fluent Emoji — then open any icon in the editor to recolour it, reshape individual paths, add or remove shapes, and export the final SVG at any size. You can also import your own SVG from Figma, Illustrator, or anywhere else and edit it directly, or start from a blank canvas and build an icon from scratch using rectangles, circles, polygons, paths, freehand drawing and text. Everything runs in your browser — no uploads, no account required.
Features
- ✓Browse 160,000+ SVG icons across 73 packs (Lucide, Tabler, Heroicons, Bootstrap, Phosphor, Feather, Ionicons, IconPark, Material Symbols, Remix Icons, Devicons, Fluent Emoji and more)
- ✓Full-text icon search with pack filters, category quick-filters and variant grouping
- ✓11 colour presets — apply Default, Black, Slate, Blue, Indigo, Violet, Red, Orange, Amber, Green or Teal to any outline icon instantly
- ✓Visual canvas editor: drag, resize, rotate and flip shapes on a 24×24 SVG canvas
- ✓20 built-in shape primitives (rect, circle, ellipse, line, triangle, star, diamond, pentagon, hexagon, octagon, arrow, cross, heart, shield, cloud, chat, chevron and more)
- ✓Freehand path drawing and custom SVG path/markup paste
- ✓Per-shape property inspector: fill, stroke, stroke width, opacity, corner radius, font size
- ✓6-direction canvas alignment (left, centre, right, top, middle, bottom)
- ✓Import any SVG by file upload or paste — including icons from Figma, Heroicons or Iconify
- ✓Variants tab: instantly swap between outline, filled, or pack-specific variants of the same icon
- ✓Export clean SVG at any resolution with automatic license attribution comment
- ✓Full undo/redo history and keyboard shortcuts (Ctrl+Z, Ctrl+Y, Ctrl+A, Delete)
Common Use Cases
- Find the perfect icon from 160k+ options and download it as SVG in one click
- Recolour a Lucide or Tabler icon to match your design system token without opening Figma
- Import an SVG exported from Figma or Illustrator and clean up or combine its shapes
- Add a background shape or text label to an icon and export the combined SVG
- Build a simple custom icon from scratch using the shape library and freehand tool
- Compare outline vs filled variants of the same icon side by side across multiple packs
Frequently Asked Questions
QWhich icon packs are included?
73 packs are available, including Lucide, Tabler, Tabler Filled, Heroicons, Heroicons Solid, Bootstrap, Phosphor, Feather, Ionicons, Flat Color, IconPark Outline & Filled, Devicons, Fluent Emoji, plus around 30 Iconify packs (Material Symbols, MDI, Mingcute, Carbon, Remix Icons, Simple Icons, akar-icons, Teenyicons and more). All icons are MIT or Apache 2.0 licensed.
QCan I edit the individual shapes of an icon visually?
Yes. Click any icon in the library and choose Edit to open it on the canvas. You can then select, drag, resize, rotate, flip and recolour each shape individually. You can also add new shapes or draw freehand paths on top.
QHow do I import my own SVG?
Use the Import view to drag and drop an .svg file or paste SVG markup directly. The editor parses the shapes out of the file so you can edit them on the canvas just like a library icon.
QAre the icons free to use in commercial projects?
All icons in the library are either MIT or Apache 2.0 licensed, which permits commercial use. When you export an edited icon the tool automatically adds the correct licence attribution comment to the SVG file. Always check the specific pack's licence page linked in the icon detail popup.
QWhat export formats are available?
You can export the edited icon as an SVG file at any logical resolution, or copy the SVG markup to the clipboard for direct use in HTML or a component library. PNG export is not currently available — SVG is the recommended format for icons.
QDoes the tool work offline?
The canvas editor and most features work fully offline once the page has loaded. The icon library requires a connection to load the icon index and fetch individual SVG files from the server.