Styling Text & Links

CSS Icons

Using icon libraries or SVGs.

1Using Icons

Icons are often added via libraries like FontAwesome or as SVG.

Example Code

css

/* Example usage class */
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

2Understand it in a real interface

An icon can reinforce a labeled action, but a symbol alone may be ambiguous. A decorative icon beside a clear label should not cause the action to be announced twice. An icon-only control still needs an accessible name on the control and a usable interaction area.

3Try it yourself

Add an SVG icon beside a button label and hide that decorative SVG from assistive technology. Create an icon-only version with an accessible button name. Compare both at small size, browser zoom, and keyboard focus before deciding which version fits the interface.

Finished reading?

Mark this topic as complete to track progress.

CSS Links

Next Topic

CSS Backgrounds