Icon

Make it easier for users to perform a task or access an object

Usage

Grab graff-icons.svg from graff repository or create your own and linking to your document html then replace symbol-name with a preferred symbol name.

<svg class="icon">
    <use xlink:href="path/to/graff-icons.svg#symbol-name" />
</svg>

Collection

menu
menu-grid-o
menu-grid-r
menu-left
menu-right
chevron-up
chevron-right
chevron-down
chevron-left
arrow-top-left
arrow-up
arrow-top-right
arrow-right
arrow-bottom-right
arrow-down
arrow-bottom-left
arrow-left
more
more-vertical
close

Action

push-up
push-right
push-down
push-left
block
unblock
search
zoom-in
zoom-out
plus
minus
readme
share
send
comment
link
reply
forward
export
import
lock
unlock
bookmark
flag
clipboard
attachment
options
layout-grid
layout-list
minimize
maximize
log-off
thumbs-up
thumbs-down
download
upload

Social

facebook
instagram
twitter
youtube
github

Miscellaneous

sun
moon
bell
heart
home
user
printer
mail
phone
pin
shopping-bag
shopping-cart
briefcase
pen
code
eye
color-picker
qr
trash
globe
support

Appearance

Scale

Use --icon-scale variable to scale the icons. To scale globally, set up in :root selector.

<section class="flex flex-align-items-center flex-justify-content-start gap-medium">
    <svg class="icon" style="--icon-scale: .5">
        <use xlink:href="icons/graff-icons.svg#sun" />
    </svg>
    <svg class="icon" style="--icon-scale: .75">
        <use xlink:href="icons/graff-icons.svg#sun" />
    </svg>
    <svg class="icon">
        <use xlink:href="icons/graff-icons.svg#sun" />
    </svg>
    <svg class="icon" style="--icon-scale: 1.5">
        <use xlink:href="icons/graff-icons.svg#sun" />
    </svg>
    <svg class="icon" style="--icon-scale: 2">
        <use xlink:href="icons/graff-icons.svg#sun" />
    </svg>
</section>

Color

Wrap the <svg> tag in a container, then use color-* class to style icon.

<section class="flex flex-align-items-center flex-justify-content-start gap-medium">
    <span class="color-gray">
        <svg class="icon">
            <use xlink:href="icons/graff-icons.svg#sun" />
        </svg>
    </span>
    <a href="#" class="color-gray color-text@hover">
        <svg class="icon">
            <use xlink:href="icons/graff-icons.svg#sun" />
        </svg>
    </a>
</section>

Variables

Coming soon

Table of contents