Skip to main content

Font Awesome Pro & Free Icons Demo

See how Font Awesome Pro and Free icons work seamlessly with Nuxt UI components through Iconify integration

Font Awesome Solid Icons

House

Using fa6-solid:house icon

User

Using fa6-solid:user icon

Heart

Using fa6-solid:heart with custom color

Star

Using fa6-solid:star icon

Font Awesome Regular Icons

Heart (Regular)

Using fa6-regular:heart icon

Star (Regular)

Using fa6-regular:star icon

Font Awesome Brands Icons

GitHub

Using fa6-brands:github icon

Twitter

Using fa6-brands:twitter icon

Font Awesome Pro Solid Icons

House Pro

Using fa-pro-solid:house icon

User Pro

Using fa-pro-solid:user icon

Heart Pro

Using fa-pro-solid:heart with custom color

Star Pro

Using fa-pro-solid:star icon

Font Awesome Pro Regular Icons

Heart (Pro Regular)

Using fa-pro-regular:heart icon

Star (Pro Regular)

Using fa-pro-regular:star icon

File (Pro Regular)

Using fa-pro-regular:file icon

Folder (Pro Regular)

Using fa-pro-regular:folder icon

Font Awesome Pro Light Icons

House (Pro Light)

Using fa-pro-light:house icon

User (Pro Light)

Using fa-pro-light:user icon

Heart (Pro Light)

Using fa-pro-light:heart with custom color

Star (Pro Light)

Using fa-pro-light:star icon

Font Awesome Pro Duotone Icons

House (Pro Duotone)

Using fa-pro-duotone:house icon

User (Pro Duotone)

Using fa-pro-duotone:user icon

Heart (Pro Duotone)

Using fa-pro-duotone:heart with custom color

Star (Pro Duotone)

Using fa-pro-duotone:star icon

Style Comparison

Compare the same icon across different Font Awesome styles:

Free Solid
Free Regular
Pro Solid
Pro Regular
Pro Light
Pro Duotone

In Buttons and Components

CompletedPendingFailedFeatured
Font Awesome Pro Integration
You can use Font Awesome Pro icons in any Nuxt UI component that accepts an icon prop. Pro styles include: Solid, Regular, Light, and Duotone.
Pro Tip
Duotone icons have two-color styling that creates beautiful depth and visual hierarchy.