Icons
Available Icons
3d
add-filled
add-outlined
add-structure
alert
apple
archive
arrow-back
arrow-forward
arrow-left
arrow-right
attach
badge
bath
battery
bed
before-after
bell
big
blocked
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-outlined
collapse
commercial
counter
countertops
create
create-filled
create-outlined
damage
deck
decking
door
doors
down
download
edit
ellipsis
entry
estimate
expand
external-link
file
filter
fixtures
flash
flash-disabled
floor
floor-plan
flooring
folder
furniture
furniture
garage
garage-doors
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
lighting
lighting
link
list
location
lock
map
measure
menu
message
minus
navigation
not-visible
note
office
paint
paint
pause
pause-circle
phone
play
play-circle
plus
railings
refresh
remove-outlined
residential
revert
roam
roof
roofing
roofline
save-filled
save-outlined
scan
scan-floor
search
send
settings
share
shop
siding
sink
small
stairs
stop-watch
table
tag
trash
trim
trim
unlock
upload
upload-blueprint
upload-photo
user
user-filled
version-1
version-2
view-grid-large
view-grid-medium
view-grid-small
visible
wall
wall-interior
walls
walls
web
wifi
window
windows
zoom-in
Usage
React
-
Install @hover/icons
yarn add @hover/icons -
Import icons from @hover/icons
import { Icon, IconButton, Button } from '@hover/blueprint';import { iFeather, hExpand, iAirplay, iAlertCircle } from '@hover/icons'; -
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-0.31.0.svg -
Append the desired icon ID as a
#
to the URLhttps://blueprint.hover.to/assets/icons/all-0.31.0.svg#i-airplay -
Reference said URL with a SVG
use
tag
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
or16 x 16
.
- Not
- When selecting the layer of icon to export, select the box with space
(instead of the tightest possible bounding box).
-
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
- e.g. "User Filled" =>
- Add the properly named icon to
packages/icons/assets/bauhaus
.
- Name the icon the same way its named in figma, but in kebab case
-
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 - Run the following command: