Learn Icons
Icons are small symbolic images used all over the web, and this lesson explains the two main ways they are built for browsers - icon fonts and SVG icon sets - and why pulling icons from a library beats collecting individual image files.
What Is an Icon Library?
An icon library is a ready-made collection of small symbols - things like a heart, a gear, a trash can, a magnifying glass - that you add to your project once and then use anywhere by name. Instead of designing or downloading a picture every time you need a checkmark, you load the library and reference the icon you want, the same way you'd use a word from a dictionary.
- Bootstrap Icons - a free SVG-based set built by the Bootstrap team.
- Font Awesome - one of the oldest and most widely used icon libraries on the web.
- Google Material Icons and Material Symbols - Google's icon set for Material Design.
- Smaller SVG-only sets such as Feather Icons and Heroicons, often used inside modern frameworks.
Two Ways Icons Are Built for the Web
The older technique is the icon font. A designer draws a set of symbols and packs each one into a custom font file as if it were a letter of the alphabet. Because the browser treats an icon font exactly like any other font, you can color it with the CSS color property and resize it with font-size, the same properties you already use on paragraphs and headings.
The newer, now more common technique is the SVG icon. SVG stands for Scalable Vector Graphics: each icon is a tiny drawing described with lines, curves, and shapes rather than colored pixels. An SVG icon can be dropped into a page as an image reference or pasted directly into the HTML as an <svg> element, and because it is a drawing rather than text, it is styled with properties made for graphics, like fill, stroke, width, and height.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
@font-face {
font-family: "DemoIcons";
src: url("demo-icons.woff2") format("woff2");
}
.icon {
font-family: "DemoIcons";
font-style: normal;
}
.icon-star::before {
content: "\e901";
}
</style>
<i class="icon icon-star"></i>
</body>
</html>Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
<path d="M12 2l2.9 6.9L22 9.3l-5 4.9 1.2 7-6.2-3.7L5.8 21.2 7 14.2 2 9.3l7.1-.4z"/>
</svg>
</body>
</html>Why Use a Library Instead of Individual Images
- Consistency - every icon in a library shares the same stroke width, corner radius, and visual style, so a project never ends up with a mismatched pile of icons from different artists.
- Scalability - because icon fonts and SVGs are vector-based, they stay crisp at any size, unlike a PNG or JPEG icon that turns blurry the moment it is scaled up.
- Easy color and size changes - a single CSS rule can recolor or resize an icon instantly, instead of reopening an image editor to produce a new file for every color a design needs.
- Fewer requests - a whole set of icons often ships as one font file or one small SVG sprite, which is lighter than dozens of separate image downloads.
Exercise: Icons Introduction
What is the most common way to add a large, ready-made icon library to a web page?
Frequently Asked Questions
- Should I use an icon font or SVG icons?
- SVG, in almost every case. It renders sharply, can be styled per shape, and avoids the layout shift and accessibility quirks of icon fonts. Icon fonts survive mainly in older projects that already depend on them.
- How do I make icons accessible?
- If the icon carries meaning on its own, give it a text label or an accessible name. If it sits beside text that already says the same thing, hide it from assistive technology so the label is not announced twice.
- Do I need to load an entire icon library?
- No, and you usually should not. Most projects use a handful of icons, so inlining just those as SVG avoids shipping thousands of unused glyphs. Load a full library only when you genuinely draw from across it.
