How to Design Mini Icons in SVG

To design mini icons today, draw them as SVG on a 16 x 16 grid, snap every stroke to the pixel grid, then ship the set as one SVG sprite that inherits its colour from the surrounding text. That is the modern version of the old Photoshop pencil-tool workflow: the same discipline about single pixels, but the result scales, recolours itself and weighs a few hundred bytes per icon.

This guide walks through the whole process: choosing a grid, drawing with pixel-aligned strokes in Figma or any vector editor, cleaning the export, building a sprite and using it in HTML with accessible markup. The demo below was built and rendered for this article, so the code is tested.

Why mini icons were pixel art, and why that still matters

In 2007, a 14 x 14 icon had to be a GIF or PNG. Every pixel was placed by hand with the Pencil tool, because any anti-aliasing turned thin lines into grey mush. Vector icons have removed the file-format problem, but not the underlying physics: a screen is still a grid of pixels, and a one-pixel line that straddles two pixel columns is rendered as two blurry half-intensity columns.

So the craft survives. You are still designing on a small grid, still deciding where each line lands, and still keeping a consistent look across a set. The difference is that the grid is now a constraint you design inside, not a canvas you paint on.

1. Pick a grid and a stroke rule

Decide two things before drawing anything:

• Grid size. 16 x 16 is the right default for UI mini icons: buttons, table rows, menu items, inline text. If you also need a larger variant, draw a separate 24 x 24 set rather than scaling up, because strokes and details need to change with size.
• Stroke width. One pixel on a 16 px grid is the classic crisp look. A 1.5 or 2 px stroke is friendlier and survives zoom better, but must be applied to the whole set.

Keep a 1 px padding inside the artboard so the shapes do not touch the edge, and use round or square joins consistently. Write the rules down; they are what separates an icon set from a pile of icons.

2. Draw on the pixel grid

In Figma, create a 16 x 16 frame and turn on the pixel grid (Ctrl or Cmd plus the apostrophe key, visible once you zoom to 400% or more). Turn on snap to pixel grid as well (Ctrl or Cmd plus Shift plus the apostrophe key), so lines you draw land on whole pixels. Figma documents both in its help article on layout grid and pixel settings. Illustrator and Affinity have equivalent pixel preview and snap options.

The rule that matters is about where the centre of a stroke sits. A stroke is drawn centred on its path:

• A 1 px stroke centred on a whole number (x = 8) covers half of column 7 and half of column 8. Both are painted at 50% and the line looks soft.
• A 1 px stroke centred on a half number (x = 8.5) covers exactly column 8. It is sharp.
• A 2 px stroke is the opposite: centre it on whole numbers.

The screenshot above is the proof. It was rendered at 16 px in a browser at device scale 1 and then enlarged without smoothing. On the left every line sits on .5 coordinates and the stroke fills one column almost fully (grey value 23 out of 255). On the right the identical shape was moved by half a pixel: each line is spread over two columns, both at grey value 139, so the outline looks twice as wide and washed out. At actual size, shown beside each panel, that is the difference between crisp and fuzzy.

Diagonals and curves cannot be pixel-perfect, so do not obsess over them. Align the horizontals and verticals, keep corner radii small and consistent, and let the rest anti-alias.

3. Keep the set consistent

1. Draw each icon at the same visual weight. A circle needs to be slightly larger than a square to look the same size, so give round shapes a pixel of extra room.
2. Use one corner style and one terminal style (round or square) throughout.
3. Reuse parts. The folded corner of a document is the same shape in every file-type icon, just as the old layer groups were reused in the Photoshop version.
4. Test at actual size, 16 px, not only zoomed in. Zoom hides most of the problems.

4. Export and clean the SVG

Export each icon as SVG with the viewBox kept at 0 0 16 16. Editors add metadata, IDs and redundant attributes, so run the files through SVGO, a Node.js tool that removes that clutter:

npm install -g svgo
svgo -f icons/ -o icons-min/

Then do two manual edits that make an icon reusable. Remove fixed width and height attributes so CSS controls the size, and replace hard-coded colours with currentColor, so the icon takes the text colour of whatever it sits in. SVGO’s default preset does not recolour things for you, so check the output.

5. Build a sprite

Put every icon into a single SVG file as a <symbol>. A symbol is a template that is never drawn by itself; it is rendered only where a <use> element references it. Plain href is all you need, since the old xlink:href form is no longer required in current browsers.

<svg xmlns="http://www.w3.org/2000/svg" hidden>
  <symbol id="i-file" viewBox="0 0 16 16">
    <path d="M3.5 1.5h6l3 3v10h-9z M9.5 1.5v3h3"
          fill="none" stroke="currentColor" stroke-linejoin="round"/>
  </symbol>
  <symbol id="i-search" viewBox="0 0 16 16">
    <circle cx="6.5" cy="6.5" r="4.5" fill="none" stroke="currentColor"/>
    <path d="M10.5 10.5l4 4" stroke="currentColor"/>
  </symbol>
</svg>

Every path in this sprite uses half-pixel coordinates with the default 1 px stroke, which is why it renders sharply at 16 px. Inline the sprite at the top of the page, or reference an external file with href="/icons.svg#i-file". External sprites are cached between pages but are subject to same-origin rules, so serve them from your own domain.

6. Use the icons in HTML and CSS

An icon next to a visible label is decoration and should be hidden from screen readers. An icon that is the only content of a button needs an accessible name instead.

<!-- decorative: the text carries the meaning -->
<button class="btn">
  <svg class="icon" width="16" height="16" aria-hidden="true"><use href="#i-file"/></svg>
  New file
</button>

<!-- icon-only: give the button a name -->
<button class="btn" aria-label="Search">
  <svg class="icon" width="16" height="16" aria-hidden="true"><use href="#i-search"/></svg>
</button>

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  color: inherit;          /* stroke="currentColor" picks this up */
}
.btn:hover .icon,
.btn:focus-visible .icon { color: oklch(0.55 0.2 260); }

Because the stroke uses currentColor, dark mode, hover states and disabled states need no extra icon files. Sizing in em keeps the icon proportional to the text, but remember the pixel-alignment rule: for the crispest result, render a 16 px icon at exactly 16 px (or 32 px on a 2x screen) rather than at a fractional size.

If you scale an icon above its design size, strokes thicken with it. When you want the line to stay a fixed width regardless of scale, add vector-effect="non-scaling-stroke" to the shapes; it is Baseline widely available. It is rarely what you want for a full icon set, though, because proportions between stroke and shape are part of the design.

7. Know when to use something else

Approach	Best for	Trade-off
Inline SVG or sprite	UI icons you style with CSS	Markup per use; icons are part of your HTML or one cached file
Icon font or variable icon font	Large icon libraries, or when you want weight and size as CSS-adjustable axes	Glyphs are text, so they are anti-aliased by the font renderer and cannot snap to your pixel grid; hide them from screen readers and ship only the subset you use. Old multi-file icon fonts are the weakest option; variable fonts such as Material Symbols are current
CSS mask-image with an SVG	Single-colour icons as a background	One colour only, set by background-color
PNG at 1x/2x	Multi-colour pixel art	Fixed sizes, no recolouring

Pixel art is still a valid style when you want the retro look. Draw it as SVG <rect> cells and set shape-rendering="crispEdges", which tells the browser to favour sharp edges over smooth geometry, or export a PNG and display it with image-rendering: pixelated.

When an existing icon set is the better choice

Drawing your own set is worth it when you need a distinctive look or a strict 16 px design. For most products, starting from a maintained open set is faster, and you only draw the few icons it lacks. Check these before you open Figma:

• Lucide: over 1,600 SVG icons under the ISC licence, with official packages for vanilla JS, React, Vue, Svelte, Angular, Astro and more.
• Tabler Icons: more than 6,000 icons under the MIT licence, drawn on a 24 x 24 grid with a 2 px stroke, available as plain SVG, an SVG sprite or a webfont.
• Phosphor: an MIT-licensed set offered in several weights, including duotone, which suits designs that need more than one visual emphasis.
• Material Symbols: Google’s icons as a variable font under the Apache 2.0 licence, with axes for fill, weight (100 to 700), grade and optical size (20dp to 48dp), so one file covers many styles.

How to pick one: match the stroke weight and corner style to your typography, check that it has the icons your product actually needs, and read the licence. Then look at what it costs. Most of these sets are designed on a 24 px grid, so at 16 px a 2 px stroke is heavy and its edges will not land on whole pixels the way the half-pixel rule above gives you. Test the candidates at your real size on a standard-density screen. With a variable icon font, request only the axes you use, since each extra axis adds to the file size, and remember that font glyphs cannot be pixel-snapped. If the set looks soft at 16 px, that is the point where drawing your own 16 px variants pays off.

Using your icons in a real interface

Once the set exists, the real test is a working UI. Our sidebar navigation with icons and badges is the most common home for a 16 px set, because every row pairs an icon with a label. The mobile app menu with icon tiles shows the same sprite at a larger size, a good test of how your icons scale.

Quick checklist

• 16 x 16 viewBox, 1 px padding, one stroke width for the whole set.
• 1 px strokes centred on .5 coordinates; 2 px strokes on whole numbers.
• Optimised with SVGO, no fixed size, currentColor for colour.
• One sprite, referenced with <use href>.
• aria-hidden="true" on decorative icons, aria-label on icon-only buttons.
• Checked at real size on both standard and high-density screens.