SVGDO
SVGdesignguide

Icon Design Guide: Complete SVG Workflow

✍️ SVGDO Editorial Team 📅 Published on 2026-03-10

An icon set is easier to use when every icon follows the same coordinate system, visual weight, and accessibility conventions. The goal is not to force every drawing into one style; it is to make the source predictable for the designers and developers who maintain it.

Choose a shared viewBox

Many interface sets use a 24 24 viewBox because it works well with common control sizes. The important part is consistency, not the number itself. Define the drawing area, safe padding, and how strokes are aligned before creating the first icon.

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>

Check that the artwork is centered and that the stroke does not get clipped at the edge of the viewBox. Optical balance may require a circle to occupy a little more area than a square even when both use the same nominal bounds.

Define a stroke system

Document the stroke widths, caps, joins, and corner radii used by the set. A one-pixel stroke in a 24-unit viewBox may look different from a two-pixel stroke in a 48-unit viewBox. Test at the actual CSS sizes and on a high-density display.

Use currentColor when icons should inherit text color. Avoid hard-coding several near-identical colors that make dark-mode and focus states difficult to manage.

Use simple geometry where it communicates intent

Keep a circle, rect, or line as that element when it remains easier to understand than a converted path. Use a path for a curve or compound shape that genuinely needs it. Meaningful groups and IDs help later CSS or JavaScript integrations, so do not flatten them solely to save a few characters.

Test accessibility at the component boundary

Decorative icons should use aria-hidden="true" and an adjacent visible label or accessible button name. Informative standalone icons need a <title> or an external text alternative. Do not rely on color alone to communicate an active or error state; pair it with text, shape, or an accessible state.

Review and optimize the source

Before publishing an icon:

  1. Confirm the viewBox, dimensions, and alignment.
  2. Check the stroke system and contrast in each theme.
  3. Remove unused metadata and definitions.
  4. Preserve IDs used by CSS, tests, or animation.
  5. Compare the original and optimized preview at several sizes.
  6. Record the source license and any embedded font or image dependency.

SVGDO can show the source beside the preview and apply a reviewable optimization pass. It does not assume that a shorter path is automatically clearer or that a smaller file is always a better icon.

Create a handoff that lasts

Store the editable SVG source in version control, name icons consistently, and document whether each icon is intended for inline use, an <img>, or a sprite. Include examples of the expected size, color, and accessible name. A small checklist prevents more regressions than a one-time export.