Interface FontAwesomeIconProps

interface FontAwesomeIconProps {
    icon: IconProp;
    beat?: boolean;
    beatFade?: boolean;
    border?: boolean;
    bounce?: boolean;
    className?: string;
    color?: string;
    fade?: boolean;
    fixedWidth?: boolean;
    flip?: boolean | FlipProp;
    gradientFill?:
        | { type: "linear" } & LinearGradient
        | { type: "radial" } & RadialGradient;
    inverse?: boolean;
    listItem?: boolean;
    mask?: IconProp;
    maskId?: string;
    pull?: PullProp;
    pulse?: boolean;
    rotateBy?: boolean;
    rotation?: RotateProp;
    shake?: boolean;
    size?: SizeProp;
    spin?: boolean;
    spinPulse?: boolean;
    spinReverse?: boolean;
    style?: CSSProperties & CSSVariables;
    swapOpacity?: boolean;
    symbol?: FaSymbol;
    tabIndex?: number;
    title?: string;
    titleId?: string;
    transform?: string | Transform;
    widthAuto?: boolean;
}

Hierarchy (View Summary)

AnimationProps
TransformProps
Omit<SVGAttributes<SVGSVGElement>, "children" | "mask" | "transform">
RefAttributes<SVGSVGElement>
- FontAwesomeIconProps

Properties

icon

icon: IconProp

The icon to render.

See

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

`Optional`beat

beat?: boolean

Makes the icon scale in and out continuously.

See

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

`Optional`beatFade

beatFade?: boolean

Applies both scaling and fading animations from beat and fade.

See

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

`Optional`border

border?: boolean

Applies a border to the icon

See

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

`Optional`bounce

bounce?: boolean

Makes the icon bounce up and down.

See

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

`Optional`className

className?: string

Any additional CSS classes to apply to the icon

`Optional`color

color?: string

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

`Optional`fade

fade?: boolean

Makes the icon fade in and out continuously.

See

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

`Optional`fixedWidth

fixedWidth?: boolean

Deprecated

Since

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.

See

FontAwesomeIconProps.widthAuto

`Optional`flip

flip?: boolean | FlipProp

Flip the icon horizontally, vertically or both.

`Optional`gradientFill

gradientFill?:
| { type: "linear" } & LinearGradient
| { type: "radial" } & RadialGradient

Creates a <linearGradient /> or <radialGradient /> element inside the icon svg, and applies it as a fill to the icon.

If you also provide a fill prop, the fill prop will take precedence over the gradient. Omit the fill prop to allow the gradient to be applied correctly.

Example

Linear Gradient Example:

<FontAwesomeIcon
  icon="coffee"
  gradientFill={{
    id: 'myGradient',
    type: 'linear',
    x1: '0%',
    y1: '0%',
    x2: '100%',
    y2: '0%',
    stops: [
      { offset: '0%', color: '#FF5F6D' },
      { offset: '100%', color: '#FFC371' },
    ],
  }}
/>

Example

Radial Gradient Example:

<FontAwesomeIcon
  icon="coffee"
  gradientFill={{
    id: 'myGradient',
    type: 'radial',
    r: '150%',
    cx: '30%',
    cy: '107%',
    stops: [
      { offset: '0', color: '#FDF497' },
      { offset: '0.05', color: '#FDF497' },
      { offset: '0.45', color: '#FD5949' },
      { offset: '0.6', color: '#D6249F' },
      { offset: '0.9', color: '#285AEB' },
    ],
  }}
/>

NOTE: Only supports one gradient type, providing both linear and radial gradient props will have undesired side-effects.

`Optional`inverse

inverse?: boolean

Invert the icon color.

See

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

`Optional`listItem

listItem?: boolean

Deprecated

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

Example

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

See

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

`Optional`mask

mask?: IconProp

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

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

`Optional`maskId

maskId?: string

Accessibility ID for the mask element

`Optional`pull

pull?: PullProp

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

`Optional`pulse

pulse?: boolean

Deprecated

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

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

See

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

`Optional`rotateBy

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.

Example

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

See

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

Since

7.0.0

`Optional`rotation

rotation?: RotateProp

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

See

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

`Optional`shake

shake?: boolean

Makes the icon shake.

See

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

`Optional`size

size?: SizeProp

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

`Optional`spin

spin?: boolean

Makes the icon spin 360deg clockwise continuously.

See

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

`Optional`spinPulse

spinPulse?: boolean

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

See

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

`Optional`spinReverse

spinReverse?: boolean

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

See

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

`Optional`style

style?: CSSProperties & CSSVariables

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

`Optional`swapOpacity

swapOpacity?: boolean

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

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

`Optional`symbol

symbol?: FaSymbol

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

See

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

`Optional`tabIndex

tabIndex?: number

`Optional`title

title?: string

Deprecated

Since

7.0.0

Starting in FontAwesome 7.0.0, icons are decorative by default. Instead of using a title prop, use the aria-label attribute instead.

See

https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility

`Optional`titleId

titleId?: string

Deprecated

Since

7.0.0

Starting in FontAwesome 7.0.0, icons are decorative by default. Instead of using a titleId prop, use an aria-label attribute instead.

See

https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility

`Optional`transform

transform?: string | Transform

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

See

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

`Optional`widthAuto

widthAuto?: boolean

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

See

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

Since

7.0.0

Interface FontAwesomeIconProps

Hierarchy (View Summary)

Index

Properties

Properties

icon

See

Optionalbeat

See

OptionalbeatFade

See

Optionalborder

See

Optionalbounce

See

OptionalclassName

Optionalcolor

Optionalfade

See

OptionalfixedWidth

Deprecated

Since

See

Optionalflip

OptionalgradientFill

Example

Example

Optionalinverse

See

OptionallistItem

Deprecated

Example

See

Optionalmask

See

OptionalmaskId

Optionalpull

Optionalpulse

Deprecated

See

OptionalrotateBy

Example

See

Since

Optionalrotation

See

Optionalshake

See

Optionalsize

Optionalspin

See

OptionalspinPulse

See

OptionalspinReverse

See

Optionalstyle

OptionalswapOpacity

See

Optionalsymbol

See

OptionaltabIndex

Optionaltitle

Deprecated

Since

See

OptionaltitleId

Deprecated

Since

See

Optionaltransform

See

OptionalwidthAuto

See

Since

Settings

On This Page

`Optional`beat

`Optional`beatFade

`Optional`border

`Optional`bounce

`Optional`className

`Optional`color

`Optional`fade

`Optional`fixedWidth

`Optional`flip

`Optional`gradientFill

`Optional`inverse

`Optional`listItem

`Optional`mask

`Optional`maskId

`Optional`pull

`Optional`pulse

`Optional`rotateBy

`Optional`rotation

`Optional`shake

`Optional`size

`Optional`spin

`Optional`spinPulse

`Optional`spinReverse

`Optional`style

`Optional`swapOpacity

`Optional`symbol

`Optional`tabIndex

`Optional`title

`Optional`titleId

`Optional`transform

`Optional`widthAuto