Component documentation

Icons

SVG icons

#

The SVG icon system is based on directly embedding SVG files into the markup. Within Bedrock, we use Pug to render these SVG's instead of having to inline them. You can either inline them, or build a solution that does it for you.

The SVG content should be contained in a .o-svg-icon div that also get an icon-specific class based on its name (for example: .o-svg-icon.o-svg-icon-add. This allows us to style and colorize specific icons.

The source SVG files can be found here.

add

archive

arrow-down

arrow-left

arrow-right

arrow-up

attachment

bar-chart-alt

bar-chart

bills

calendar

call

caret-down

caret-left-right

caret-left

caret-right

caret-up-down

caret-up

check

chevron-down

chevron-left

chevron-right

chevron-up

circle-add

circle-check

circle-error

circle-help

circle-information

circle-percent

clipboard-list

clock

close

contact-book

copy

delete

document-empty

document-missing

document

download

edit-alt

edit

email

external-link

eye-off

eye

facebook

favorite

filter

github

home

instagram

link

location

menu

message

options-horizontal

package

pen

percent

print

remove

save

search

send

settings

table

tag

three-rows

timer

twitter

user

users

warning