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. This will load boxicons font into your webpage.


<link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>


<link href='https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css' rel='stylesheet'>

The fonts are hosted on a reliable CDN to serve your websites with ease.

PRO users

You can grab your CDN link from our usage page, where you can select which pack, style, and weight you prefer for your project.

The Usage link can be found in the icon mini-viewer and in the avatar dropdown.

HTML

To use an icon on your page, use the icon’s class name, prefixed by what type of icon it is: bx- for regular icons, and bxs- for filled (solid) icons.


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

Starter Template

To use the starter template, create an HTML document with these contents:


<!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://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
<link href='https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css' rel='stylesheet'>
 
<title>Hello, Boxicons!</title>
</head>
<body>
<h1>Hello, Boxicons!</h1>
<i class='bx bxs-hot'></i>
<i class='bxl bx-twitter-x'></i>
</body>
</html>

You can also access the SVG’s from our CDN at:


https://cdn.boxicons.com/svg/<PACK_NAME>/<ICON_NAME_WITH_PREFIX_BX_OR_BXS>.svg
 
<img src="https://cdn.boxicons.com/svg/basic/bx-8-ball.svg" alt="8-ball"/>
<img src="https://cdn.boxicons.com/svg/brands/bx-facebook.svg" alt="facebook"/>