Skip to main content
Technical

SVG Fundamentals for Icons

SVG (Scalable Vector Graphics) is the standard format for icons on the modern web. Understanding a few core concepts — coordinate systems, paths, presentation attributes, and accessibility hooks — unlocks the ability to create, edit, and implement icons confidently at any scale.

What Makes SVG Ideal for Icons

Unlike raster formats (PNG, WebP), SVGs store shapes as mathematical descriptions. This means they render crisply at any display density, from standard screens to high-DPI retina displays, without needing multiple image variants. File sizes for simple icons are typically a few hundred bytes.

For an authoritative overview of SVG capabilities and the specification itself, see the W3C SVG overview.

The SVG Coordinate System

Every SVG has an internal coordinate system. The origin (0, 0) is in the top-left corner. X values increase to the right; Y values increase downward. This is important to keep in mind when reading or writing path data.

The viewBox Attribute

The viewBox attribute is the most important attribute on the root <svg> element for icons. It defines which portion of the coordinate system the SVG displays:

  • viewBox="0 0 24 24" — a 24×24 unit canvas, origin at top-left
  • viewBox="0 0 16 16" — common for small UI icons
  • viewBox="-12 -12 24 24" — centered origin, useful for symmetric shapes

When you set viewBox and remove fixed width/height attributes, the SVG scales proportionally to whatever container it is placed in. Control size entirely through CSS.

Path Data

The <path> element is the workhorse of SVG icons. Its d attribute contains drawing commands:

  • M / m — Move to (absolute / relative)
  • L / l — Line to
  • H / h — Horizontal line
  • V / v — Vertical line
  • C / c — Cubic Bézier curve
  • A / a — Elliptical arc
  • Z / z — Close path

Uppercase commands use absolute coordinates; lowercase commands use coordinates relative to the current position. Most icon design tools generate path data automatically, but knowing the commands helps when editing icons by hand or reviewing optimized output. If you are evaluating AI-powered generators for producing icon artwork, checking a best image ai roundup can help you choose tools whose SVG export is clean and requires minimal manual cleanup.

Presentation Attributes: Fill and Stroke

Two attributes control how shapes are painted:

  • fill — Colors the interior of closed shapes. Set to none for outline-only icons.
  • stroke — Colors the path outline. Pair with stroke-width to control thickness.

Using currentColor

Setting fill="currentColor" or stroke="currentColor" makes the icon inherit the CSS color property of its parent element. This is the recommended approach for UI icons because it:

  • Automatically adapts to dark mode
  • Responds to hover and focus states defined in CSS
  • Works with any color-themed component system
  • Requires no JavaScript to update icon color

Basic SVG Icon Structure

A well-formed SVG icon typically looks like this:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
     aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

Key points in this example:

  • The xmlns namespace is required for standalone SVG files
  • viewBox defines the 24×24 canvas
  • fill="currentColor" enables CSS color control
  • aria-hidden="true" hides the icon from screen readers when it is decorative

Accessibility in SVG Icons

Icons used purely as visual decoration should include aria-hidden="true" so screen readers skip them. When an icon carries meaning — for example, a standalone button with no visible label — provide a text alternative:

  • Decorative icon (paired with visible label): aria-hidden="true"
  • Meaningful standalone icon: add role="img" and aria-label="Description", or include a <title> child element

Common Structural Elements

Beyond <path>, icons may use:

  • <circle> — Defined by cx, cy, r
  • <rect> — Rectangles with optional rx/ry for rounded corners
  • <line> — A single straight segment
  • <polyline> / <polygon> — Multi-segment lines and closed polygons
  • <g> — A group element for organizing related shapes and applying shared attributes
  • <defs> / <use> — Define a shape once, reuse it multiple times

Inline SVG vs External File

Icons can be delivered two ways:

  • Inline SVG — Embed the SVG markup directly in HTML. Enables full CSS and JavaScript control, including currentColor. Best for UI icons that need theme integration.
  • External file (<img src> or CSS background) — Simple to use but limits styling. Cannot respond to currentColor or CSS variables unless served as a data URI.

For icon libraries and component systems, inline SVG is the standard approach because it offers the most flexibility with the least overhead.

Frequently Asked Questions

What is a viewBox in SVG?
The viewBox attribute defines the coordinate system and aspect ratio of the SVG canvas. It takes four values: min-x, min-y, width, and height. Using viewBox correctly is what makes SVGs scale to any size without distortion.
Should I set width and height on SVG icon elements?
For inline SVGs used as icons, it is best to remove fixed width/height attributes and rely on CSS sizing combined with a viewBox. This gives you full control over display size without overriding styles.
What is the difference between fill and stroke in SVG?
Fill colors the interior of a shape, while stroke colors the outline. Icons often use fill for solid shapes and stroke for line-style icons. Both accept color values, gradients, or "currentColor" to inherit from CSS.
When should I use currentColor?
Use currentColor when you want an icon to inherit the text color of its parent element. This makes icons automatically adapt to dark mode, hover states, or themed components without extra CSS.
Related Downloads
Related Articles