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.

Rails
React

Icon Default

Code Example

import React from 'react'
import { Icon } from '../../'

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

export default IconDefault

Icon Rotate

Code Example

import React from 'react'
import { Icon } from '../../'

const IconRotate = () => {
  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

Code Example

import React from 'react'
import { Icon } from '../../'

const IconFlip = () => {
  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.

Code Example

import React from 'react'
import { Icon } from '../../'

const IconAnimate = () => {
  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.

Code Example

import React from 'react'
import { Icon } from '../../'

const IconPull = () => {
  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

Code Example

import React from 'react'
import { Icon } from '../../'

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

export default IconBorder

Icon Sizes

Code Example

import React from 'react'
import { Icon } from '../../'

const IconSizes = () => {
  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 Default Dark

Code Example

import React from 'react'
import { Icon } from '../../'

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

export default IconDefaultDark

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.

5.3.0

Icon

Things to Avoid