Summary - Icon set

Build an icon set with SVG.

Summary: an icon set with SVG

In this group you saw how SVG is styled. fill sets the inside color, stroke the edge color, stroke-width the edge thickness. These are CSS's core SVG tools.

You animated icons with :hover and bound them to text color with currentColor. Now you will combine these and build a consistent icon set.

Exercise Style the first icon

Inside .icon-home, write two declarations: set fill to #0f172a and stroke to #475569. The icon's inside becomes dark, its edge light gray.

Show example solution

open .icon-home; write fill: #0f172a; and stroke: #475569; inside.
Example solution:
.icon-home {
  fill: #0f172a;
  stroke: #475569;
}

currentColor and hover together

Combining the two tools gives you a powerful pattern. You bind the icon to the text color with fill: currentColor; then you write .icon-home:hover { color: #2563eb }. On hover the text color turns blue; the icon follows.

In this pattern only color changes; you don't rewrite fill. One point of control reaches the whole icon set.

Exercise Build the icon set

Write two declarations: inside .icon set fill: currentColor; inside .icon:hover set color: #2563eb. All icons follow the text color and turn blue on hover.

Show example solution

inside .icon write fill: currentColor; inside .icon:hover write color: #2563eb;.
Example solution:
.icon {
  fill: currentColor;
}
.icon:hover {
  color: #2563eb;
}

Test yourself

How does currentColor work on hover?
- fill is rewritten each time
- color changes, the icon follows
- stroke does not change automatically
- hover ignores currentColor
Show answer

color changes, the icon follows — Correct! When color changes, currentColor follows; no need to rewrite fill.

Next lesson: Challenge - Flexbox gallery

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies