← Back to Chapters

CSS Icons

? CSS Icons

⚡ Quick Overview

CSS icons are small visual elements used to improve the look and usability of a web page. You can create them using pure CSS shapes or by using icon libraries like Font Awesome. They are scalable, customizable, and easy to style with regular CSS properties.

? Key Concepts

  • Pure CSS Icons: Built using shapes like squares, circles, and pseudo-elements.
  • Icon Fonts: Libraries (e.g., Font Awesome) that expose icons as special font glyphs.
  • Scalability: Icons resize smoothly using font-size or transform.
  • Styling: Standard CSS properties like color, margin, and hover work on icons.
  • Accessibility: Use attributes like aria-label to describe the meaning of icons.

? Syntax & Theory

There are two popular ways to use icons in CSS:

  1. Pure CSS Icons:
    Create shapes using width, height, border-radius, and ::before / ::after pseudo-elements.
  2. Icon Libraries (Font Awesome):
    Include a CDN link, then use an <i> tag with proper classes like fas fa-heart. Style them using normal CSS.

❤️ Pure CSS Icon Example – Heart

This example builds a heart icon using a rotated square and two circles created with pseudo-elements.

? View Code Example 
/* Heart icon using pure CSS shapes */
.heart {
  width: 60px;
  height: 60px;
  position: relative;
  transform: rotate(-45deg);
  background-color: red;
  margin: 0 auto;
}

.heart::before,
.heart::after {
  content: '';
  width: 60px;
  height: 60px;
  position: absolute;
  border-radius: 50%;
  background-color: red;
}

.heart::before {
  left: 30px;
  top: 0;
}

.heart::after {
  top: -30px;
  left: 0;
}

? Live Output

 
 

The base square is rotated -45deg and the circles on top form the upper curves of the heart. Because everything is CSS-based, the icon remains sharp at any size.

⭐ Using Font Awesome Icons

Font Awesome provides a huge collection of ready-made icons. You just include the CDN link and use the appropriate class names.

  1. Include the Font Awesome CDN inside the <head> of your HTML file.
  2. Use <i> elements with icon classes like fas fa-heart.
  3. Style them using font-size, color, and other CSS properties.
? View Code Example 
<!-- Font Awesome icons with basic styling -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

<i class="fas fa-heart" style="font-size: 40px; color: red;"></i>
<i class="fas fa-thumbs-up" style="font-size: 40px; color: blue; margin-left: 10px;"></i>
<i class="fas fa-camera" style="font-size: 40px; color: green; margin-left: 10px;"></i>

? Live Output

 

Each icon is just an inline element that behaves like text. You can change its size with font-size, color with color, and spacing with margin.

?️ Common CSS Icon Properties

These are some of the most frequently used properties when styling icons:

Property Description Example Value
font-size Controls the size of font-based icons. 40px, 1.8rem
color Sets the icon color. red, #ff5733
margin Adds space around icons. 10px, 0 8px
transition Animates changes like hover effects. 0.2s ease
transform Used for scaling, rotating, or moving icons. scale(1.2), rotate(10deg)
? View Code Example 
/* Simple hover effect for Font Awesome icons */
.icon-row i {
  font-size: 40px;
  margin: 0 8px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.icon-row i:hover {
  transform: scale(1.2);
  color: #2563eb;
}

? Tips & Best Practices

  • Use font-size to scale vector icons without losing quality.
  • Add transition and :hover effects to make icons feel interactive.
  • Keep icon usage consistent across your UI (same size and color palette).
  • Use aria-label or title attributes to describe icons for screen readers.
  • Avoid using icons alone for critical actions—add text labels when needed.

? Try It Yourself

  1. Create a row of 3–5 Font Awesome icons (e.g., home, user, settings).
  2. Use font-size, color, and margin to style them consistently.
  3. Add a hover effect that changes the icon color and slightly increases its size.
  4. Build one more pure CSS icon (e.g., a star or a notification dot) using shapes and pseudo-elements.
  5. Make sure all icons are accessible by giving them descriptive aria-label attributes.