CSS Icons
In this page:
Font Awesome Integration
Font Awesome is one of the most widely used icon libraries, with a huge catalog of icons. Linking its stylesheet unlocks simple class-based icons anywhere on the page.
Note: Font Awesome icon classes typically follow the pattern 'fa-solid fa-icon-name', double check the exact icon name in their documentation.
Warning: If the Font Awesome stylesheet fails to load, every icon on the page quietly disappears or shows as an empty box.
Example: Font Awesome Integration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
i { font-size: 2em; color: crimson; }
</style>
</head>
<body>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-home"></i>
</body>
</html>Google Material Icons
Material Icons is Google's own icon set, following the visual language of Material Design. It works similarly to Font Awesome, but uses plain English icon names as text inside a span.
Note: Material Icons pair naturally with sites already following Material Design conventions, for visual consistency.
Warning: The icon name has to be typed exactly as Google documents it inside the span's text content, a typo just shows as plain text instead of an icon.
Example: Google Material Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.material-icons { font-size: 2em; color: teal; }
</style>
</head>
<body>
<span class="material-icons">favorite</span>
<span class="material-icons">star</span>
<span class="material-icons">home</span>
</body>
</html>Bootstrap Icons
Bootstrap Icons is a lightweight icon library that pairs naturally with the Bootstrap framework, though it works perfectly well standalone too, using short class names on an empty element.
Note: Bootstrap Icons is a solid choice when you want a clean, modern icon set without pulling in a large library like Font Awesome.
Warning: Bootstrap Icons class names all start with 'bi bi-', forgetting the base bi class leaves the icon unstyled.
Example: Bootstrap Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css">
<style>
i { font-size: 2em; color: steelblue; }
</style>
</head>
<body>
<i class="bi bi-heart"></i>
<i class="bi bi-star"></i>
<i class="bi bi-house"></i>
</body>
</html>Sizing and Coloring Icons
Because icon library glyphs are rendered as styled text characters, ordinary CSS properties like font-size and color directly control how large and what color they appear, no special icon-specific properties needed.
Note: Set icon size in em units so an icon automatically scales alongside the surrounding text it sits next to.
Warning: Changing color on a parent element can unintentionally recolor every icon nested inside it, since color is inherited by default.
Example: Sizing and Coloring Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
i {
font-size: 2em;
color: crimson;
}
</style>
</head>
<body>
<i class="fa-solid fa-star"></i>
</body>
</html>Icons Inside Buttons
Pairing an icon with a short text label inside a button is one of the most common icon use cases, giving visitors both a quick visual cue and clear, readable text.
Note: Add a small margin or gap between the icon and its label text so they don't feel cramped together.
Warning: An icon-only button, with no visible text, needs an aria-label describing its action so screen reader users aren't left guessing.
Example: Icons Inside Buttons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
button {
display: flex;
align-items: center;
gap: 6px;
}
</style>
</head>
<body>
<button><i class="fa-solid fa-download"></i> Download</button>
</body>
</html>- Forgetting to link the icon library's stylesheet, causing icons to render as empty boxes or nothing at all.
- Using an icon with no accessible label, leaving screen reader users with no idea what it represents.
- Mixing icon classes from two different libraries with conflicting class names on the same element.
- Icon libraries like Font Awesome, Material Icons, and Bootstrap Icons provide ready-made icons via a linked stylesheet and simple class names.
- Because icon glyphs are just styled text characters, font-size and color control their appearance directly.
- Always pair icon-only elements with accessible text, like an aria-label, so their meaning isn't lost to assistive technology.
Icon libraries rely on standard font and stylesheet loading, so they work in every modern browser.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: