@fortawesome/react-fontawesome

property beat

beat?: boolean | undefined;

• Makes the icon scale in and out continuously.

  See Also

  • https://docs.fontawesome.com/web/style/animate#beat

property beatFade

beatFade?: boolean | undefined;

• Applies both scaling and fading animations from beat and fade.

  See Also

  • https://docs.fontawesome.com/web/style/animate#beat-fade

property bounce

bounce?: boolean | undefined;

• Makes the icon bounce up and down.

  See Also

  • https://docs.fontawesome.com/web/style/animate#bounce

property fade

fade?: boolean | undefined;

• Makes the icon fade in and out continuously.

  See Also

  • https://docs.fontawesome.com/web/style/animate#fade

property pulse

pulse?: boolean | undefined;

• See Also

  • https://docs.fontawesome.com/web/style/animate#spin-utilities

  Deprecated

  Will be removed in a future version. Please use spinPulse instead.

  Makes the icon spin 360deg clockwise in 8 incremental steps.

property shake

shake?: boolean | undefined;

• Makes the icon shake.

  See Also

  • https://docs.fontawesome.com/web/style/animate#shake

property spin

spin?: boolean | undefined;

• Makes the icon spin 360deg clockwise continuously.

  See Also

  • https://docs.fontawesome.com/web/style/animate#spin

property spinPulse

spinPulse?: boolean | undefined;

• Makes the icon spin 360deg clockwise in 8 incremental steps.

  See Also

  • https://docs.fontawesome.com/web/style/animate#spin

property spinReverse

spinReverse?: boolean | undefined;

• When used in conjunction with spin or spinPulse, makes the icon spin in reverse.

  See Also

  • https://docs.fontawesome.com/web/style/animate#spin-utilities

property border

border?: boolean | undefined;

• Applies a border to the icon

  See Also

  • https://docs.fontawesome.com/web/use-with/react/style#bordered-icons

property className

className?: string | undefined;

• Any additional CSS classes to apply to the icon

property color

color?: string | undefined;

• The color of the icon. Can be any valid CSS color value

property fixedWidth

fixedWidth?: boolean | undefined;

• See Also

  • FontAwesomeIconProps.widthAuto

  Deprecated

  7.0.0

  Starting in FontAwesome 7.0.0, all icons are fixed width by default. This property will be removed in a future version.

  If you want to remove the fixed width to replicate the behavior of previous versions, you can set the new widthAuto property to true.

property icon

icon: IconProp;

• The icon to render.

  See Also

  • https://docs.fontawesome.com/web/use-with/react/add-icons

property inverse

inverse?: boolean | undefined;

• Invert the icon color.

  See Also

  • https://docs.fontawesome.com/web/use-with/react/style#invert-the-icon-color-to-white

property mask

mask?: IconProp | undefined;

• Grab the Mask utility when you want to layer two icons but have the inner icon cut out from the icon below so the parent element’s background shows through.

  See Also

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

property maskId

maskId?: string | undefined;

• Accessibility ID for the mask element

property size

size?: SizeProp | undefined;

• The size of the icon from a predefined set of sizes.

property style

style?: (CSSProperties & CSSVariables) | undefined;

• Any custom styles or CSS variable overrides for the icon element.

property swapOpacity

swapOpacity?: boolean | undefined;

• When using Duotone icons, this property will swap the opacity of the two colors. The first color will be rendered with the opacity of the second color, and vice versa

  See Also

  • https://docs.fontawesome.com/web/use-with/react/style#duotone-icons

property tabIndex

tabIndex?: number | undefined;

property title

title?: string | undefined;

• An accessibility title for the icon to be read by screen-readers or assistive technologies.

property titleId

titleId?: string | undefined;

• A unique ID for the accessibility title element.

property widthAuto

widthAuto?: boolean | undefined;

• When set to true, the icon will automatically adjust its width to only the interior symbol and not the entire Icon Canvas.

  See Also

  • https://docs.fontawesome.com/web/style/icon-canvas 7.0.0

property flip

flip?: FlipProp | boolean | undefined;

• Flip the icon horizontally, vertically or both.

property listItem

listItem?: boolean | undefined;

• Example 1

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

  See Also

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

  Deprecated

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

property pull

pull?: PullProp | undefined;

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

property rotateBy

rotateBy?: boolean | undefined;

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

  Example 1

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

  See Also

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

property rotation

rotation?: RotateProp | undefined;

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

  See Also

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

property symbol

symbol?: FaSymbol | undefined;

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

  See Also

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

property transform

transform?: string | Transform | undefined;

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

  See Also

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