FontAwesome React API Reference
    Preparing search index...

    Interface TransformProps

    interface TransformProps {
        flip?: boolean | FlipProp;
        listItem?: boolean;
        pull?: PullProp;
        rotateBy?: boolean;
        rotation?: RotateProp;
        symbol?: FaSymbol;
        transform?: string | Transform;
    }

    Hierarchy (View Summary)

    Index

    Properties

    flip? listItem? pull? rotateBy? rotation? symbol? transform?

    Properties

    flip?: boolean | FlipProp

    Flip the icon horizontally, vertically or both.

    listItem?: boolean

    Simply wrap the icon instead, no need to pass this property.

    <ul className='fa-ul'>
      <li>
        <span className='fa-li'>
          <FontAwesomeIcon icon={['fas', 'check']} />
        </span>
        List item with icon
      </li>
    </ul>

    https://docs.fontawesome.com/web/style/lists

    pull?: PullProp

    Wrap text around the icon by pulling it left or right.

    rotateBy?: boolean

    Custom rotation is used to rotate the icon by a specific number of degrees, rather than the standard 90, 180, or 270 degrees available in the rotation property.

    To use this feature, set rotateBy to true and provide a CSS variable --fa-rotate-angle with the desired rotation angle in degrees.

    <FontAwesomeIcon
      icon="fa-solid fa-coffee"
      rotateBy
      style={{ '--fa-rotate-angle': '329deg' }}
    />

    https://docs.fontawesome.com/web/use-with/react/style#custom-rotation

    7.0.0

    rotation?: RotateProp

    The rotation property is used to rotate the icon by 90, 180, or 270 degrees.

    https://docs.fontawesome.com/web/use-with/react/style#rotation

    symbol?: FaSymbol

    The icon should render as an SVG symbol rather than a regular element.

    https://docs.fontawesome.com/web/use-with/react/style#use-svg-symbols

    transform?: string | Transform

    Apply a custom transform to the icon either using the built-in Transform config, or a CSS transform string.

    https://docs.fontawesome.com/web/use-with/react/style#power-transforms

    Settings

    On This Page

    Properties