2learn

SVG & Icon Systems

What it is

SVG is an XML format for vector graphics that the browser renders as part of the page. Because it is markup rather than an image file, its shapes can be styled and animated with CSS and scripted with JavaScript. An icon system is the way a project organises a set of these icons — sprites, inline components, or an icon font — so they can be used consistently and delivered efficiently.

Why it matters

Icons are small, numerous and easy to get wrong. Done well, they are sharp at every zoom level, scale with the font, inherit the current colour, and are invisible to a screen reader when they are decorative. Done badly, they are raster images that blur, a font that fails silently when the glyph is missing, or an unlabelled button that announces nothing. The decisions are few — how to deliver the icons, how to size and colour them, and how to label them — but each one propagates across every icon in the product, which is why it belongs in a system rather than in a folder of downloaded files.

In this track

  1. SVG fundamentals (02-frontend/17-svg-icon-systems/01-svg-fundamentals) — the coordinate system, the shapes, and why the same markup can be styled by CSS.
  2. Icon systems and accessibility (02-frontend/17-svg-icon-systems/02-icon-systems-and-accessibility) — delivery approaches and the labelling rules that keep icons meaningful.

Prerequisites

Go deeper

Analytics cookies are set only if you allow them. Nothing is loaded, and nothing is sent, until you choose.