Usage as a Font

You can use our icons as fonts

Import the CSS

Copy-paste the stylesheet link into your head to load our CSS


<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

This will load boxicons font into your webpage

HTML

To use an icon on your page, add a prefix bx- for regular icons, bxs- for filled variant of icons followed by the icon name and seperate class :


<i class='bx bx-user'></i>
<i class='bx bxs-user'></i>

Starter Template

Create an HTML document and copy-paste the starter template


<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Boxicons CSS -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<title>Hello, Boxicons!</title>
</head>
<body>
<h1>Hello, Boxicons!</h1>
<i class='bx bx-hot'></i>
<i class='bx bxs-hot'></i>
</body>
</html>