Bootstrap Icons
Bootstrap Icons is a free icon set you can use as a font, SVG sprites or inline SVG.
In this page:
Syntax
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@version/font/bootstrap-icons.css">
<i class="bi bi-icon-name"></i>Bootstrap Icons
Include the stylesheet from a CDN and use an i element with classes such as bi bi-house or bi bi-heart-fill. Icons inherit font size and colour, so text utilities like fs-2 and text-danger style them.
Icons alone need an accessible label using aria-label or visually-hidden text.
Note:
Icons that carry meaning need text alternatives for screen readers.
Example: Bootstrap Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet">
<div class="container">
<i class="bi bi-house fs-2 me-2"></i>
<i class="bi bi-heart-fill fs-2 text-danger me-2"></i>
<button class="btn btn-primary"><i class="bi bi-cloud-download" aria-hidden="true"></i> Download</button>
<button class="btn btn-outline-secondary" aria-label="Settings"><i class="bi bi-gear"></i></button>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting the icon font stylesheet
- Icon-only buttons without labels
- Sizing icons with images
Chapter Summary
- Add the bootstrap-icons stylesheet
- Use i.bi.bi-name
- Icons inherit size and colour
- Add accessible labels
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: