CSS Tutorial

CSS Icons

Icons are small pictures that make interfaces clearer and friendlier. CSS does not create icons on its own, but it styles and sizes the icons you add through icon fonts, inline SVG, or emoji so they blend perfectly with your text.

What are CSS icons?

An icon is a compact symbol that represents an action or an object, such as a magnifying glass for search or a heart for a favourite. On the web you can display icons in three common ways: as characters from an icon font, as inline SVG shapes, or as background images. CSS then controls their colour, size, alignment, and spacing.

The three main approaches

Method	How it works	Best for
Icon font	A font where each character is a tiny picture	Quick reuse, colour follows text
Inline SVG	Vector shapes written directly in HTML	Sharp scaling and full styling control
Emoji / Unicode	Built-in characters already in fonts	Zero setup, casual pages

Emoji and Unicode icons (no setup)

The simplest icons need no downloads at all. Emoji are ordinary text characters, so you can size and colour them like any other text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .card {
    font-family: system-ui, sans-serif;
    padding: 20px;
  }
  .icon {
    font-size: 40px;
    margin-right: 8px;
    vertical-align: middle;
  }
</style>
</head>
<body>
  <div class="card">
    <span class="icon">🔍</span> Search
    <br><br>
    <span class="icon">❤️</span> Favourite
    <br><br>
    <span class="icon">⚙️</span> Settings
  </div>
</body>
</html>

Inline SVG icons

SVG (Scalable Vector Graphics) icons stay crisp at any size because they are drawn from math, not pixels. Because the SVG lives inside your HTML, CSS can change its colour with the fill property and its size with width and height.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .star {
    width: 48px;
    height: 48px;
    fill: #f59e0b;
    transition: fill 0.2s;
  }
  .star:hover { fill: #dc2626; }
</style>
</head>
<body>
  <p>Hover the star to change its colour:</p>
  <svg class="star" viewBox="0 0 24 24">
    <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/>
  </svg>
</body>
</html>

Icon fonts

Icon fonts (such as Font Awesome or Bootstrap Icons) load a special font where letters are replaced by symbols. You add an element with the library's class name and the icon appears. Because it is really text, it inherits the surrounding colour and font-size automatically.

/* Typical icon-font usage after loading the library CSS */
.icon-heart {
  color: crimson;      /* recolours the icon */
  font-size: 32px;     /* resizes the icon */
}

⚠️

Always give an icon an accessible label. Add aria-hidden="true" to a purely decorative icon, or aria-label / visually hidden text when the icon carries meaning on its own.

Key points

Icons come from icon fonts, inline SVG, or emoji — CSS styles them, it does not draw them.
SVG icons scale without blur and can be recoloured with the fill property.
Icon-font and emoji icons follow the surrounding color and font-size like text.
Give meaningful icons an accessible label; hide decorative ones from screen readers.