Font Awesome Icons¶

This page contains Font Awesome icon usage examples within the interface. By examining this page, you can review icon usage and live examples of related code blocks.

How to Use Icons¶

In Markdown Content¶

You can use Font Awesome icons directly in your markdown content using the following syntax:

Code:

:fontawesome-brands-github: GitHub Icon
:fontawesome-solid-rocket: Rocket Icon
:material-home: Material Design Icon

Result:
GitHub Icon
Rocket Icon
Material Design Icon

Icon Types¶

Font Awesome icons are organized into different styles:

Solid - :fontawesome-solid-*:
Regular - :fontawesome-regular-*:
Brands - :fontawesome-brands-*:

Material Design icons are also available: - Material - :material-*:

Commonly Used Icons¶

Icon	Code	Description
	`:fontawesome-solid-house:`	Home
	`:fontawesome-solid-bars:`	Menu
	`:fontawesome-solid-magnifying-glass:`	Search
	`:fontawesome-solid-gear:`	Settings
	`:fontawesome-solid-user:`	User Profile
	`:fontawesome-solid-bell:`	Notifications
	`:fontawesome-solid-envelope:`	Email/Messages
	`:fontawesome-solid-arrow-right:`	Next/Forward
	`:fontawesome-solid-arrow-left:`	Previous/Back

Status & Feedback¶

Icon	Code	Description
	`:fontawesome-solid-circle-check:`	Success/Complete
	`:fontawesome-solid-circle-xmark:`	Error/Failed
	`:fontawesome-solid-triangle-exclamation:`	Warning
	`:fontawesome-solid-circle-info:`	Information
	`:fontawesome-solid-spinner:`	Loading
	`:fontawesome-solid-ban:`	Forbidden/Blocked
	`:fontawesome-solid-clock:`	Time/Schedule
	`:fontawesome-solid-hourglass-half:`	In Progress

Development & Code¶

Icon	Code	Description
	`:fontawesome-solid-code:`	Code/Development
	`:fontawesome-solid-terminal:`	Terminal/CLI
	`:fontawesome-solid-bug:`	Bug/Debug
	`:fontawesome-solid-database:`	Database
	`:fontawesome-solid-server:`	Server
	`:fontawesome-solid-cloud:`	Cloud
	`:fontawesome-solid-code-branch:`	Git Branch
	`:fontawesome-solid-code-merge:`	Git Merge
	`:fontawesome-solid-download:`	Download
	`:fontawesome-solid-upload:`	Upload

File Types¶

Icon	Code	Description
	`:fontawesome-solid-file:`	Generic File
	`:fontawesome-solid-file-code:`	Code File
	`:fontawesome-solid-file-lines:`	Text File
	`:fontawesome-solid-file-image:`	Image File
	`:fontawesome-solid-file-pdf:`	PDF Document
	`:fontawesome-solid-file-zipper:`	Archive/Zip
	`:fontawesome-solid-folder:`	Folder

Actions¶

Icon	Code	Description
	`:fontawesome-solid-plus:`	Add/Create
	`:fontawesome-solid-pen:`	Edit
	`:fontawesome-solid-trash:`	Delete
	`:fontawesome-solid-copy:`	Copy
	`:fontawesome-solid-paste:`	Paste
	`:fontawesome-solid-share:`	Share
	`:fontawesome-solid-link:`	Link
	`:fontawesome-solid-eye:`	View/Visible
	`:fontawesome-solid-eye-slash:`	Hide/Invisible
	`:fontawesome-solid-lock:`	Lock/Secure
	`:fontawesome-solid-unlock:`	Unlock

Documentation¶

Icon	Code	Description
	`:fontawesome-solid-book:`	Documentation
	`:fontawesome-solid-bookmark:`	Bookmark
	`:fontawesome-solid-graduation-cap:`	Tutorial/Learning
	`:fontawesome-solid-lightbulb:`	Tips/Ideas
	`:fontawesome-solid-circle-question:`	Help/FAQ
	`:fontawesome-solid-list:`	List/Index
	`:fontawesome-solid-table:`	Table/Data
	`:fontawesome-solid-chart-line:`	Analytics/Stats

Brand Icons¶

Icon	Code	Description
	`:fontawesome-brands-github:`	GitHub
	`:fontawesome-brands-gitlab:`	GitLab
	`:fontawesome-brands-docker:`	Docker
	`:fontawesome-brands-python:`	Python
	`:fontawesome-brands-js:`	JavaScript
	`:fontawesome-brands-react:`	React
	`:fontawesome-brands-linux:`	Linux
	`:fontawesome-brands-windows:`	Windows
	`:fontawesome-brands-apple:`	Apple/macOS
	`:fontawesome-brands-chrome:`	Chrome
	`:fontawesome-brands-firefox:`	Firefox

Using Icons in Components¶

In HTML/Custom Components¶

Solid Rocket
Regular Star
GitHub Brand

In Alert Boxes¶

This is an informational message

Operation completed successfully

Please review before proceeding

An error occurred

In Feature Lists¶

Fast Performance

Optimized for speed
Secure by Design

Built with security best practices

Icon Sizes¶

Extra Small
Small
Normal
Large
2x
3x

Animated Icons¶

Loading
Syncing
Processing

Icon Colors¶

Success
Error
Warning
Info

Additional Resources¶

Font Awesome Icons