Free Icon Studio, Design, Animate and Export Custom Icons in Your Browser

Icons carry an outsized share of a brand's visual personality. They appear in nav bars, feature grids, pricing tables, app stores, social cards, slide decks, and email — often more frequently than the logo itself. Most teams either pay for an icon library that everyone else also uses, or commission bespoke icons that take days to brief and weeks to deliver. Our free Icon Studio sits between those two extremes: start from 1,500+ open-source line icons, generate new ones with AI, compose from primitives, paste an editable SVG, recolour and reshape everything in your brand, and export the result in every format you actually need.

The tool has six surfaces in the left sidebar. The Library tab is a searchable grid of every Lucide icon (the same MIT-licensed library the rest of this site uses) — click any icon to drop it onto the canvas as an editable layer. The Shapes tab gives fifteen primitive building blocks (circle, ring, rounded square, triangle, hexagon, star, heart, droplet, diamond, plus, cross, chevron, arrow, half-moon, square) you can stack, rotate and scale. The AI tab generates a brand-new icon from a text prompt — type 'minimal lightning bolt with rounded ends' and it returns an editable SVG you can keep iterating on. The Import tab accepts pasted SVG markup (DOMPurify-sanitised so it's safe), turning any existing icon into editable layers. The Style tab gives full control over the selected layer, and the Set tab manages your saved icons.

Layers behave like a tiny design tool. Select multiple at once with Shift or Cmd-click. Reorder, lock, hide, duplicate or delete. Double-click a layer to rename it inline. Each layer has its own fill, stroke, position, size, rotation, opacity, corner radius, and an optional animation that overrides the document-level animation for staggered effects. The active layer is highlighted in the panel and outlined on the canvas.

Workflow features make it actually pleasant to use for non-trivial work. Full undo/redo with ⌘Z and ⌘⇧Z. Keyboard shortcuts for duplicate (⌘D), select-all (⌘A), delete, and arrow-key nudging. Snap-to-grid with a visual overlay. Alignment toolbar that aligns multi-selected layers left/centre/right/top/middle/bottom or distributes them evenly on either axis. Zoom and pan the canvas (Ctrl+wheel to zoom, Alt-drag to pan). A built-in WCAG contrast warning fires when your foreground and background combination falls below AA, and you can attach an ARIA label or mark the icon as decorative so it exports with the right accessibility hints baked in.

The Canvas panel handles everything around the icon. Pick transparent, a solid colour, a rounded plate or a circle plate as the background. Add inner padding so the glyph doesn't kiss the edge. Toggle a drop shadow or apply a subtle blur (both are exported as real SVG filters, so they survive in PNG and PDF too). Choose the export size from 16 px (a favicon) to 512 px (a hero illustration). The plate options are particularly useful for app-style icon sets where every glyph needs to live inside a coloured square or circle.

Animation is built in, and crucially, it survives export. Pick from nine presets — spin, pulse, bounce, wiggle, draw-on (stroke-dasharray reveal), fade-in, pop, hover-grow or none — and tune duration, delay, repeat and trigger (always or on hover). Apply a stagger value to make multi-layer icons animate in sequence. The preview animates live. When you export the Animated SVG, the CSS keyframes are embedded inside the file so the animation plays anywhere the SVG is used. No JavaScript runtime required.

Colour discipline is where the tool earns its place. Paste a Colour Palette Generator share URL into the Palette panel and every brand swatch appears as a clickable chip beneath the fill and stroke pickers. The Style-transfer button bulk-recolours every icon in your saved set against the new palette, so a brand refresh that used to mean recolouring fifty icons by hand takes one click. Combine that with the Brand Guidelines Generator and you have a single source of truth for colour across logo, type, copy and icons.

The export menu covers every realistic use case. Static formats: SVG (clean, optionally SVGO-optimised, vector-perfect for the web), PNG at 1×, 2× and 4×, JPG (with chosen background), WebP, AVIF (smallest modern raster), ICO (multi-size, 16/32/48/64/128/256, drop straight into a /favicon.ico) and PDF (single-page vector). Motion formats with clear guidance on which to use: Lottie JSON for designers (drops into After Effects, lottie-web or dotLottie), WebM for the web (smallest video files), APNG for quality (lossless with full alpha channel) and GIF for email and legacy clients (lower quality but plays everywhere). Component snippets: React, Vue, Svelte, Astro, plus copy-as-CSS-background-URI and copy animation CSS. A Figma-pasteable export strips animations and sizes the SVG for clean vector pasting straight onto the Figma canvas.

Accessibility analysis sits alongside the editor. The colour-blind simulator overlays your icon with Protanopia, Deuteranopia, Tritanopia or Achromatopsia simulation so you can see whether a red/green tick still reads for someone who can't distinguish red from green. The contrast checker flashes a warning the moment your fill drops below WCAG AA against the chosen background. Mark an icon as decorative or attach a meaningful ARIA label and the exported SVG includes the right `role` and `aria-label` attributes — no extra work required when you embed it.

For multi-icon workflows there's a 'My set' panel. Save the current icon, name it, and build up a collection. Export set as ZIP bundles every icon as both SVG and PNG, plus a sprite.svg file (with named symbols ready to use href to) and an icons.json manifest. Drop the lot into a project and you have a complete, self-hosted, zero-dependency icon system. The set persists in your browser between sessions so you can come back and iterate.

A few practical workflows. For a marketing site, build six feature-grid icons in your brand palette in one afternoon and export the ZIP — the sprite sheet means one HTTP request for all of them. For a SaaS product, recolour the existing nav icons to match your accent colour, save them as React components and replace the imports. For a slide deck, export at 512 px PNG with a rounded plate background for a clean, app-store look. For an email campaign, export an animated GIF (clearly labelled as the email-and-legacy format). For a designer handoff, export Lottie JSON so After Effects users can scrub the animation and tweak it from there.

Pair Icon Studio with the rest of our free tools for the complete identity workflow. Choose your palette in the Colour Palette Generator, your fonts in the Google Fonts Playground, design icons here, then bundle the lot into a brand book with the Brand Guidelines Generator and a complete favicon set with the Favicon Generator. Open the tool and start with one icon — or type a prompt into the AI tab and let the studio draft one for you.