Icons that follow the text colour
Each icon is defined once and reused with <use>. Hover over a heart: the icon changes colour with the text because it uses currentColor. 1.25em of a 16px font is 20px.
SVG describes pictures as shapes instead of pixels, so they stay sharp at any size; written inline in HTML, every shape is an element you can colour with CSS, which makes SVG ideal for icons, logos and simple graphics.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Draw a 100 × 100 SVG of a traffic light: a dark rounded rectangle with red, amber and green circles stacked vertically.
Make a "Delete" button with a decorative cross icon that turns red on hover along with the text.
Explain it without notes
What is the difference between vector and raster images, and when is SVG the right choice?
What does viewBox do, and how does it relate to width and height?
Compare <img src="icon.svg"> with inline <svg>.
How do you make an SVG icon accessible, both when it's decorative and when it's the only content of a button?
Preview
Console
Nothing logged yet.Expected console output
Button text colour: rgb(0, 128, 0)
Icon size follows the font: 20px
Last button's accessible name comes from: Like