Skip to content

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