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.33.0.svg

   
   

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

   
   

   https://blueprint.hover.to/assets/icons/all-0.33.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>

   
   

Contributing New Icons

To add new icons to this repository, follow these steps:

1. Export the SVG file from figma:

   • When selecting the layer of icon to export, select the box with space (instead of the tightest possible bounding box).
     • This ensures that there will be the intended space around the icon and that they all have the same uniform aspect ratio.
   • Be sure to copy the 20 x 20 version of the icon from figma
     • Not 24 x 24 or 16 x 16.

2. Add the svg file to the repo:

   • Name the icon the same way its named in figma, but in kebab case
     • e.g. "User Filled" => user-filled.svg
   • Add the properly named icon to packages/icons/assets/bauhaus.

3. Run the icon build command:

   • Run the following command: yarn rp icons build:bauhaus.
   • The SVG components will be generated in the following locations:
     • packages/icons/src/bauhaus
     • packages/icons/src/bauhaus/native
   • The icon list in the documentation application will be updated automatically.
   
   

   yarn rp icons build:bauhaus