Icons Sizing and Coloring
Icon-font icons are sized and colored with font-size and color exactly like text, while SVG icons are sized and colored with width, height, and fill or stroke, exactly like graphics.
Two Different Sizing Models
Because an icon font glyph really is a character, resizing and coloring it uses the same CSS properties as any paragraph: font-size and color. An SVG icon is a drawing, not a character, so it follows the CSS rules for graphics instead: width and height set its box, while fill and stroke paint its shapes.
Sizing and Coloring an Icon Font Icon
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
</head>
<body>
<style>
.icon-font-demo {
font-size: 48px;
color: seagreen;
}
</style>
<i class="bi bi-heart-fill icon-font-demo"></i>
</body>
</html>font-size scales the glyph exactly like it would scale a letter, and color paints it exactly like it would paint a word. Because both properties are inherited by default, an icon font icon will automatically match the size and color of the paragraph it sits inside unless you override it.
Sizing and Coloring an SVG Icon
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg class="icon-svg-demo" viewBox="0 0 24 24" fill="tomato">
<path d="M12 21s-6.7-4.35-9.5-8.5C.7 9.2 2 5 6 5c2.1 0 3.6 1.2 4.5 2.8C11.4 6.2 12.9 5 15 5c4 0 5.3 4.2 3.5 7.5C18.7 16.65 12 21 12 21z"/>
</svg>
<style>
.icon-svg-demo {
width: 64px;
height: 64px;
}
</style>
</body>
</html>width and height set the rendered box of the icon, while the viewBox attribute defines the coordinate system the artwork was drawn in, so the shape scales cleanly to any box size without pixelating. fill paints the shape's interior, the graphics equivalent of color - plain CSS color has no effect on an SVG shape unless the shape itself uses fill="currentColor".
Exercise: Icons Custom
What is a common way to add a custom icon so it can be recolored with regular CSS?
