Icon

An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.

Summary
Uses Icons

See this kit in action in our sample UI

Icon Default


Icon Rotate


Icon Flip


Icon Animation

Spin


Pulse


A spinner icon can show a user that something is loading or saving.

Icon Pull


Icon Pull can be used to indicate that the user can perform a pull action.

Icon Border


Icon Sizes

Large

Small

XSmall



1x

2x

3x

4x

5x

6x

7x

8x

9x

10x


Icon Custom


Tips for Custom Icons

When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:

Attributes must be React compatible e.g. xmlns:xlink should be xmlnsXlink and so on. There should be no hyphenated attributes and no semi-colons!.

Fill colors with regards to g or path nodes, e.g. fill="black", should be replaced with currentColor ala fill="currentColor". Your mileage may vary depending on the complexity of your SVG.

Pay attention to your custom icon's dimensions and viewBox attribute. It is best to use a viewBox="0 0 512 512" starting point when designing instead of trying to retrofit the viewbox afterwards!

You must source your own SVG into component/view you are working on. This can easily be done in programmatic and maintainable ways.

Rails

Sending the absolute path to the icon prop results in an <SVG> tag within the working view.

Icon with FontAwesome Kit


Our Icon kit allows integration with FontAwesome's custom kit functionality out-of-the-box.

All you need to do is 3 things:
1) Import your custom-icon.js file as outlined in the FontAwesome docs.
2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon.
3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).

Icon Color


Pass any text, status, data, product, or category Playbook color token to the color prop to change any icon's color.


Things to Avoid

Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.

UI Samples using Icon Kit

Get the full picture. See how this kit is used in our samples.

Available Props

Props Type Values

max_width
array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

min_width
array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

z_index
array
1
2
3
4
5
6
7
8
9
10

number_spacing
array
tabular

shadow
array
none
deep
deeper
deepest

line_height
array
tightest
tighter
tight
normal
loose
looser
loosest

display
array
block
inline_block
inline
flex
inline_flex
none

cursor
array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction
array
row
column
rowReverse
columnReverse

flex_wrap
array
wrap
nowrap
wrapReverse

justify_content
array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self
array
auto
start
end
center
stretch

align_items
array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content
array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self
array
auto
start
end
center
stretch
baseline

flex
array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow
array
1
0

flex_shrink
array
1
0

order
array
1
2
3
4
5
6
7
8
9
10
11
12

position
array
relative
absolute
fixed
sticky

hover
array

border_radius
array
none
xs
sm
md
lg
xl
rounded

text_align
array
start
end
left
right
center
justify
justify-all
match-parent

overflow
array
visible
hidden
scroll
auto

truncate
array
1
2
3
4
5

left
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

top
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

right
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

bottom
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

vertical_align
array
baseline
super
top
middle
bottom
sub
text-top
text-bottom

overflow_x
array
visible
hidden
scroll
auto

overflow_y
array
visible
hidden
scroll
auto

margin
array
none
xxs
xs
sm
md
lg
xl

margin_bottom
array
none
xxs
xs
sm
md
lg
xl

margin_left
array
none
xxs
xs
sm
md
lg
xl

margin_right
array
none
xxs
xs
sm
md
lg
xl

margin_top
array
none
xxs
xs
sm
md
lg
xl

margin_x
array
none
xxs
xs
sm
md
lg
xl

margin_y
array
none
xxs
xs
sm
md
lg
xl

padding
array
none
xxs
xs
sm
md
lg
xl

padding_bottom
array
none
xxs
xs
sm
md
lg
xl

padding_left
array
none
xxs
xs
sm
md
lg
xl

padding_right
array
none
xxs
xs
sm
md
lg
xl

padding_top
array
none
xxs
xs
sm
md
lg
xl

padding_x
array
none
xxs
xs
sm
md
lg
xl

padding_y
array
none
xxs
xs
sm
md
lg
xl

classname
string

dark
boolean

group_hover
boolean

id
string

data
hashprop

aria
hashprop

html_options
hashprop

children
proc

style
hashprop

height
string

min_height
string

max_height
string
Props Type Values Default

border
boolean
false

fixed_width
boolean
true

flip
enum
horizontal
vertical
both

icon
string

custom_icon
string

inverse
boolean
false

list_item
boolean
false

pull
enum
left
right

pulse
boolean
false

rotation
enum
90
180
270

size
enum
lg
xs
sm
1x
2x
3x
4x
5x
6x
7x
8x
9x
10x

font_style
enum
far
fas
fab
fak
far

spin
boolean
false

color
string

tabindex
string

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.
Contribute on GitHub
As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power
Open Positions
About Power

Connect

Dribbble
Github
Connect Chat
© 2023-24, ALL RIGHTS RESERVED