Icons

Available Icons

Usage

React

1. Install @hover/icons

   
   

   yarn add @hover/icons

   
   

2. Import icons from @hover/icons

   
   

   import { Icon, IconButton, Button } from '@hover/blueprint';

   import { iFeather, hExpand, iAirplay, iAlertCircle } from '@hover/icons';

   
   

3. Pass imported icons as icon prop to component(s)

   live

   
   

   <Stack alignItems="center" direction="row" spacing="500">

   <Icon icon={iFeather} />

   <IconButton fill="minimal" icon={hExpand} label="expand" shape="square" />

   <Button iconBefore={iAirplay} shape="box">

   AirPlay™

   </Button>

   <Icon color="danger.500" icon={iAlertCircle} size="large" />

   </Stack>

   
   

Bootstrap

1. Get the URL to the current version of the icons SVG sprite sheet

   
   

   https://blueprint.hover.to/assets/icons/all-0.21.0.svg

   
   

2. Append the desired icon ID as a # to the URL

   
   

   https://blueprint.hover.to/assets/icons/all-0.21.0.svg#i-airplay

   
   

3. Reference said URL with a SVG use tag

   Note

   This example uses relative URLs for the SVG asset because it they are available locally in the documentation. Make sure to use the absolute URL from step 2.

   live

   
   

   <div class="hstack gap-500">

   <svg class="icon" xmlns="http://www.w3.org/2000/svg">

   <use xlink:href="/icons/all.svg#i-feather" />

   </svg>

   <button

   class="btn btn-minimal-primary btn-icon btn-shape-box"

   type="button"

   >

   <svg class="icon" xmlns="http://www.w3.org/2000/svg">

   <use xlink:href="/icons/all.svg#h-expand" />

   </svg>

   </button>

   <button class="btn btn-primary btn-shape-box" type="button">

   <svg class="icon icon-inline" xmlns="http://www.w3.org/2000/svg">

   <use xlink:href="/icons/all.svg#i-airplay" />

   </svg>

   AirPlay™

   </button>

   <svg

   class="icon icon-large text-danger-500 m-0"

   xmlns="http://www.w3.org/2000/svg"

   >

   <use xlink:href="/icons/all.svg#i-alert-circle" />

   </svg>

   </div>