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

Icon Default

import React from "react"

import { Icon } from 'playbook-ui'

const IconDefault = (props) => {
  return (
    <div>
      <Icon
          fixedWidth
          icon="user"
      />
    </div>
  )
}

export default IconDefault

Icon Rotate

import React from 'react'

import { Icon } from 'playbook-ui'

const IconRotate = (props) => {
  return (
    <div>
      <Icon
          fixedWidth
          icon="user"
          rotation={90}
          size="2x"
      />
      <Icon
          fixedWidth
          icon="user"
          rotation={180}
          size="2x"
      />
      <Icon
          fixedWidth
          icon="user"
          rotation={270}
          size="2x"
      />
    </div>
  )
}

export default IconRotate

Icon Flip

import React from 'react'

import { Icon } from 'playbook-ui'

const IconFlip = (props) => {
  return (
    <div>
      <Icon
          fixedWidth
          flip="horizontal"
          icon="question-circle"
          size="2x"
      />
      <Icon
          fixedWidth
          flip="vertical"
          icon="question-circle"
          size="2x"
      />
      <Icon
          fixedWidth
          flip="both"
          icon="question-circle"
          size="2x"
      />
    </div>
  )
}

export default IconFlip

Icon Animation

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

import React from 'react'

import { Icon } from 'playbook-ui'

const IconAnimate = (props) => {
  return (
    <div>
      <p>
        <Icon
            fixedWidth
            icon="spinner"
            size="2x"
            spin
        />
        {' '}
        <span>{'Spin'}</span>
      </p>
      <br />
      <p>
        <Icon
            fixedWidth
            icon="spinner"
            pulse
            size="2x"
        />
        {' '}
        <span>{'Pulse'}</span>
      </p>
    </div>
  )
}

export default IconAnimate

Icon Pull

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

import React from 'react'

import { Icon } from 'playbook-ui'

const IconPull = (props) => {
  return (
    <div>
      <Icon
          fixedWidth
          icon="arrow-left"
          pull="left"
          size="2x"
      />
      <Icon
          fixedWidth
          icon="arrow-right"
          pull="right"
          size="2x"
      />
    </div>
  )
}

export default IconPull

Icon Border

import React from 'react'

import { Icon } from 'playbook-ui'

const IconBorder = (props) => {
  return (
    <div>
      <Icon
          border
          fixedWidth
          icon="user"
          size="2x"
      />
    </div>
  )
}

export default IconBorder

Icon Sizes

import React from 'react'

import { Icon } from 'playbook-ui'

const IconSizes = (props) => {
  return (
    <div>
      <p>
        <Icon
            icon="user"
            size="lg"
        />
        {' '}
        <span>{'Large'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="sm"
        />
        {' '}
        <span>{'Small'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="xs"
        />
        {' '}
        <span>{'XSmall'}</span>
      </p>

      <br />
      <br />

      <p>
        <Icon
            icon="user"
            size="1x"
        />
        {' '}
        <span>{'1x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="2x"
        />
        {' '}
        <span>{'2x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="3x"
        />
        {' '}
        <span>{'3x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="4x"
        />
        {' '}
        <span>{'4x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="5x"
        />
        {' '}
        <span>{'5x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="6x"
        />
        {' '}
        <span>{'6x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="7x"
        />
        {' '}
        <span>{'7x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="8x"
        />
        {' '}
        <span>{'8x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="9x"
        />
        {' '}
        <span>{'9x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="10x"
        />
        {' '}
        <span>{'10x'}</span>
      </p>
    </div>
  )
}

export default IconSizes

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.

import React from 'react'

import { Icon } from 'playbook-ui'

const config = {
  icon: (
    <svg viewBox="0 -256 1792 1792"
        xmlns="http://www.w3.org/2000/svg"
    >
      <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
          <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
      </g>
    </svg>
  ),
}

const IconCustom = (props) => {
  return (
    <React.Fragment>
      <p>
        <Icon
            icon={config.icon}
        />
      </p>
      <p>
        <Icon
            icon={config.icon}
            rotation={90}
            size="2x"
        />
      </p>
      <p>
        <Icon
            icon={config.icon}
            size="3x"
            spin
        />
      </p>
      <p>
        <Icon
            icon={config.icon}
            size="5x"
        />
      </p>
      <p>
        <Icon
            flip="horizontal"
            icon={config.icon}
            size="5x"
        />
      </p>
    </React.Fragment>
  )
}

export default IconCustom

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).

import React from 'react'

import { Icon } from 'playbook-ui'

import 'your-directory/custom-icons.js'

const IconFaKit = (props) => {
  return (
    <div>
      <Icon
          fixedWidth
          fontStyle="fak"
          icon="powergon"
          size="5x"
      />
    </div>
  )
}

export default IconFaKit

Icon Color

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

import React from "react"

import { Icon, Flex } from 'playbook-ui'

const IconDefault = (props) => {
  return (
    <div>
      <Flex marginBottom="sm">
        <Icon
            color="primary"
            fixedWidth
            icon="user"
            size="2x"
        />
        <Icon
            color="data_4"
            fixedWidth
            icon="recycle"
            size="2x"
        />
        <Icon
            color="product_5_background"
            fixedWidth
            icon="product-roofing"
            size="2x"
        />
      </Flex>

      <Flex>
        <Icon
            color="light"
            fixedWidth
            icon="user"
            size="2x"
        />
        <Icon
            color="lighter"
            fixedWidth
            icon="recycle"
            size="2x"
        />
        <Icon
            color="link"
            fixedWidth
            icon="product-roofing"
            size="2x"
        />
      </Flex>
    </div>
  )
}

export default IconDefault

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.

Available Props

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