Components

Icons

Font Awesome 7 Pro glyphs, referenced directly — this kit has no Icon wrapper.

View in Figma

Sizes

<FontAwesomeIcon
  icon={faGear}
  style={{ fontSize: 16 }}
/>
<FontAwesomeIcon
  icon={faGear}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faGear}
  style={{ fontSize: 32 }}
/>

Regular vs Solid

<FontAwesomeIcon
  icon={faBell}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faBellSolid}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faCalendar}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faCalendarSolid}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faUser}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faUserSolid}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faGear}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faGearSolid}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faTrashCan}
  style={{ fontSize: 20 }}
/>
<FontAwesomeIcon
  icon={faTrashCanSolid}
  style={{ fontSize: 20 }}
/>

Reference glyphs

square-list
buildings
wrench
chart-line-up
square-sliders
boxes
help
bell
calendar
clock
user
settings
plus
minus
check
close
search
filter
download
edit
ellipsis
info
image
columns
sort
caret-down
external-link
sparkle
alert-circle
warning
trash
menu
Props
icon:IconDefinition
Glyph imported from @fortawesome/pro-regular-svg-icons (outline) or @fortawesome/pro-solid-svg-icons (filled). Components that take an icon (Button, IconButton, …) accept the same IconDefinition.
style={{ fontSize }}:number
Glyph size in px, set inline (this reference shows 16 / 20 / 32).