Intermediate
Accessible SVG icon buttons
Add an inline SVG heart icon at the start of the Like button. Use viewBox="0 0 24 24" and this path: M12 21 C5 15 2 11 2 7.5 A4.5 4.5 0 0 1 12 6 A4.5 4.5 0 0 1 22 7.5 C22 11 19 15 12 21 Z.
The icon must be 20 × 20 pixels, take its colour from the button's text colour, and be hidden from screen readers (the word "Like" already names the button).
Then make the second, empty button an icon-only Close button: put a cross icon in it (path M6 6 L18 18 M18 6 L6 18 with stroke="currentColor") and give the button an accessible name.
What Check tests
- The Like button contains an SVG with a 24 × 24 viewBox
- The heart is drawn at 20 × 20 pixels
- The heart takes the button's text colour
- The heart is hidden from screen readers, and the button still says Like
- The Close button has an icon and an accessible name
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.