What is SVG and why icons use it

SVG (Scalable Vector Graphics) is an image format that stores drawing instructions instead of pixels. A PNG of a token logo says "this pixel is blue, the next one is blue, the next one is white". An SVG of the same logo says "draw a circle of radius 16 here, fill it, then draw this diamond on top". The browser follows those instructions at whatever size you ask for.

That one difference explains almost everything about why icon libraries, design systems and crypto apps ship logos as SVG, and also the few places where SVG is the wrong choice.

What is inside an SVG file

An SVG file is plain text in XML syntax. You can open it in any text editor. Here is a complete, valid icon: a dark coin with a light diamond on it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
  <circle cx="16" cy="16" r="16" fill="#1f2937"/>
  <path d="M16 6l7 10-7 10-7-10z" fill="#ffffff"/>
</svg>

Reading it line by line:

• xmlns declares the SVG namespace. A standalone .svg file needs it; without it the browser does not treat the file as SVG.
• viewBox="0 0 32 32" sets up a drawing area 32 units wide and 32 units tall. Every coordinate inside refers to this grid, not to screen pixels. The viewBox guide covers this in detail.
• width and height give a default display size, which CSS can override.
• circle draws the coin. path draws the diamond: move to (16, 6), then draw lines to three more corners and close the shape.

The whole file is under 200 bytes. SVG has been a W3C standard since 2001 and every current browser renders it. MDN's SVG reference documents each element and attribute.

Vectors versus bitmaps

PNG, JPEG, WebP and GIF are bitmap (raster) formats. They store a fixed grid of colored pixels. SVG is a vector format: it stores geometry, and the pixels are worked out only when the image is drawn.

The size column matters most in practice. A 256 × 256 bitmap holds 64 times as many pixels as a 32 × 32 one, and its file grows accordingly. An SVG costs the same whether it is shown at 16 px or 1,600 px, because the instructions do not change.

Scaling without blur

Screens no longer map one CSS pixel to one physical pixel. On a phone with a device pixel ratio of 3, a 24 px icon covers 72 × 72 physical pixels. A bitmap exported at 24 × 24 gets stretched to fill that space and looks soft. To stay sharp, you would export it at 1x, 2x and 3x and pick the right file per screen.

An SVG avoids that bookkeeping. The browser rasterizes the shapes at the physical resolution of the display, so the same file is sharp on a laptop, a 4K monitor and a phone.

Scaling does not fix design problems, though. A logo with hairline details or small lettering still turns to mush at 16 px, because there are simply not enough pixels to show it. That is a drawing problem, covered in designing token icons for 16px, not a format problem.

File size in practice

Simple marks are small. A single-color logo made of a few shapes is often well under 1 KB. A multi-color logo with gradients typically lands between 1 and 5 KB. Because SVG is text, servers can compress it with gzip or Brotli on the way to the browser, which shrinks it further.

SVG files get heavy for predictable reasons:

• an embedded PNG or JPEG inside the file (a bitmap wearing an SVG wrapper);
• coordinates written with six or more decimal places;
• editor metadata, hidden layers and unused definitions left in by the export;
• artwork auto-traced from a bitmap, with thousands of tiny path segments.

If an icon file is over 20 KB, one of those is usually the cause. The file size guide shows how to find and fix each one.

Styling with CSS

When SVG markup sits directly in your HTML (inline SVG), its shapes are part of the page. CSS can change fills and strokes, react to hover, and follow dark mode. A single-color icon written with fill="currentColor" takes the text color of its parent:

<button class="copy">
  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <path d="M8 8h11v11H8zM5 5h11v2H7v9H5z" fill="currentColor"/>
  </svg>
  Copy address
</button>

.copy { color: #d4d4d8; }
.copy:hover { color: #ffffff; }

The same file loaded through <img src="icon.svg"> behaves differently. It is a separate document: page CSS cannot reach inside it, and any scripts in it do not run. Both are useful properties, for different reasons. The comparison in inline SVG vs img vs CSS background helps you pick per situation.

Why logos and icons suit SVG

Logos are mostly flat shapes with a small number of colors and crisp edges. That is exactly what vector geometry describes efficiently. In a typical crypto interface the same token logo appears at 16 px in a table, 24 px in a balance list, 40 px on a swap form and 128 px on an asset page. One SVG covers all of those.

There are a few more reasons that matter for product teams:

• Recoloring. A mono version of a logo can follow your theme, and a branded version can sit next to it unchanged.
• Editing. Fixing a viewBox or a color takes a text editor, not a design tool.
• Diffing. Text files show meaningful changes in code review.
• Accessibility. Inline SVG can carry a name for screen readers, and an <img> gets an alt like any other image.

When SVG is not the answer

SVG is a poor fit for photographs and painterly textures, which turn into enormous files when traced into shapes. It is also unreliable where you do not control the renderer. Many email clients do not display it, and social platforms generally expect PNG or JPEG for link preview images. In those places, export a PNG from the SVG source at the size you need.

For everything drawn on a screen you control (web apps, wallets, dashboards, docs), keep the SVG as the source of truth and generate other formats from it when a platform demands them. On this site, every logo in the icon library downloads as SVG for that reason.