CSS Icons
Icons pack a lot of meaning into a very small space, a trash can icon instantly reads as delete without a single word of text. Rather than drawing every icon by hand, most sites lean on an icon library: a font or set of files, packed with hundreds of ready-made icons you can drop in and style with plain CSS.
Three of the most popular icon libraries are Font Awesome, Google's Material Icons, and Bootstrap Icons. Each works the same basic way: link a stylesheet, then add a small class name to an element to display that specific icon. Once it's on the page, everyday CSS properties like font-size and color control exactly how it looks.
Icon libraries are how a site like cookiescursor.com can sprinkle in consistent, professional-looking icons everywhere, from buttons to navigation, without designing a single custom graphic.
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>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- 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.
Chapter Summary
- 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.
Browser Support
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: