One set.
One shared style.

01 · The style profile

Choose a few rules before drafting.

For these original examples, we use a 0 0 24 24 coordinate space, no fill, a stroke width of 1.8 and round line caps. These are our design choices, not a general SVG standard. viewBox defines the internal coordinate space; you set the displayed pixel dimensions separately. MDN explains viewBox.

Coordinate space

24 × 24 units

Outline

1.8 · round caps

Fill

None

Starting margin

3 units

Here, the stroke width is measured in units of the SVG coordinate space. Using the same viewBox and display size makes visual weight directly comparable. W3C: stroke-width.

02 · Look rather than assume

See the effect of mismatched outlines.

On the left, the calendar, folder and clock deliberately use different stroke widths. On the right, the same shapes share a profile. Choose a size and inspect the icons without enlarging them.

The shared outline fixes one specific problem here. Also check spacing, meaning and optical weight. A circle can appear larger than an open folder with the same outer dimensions. Such adjustments are deliberate design choices that belong in your review.

03 · A complete example

A simple SVG is easy to inspect.

This clock needs only a circle and a path. The code contains no embedded images or external resources. Save it as clock.svg and open it in a suitable SVG editor.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="1.8"
     stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="8"/>
  <path d="M12 7v5l3 2"/>
</svg>

Original explanatory code. The example values support this comparison; they are not an automatic quality certificate for other files.

04 · Your release check

Six checks before packaging.

Use this list for your actual exported files. Your selections exist only on this page; they are neither saved nor transmitted.

0 of 6 checks completed

Package only what you checked.

A useful download contains the actual SVGs, an accurate preview, clear filenames and understandable terms of use. Reopen the finished ZIP and check that its files match your description. Our free example set demonstrates delivery structure; it does not establish demand or sales.