Icons
Our icon shapes are directly informed by our typography—mirroring its curves, sharp edges, and balanced proportions. This creates a cohesive visual language where icons and type feel naturally aligned. With even stroke widths and intentional detailing, the icons remain clear and readable at any size.
Icon index
The icons are designed on a 20px grid. We use a 2px line width. They should feel part of the same system.
- Sizes: Icons are available in 16px, 20px, and 24px
- Themes: Light and dark backgrounds support using theme variables
3d
action-menu
add-filled
add-outlined
add-structure
alert
apple
archive
arrow-back
arrow-down
arrow-forward
arrow-left
arrow-right
arrow-up
attach
baby
badge
bath
battery
bed
before-after
bell
big
blocked
blueprint
board-view
book
briefcase
cabinet
cabinets
calculator
calendar
camera
cash
ceiling-regular
ceiling-tall
cell-phone
checklist
checkmark
chevron-down
chevron-left
chevron-right
chevron-up
clock
close
close-filled
close-outlined
code
collapse
commercial
counter
countertops
create
create-filled
create-outlined
credit-card
damage
data
deck
decking
door
doors
down
download
draw
earth
edit
ellipsis
entry
equity
estimate
expand
exterior-front-left
external-link
figma
file
filter
fixtures
flash
flash-disabled
floor
floor-plan
flooring
folder
furniture
furniture
garage
garage-doors
github
grip
gutter
hash
health
heart-filled
heart-outlined
help-filled
help-outlined
home-filled
home-outlined
images
images-all
info
info-filled
inspiration
interior
interior-walls
invite
landscape
landscaping
light-bulb
lighting
lighting
link
list
loader
location
lock
logout
magic
map
material-list
measure
menu
message
minus
moon-dark
navigation
not-visible
note
office
one-medical
package
paint
paint
palette
pause
pause-circle
phone
play
play-circle
plus
pto
qr-code
railings
receipt
refresh
remove-outlined
residential
revert
roam
roof
roofing
roofline
save-file
save-filled
save-outlined
scale
scan
scan-floor
search
send
settings
share
shop
shutters
siding
sink
slack
slash
small
sort
split-horizontal
split-vertical
stairs
star-filled
stop-watch
storybook
sunlight
table
tag
thumbs-down
thumbs-up
transparency
trash
trim
trim
unlock
upload
upload-blueprint
upload-photo
user
user-filled
version-1
version-2
view-grid
view-grid-large
view-grid-medium
view-grid-small
view-single
visible
wall
wall-interior
walls
walls
water
web
wifi
window
windows
x-twitter
zoom-in
zoom-out
React
Install
yarn add @hoverinc/icons
Import
import { Icon, IconButton, Button } from '@hoverinc/design-system-react-web';import { iconUser, iconExpand, iconApple, iconAlert } from '@hoverinc/icons';
Usage
Pass imported icons as icon prop to component(s)
Bootstrap
Get the URL to the current version of the icons SVG sprite sheet.
https://blueprint.hover.to/assets/icons/all-1.6.0.svg
Append the desired icon ID as a # to the URL
https://blueprint.hover.to/assets/icons/all-1.6.0.svg#i-airplay
Usage
Reference URL with an 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.
Contributing New Icons
To add new icons to this repository, follow these steps.
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.
Add the svg file to the repo
Name the icon the same way its named in Figma, but in kebab case.
"User Filled" => user-filled.svg
Add the icon to packages/icons/assets/bauhaus.
Run the icon build command
yarn rp icons build:bauhaus
- The SVG components will be generated in the following locations:
packages/icons/src/bauhauspackages/icons/src/bauhaus/native
The icon list in the documentation application will be updated automatically.