Font Awesome Icon Types and Categories

Font Awesome provides rich and diverse icons. To help users find and use them easily, these icons are organized according to different types and categories. This chapter will introduce Font Awesome's icon types and categories in detail.

Icon Style Types

In Font Awesome 6, icons are mainly divided into the following style types:

1. Solid Icons - fas

Solid icons are the most important icon type in Font Awesome, with solid fill effect. This is the type with the most icons in the free version.

Features:

• Prefix: fas
• Largest quantity, includes most commonly used icons
• Available for free
• Suitable for various scenarios

Examples:

<i class="fas fa-home"></i> <!-- Home -->
<i class="fas fa-user"></i> <!-- User -->
<i class="fas fa-heart"></i> <!-- Heart -->
<i class="fas fa-star"></i> <!-- Star -->
<i class="fas fa-search"></i> <!-- Search -->

2. Regular Icons - far

Regular icons have outline or thin line effect, contrasting with solid icons.

Features:

• Prefix: far
• Relatively fewer icons
• Some available for free
• Usually complements corresponding solid icons

Examples:

<i class="far fa-heart"></i> <!-- Outline heart -->
<i class="far fa-star"></i> <!-- Outline star -->
<i class="far fa-user"></i> <!-- Outline user -->
<i class="far fa-clock"></i> <!-- Outline clock -->
<i class="far fa-envelope"></i> <!-- Outline envelope -->

3. Brands Icons - fab

Brand icons contain logos of various well-known brands, such as social media, tech companies, operating systems, etc.

Features:

• Prefix: fab
• Contains many brand logos
• Available for free
• Used to represent brands or services

Examples:

<i class="fab fa-github"></i> <!-- GitHub -->
<i class="fab fa-facebook"></i> <!-- Facebook -->
<i class="fab fa-twitter"></i> <!-- Twitter -->
<i class="fab fa-google"></i> <!-- Google -->
<i class="fab fa-apple"></i> <!-- Apple -->
<i class="fab fa-microsoft"></i> <!-- Microsoft -->

4. Light Icons - fal

Light icons have thinner lines and lighter visual effect.

Features:

• Prefix: fal
• Only available in Pro version
• Thinner lines, lighter visual effect

5. Duotone Icons - fad

Duotone icons have two-color layering effect, creating richer visual presentation.

Features:

• Prefix: fad
• Only available in Pro version
• Has two-color layering effect

Examples:

<!-- Duotone icons require Pro version -->
<i class="fad fa-heart"></i>

Icon Categories

Font Awesome icons are detailedly classified by purpose and theme to help users find needed icons.

1. Accessibility

Contains icons related to accessibility, such as wheelchairs, braille, sign language, etc.

Example icons:

• fas fa-wheelchair - Wheelchair
• fas fa-braille - Braille
• fas fa-sign-language - Sign language
• fas fa-universal-access - Universal access

2. Alerts

Contains various warning and notification related icons.

Example icons:

• fas fa-exclamation-triangle - Warning triangle
• fas fa-exclamation-circle - Warning circle
• fas fa-exclamation - Exclamation mark
• fas fa-bell - Bell

3. Animals

Contains various animal-related icons.

Example icons:

• fas fa-dog - Dog
• fas fa-cat - Cat
• fas fa-horse - Horse
• fas fa-fish - Fish

4. Arrows

Contains various arrow and direction related icons.

Example icons:

• fas fa-arrow-up - Up arrow
• fas fa-arrow-down - Down arrow
• fas fa-arrow-left - Left arrow
• fas fa-arrow-right - Right arrow
• fas fa-arrows-alt - Fullscreen arrow

5. Brands

Contains various brand and social media icons.

Example icons:

• fab fa-google - Google
• fab fa-facebook - Facebook
• fab fa-twitter - Twitter
• fab fa-github - GitHub
• fab fa-linkedin - LinkedIn

6. Business

Contains icons related to business and office.

Example icons:

• fas fa-briefcase - Briefcase
• fas fa-building - Building
• fas fa-bullhorn - Megaphone
• fas fa-chart-line - Line chart

7. Chat

Contains icons related to chat and communication.

Example icons:

• fas fa-comment - Comment
• fas fa-comments - Multiple comments
• fas fa-comment-dots - Chat bubble
• fas fa-envelope - Envelope

8. Code

Contains icons related to programming and technology.

Example icons:

• fas fa-code - Code
• fas fa-terminal - Terminal
• fas fa-bug - Bug (debugging)
• fas fa-database - Database

9. Communication

Contains icons related to communication.

Example icons:

• fas fa-phone - Phone
• fas fa-mobile - Mobile
• fas fa-fax - Fax
• fas fa-paper-plane - Paper plane

10. Computers

Contains icons related to computer hardware.

Example icons:

• fas fa-desktop - Desktop
• fas fa-laptop - Laptop
• fas fa-tablet - Tablet
• fas fa-keyboard - Keyboard

11. Date & Time

Contains icons related to date and time.

Example icons:

• fas fa-calendar - Calendar
• fas fa-clock - Clock
• fas fa-hourglass - Hourglass
• fas fa-stopwatch - Stopwatch

12. Design

Contains icons related to design and creativity.

Example icons:

• fas fa-paint-brush - Paint brush
• fas fa-palette - Palette
• fas fa-camera - Camera
• fas fa-font - Font

13. Editors

Contains icons related to text editing.

Example icons:

• fas fa-bold - Bold
• fas fa-italic - Italic
• fas fa-underline - Underline
• fas fa-list - List

14. Education

Contains icons related to education.

Example icons:

• fas fa-book - Book
• fas fa-graduation-cap - Graduation cap
• fas fa-chalkboard - Blackboard
• fas fa-apple-alt - Apple

15. Emotions

Contains various facial expression and emotion related icons.

Example icons:

• fas fa-smile - Smile
• fas fa-frown - Frown
• fas fa-meh - Neutral
• fas fa-laugh - Laugh

16. Energy

Contains icons related to energy and electricity.

Example icons:

• fas fa-bolt - Lightning
• fas fa-sun - Sun
• fas fa-moon - Moon
• fas fa-wind - Wind

17. Files

Contains icons related to files and documents.

Example icons:

• fas fa-file - File
• fas fa-file-pdf - PDF file
• fas fa-file-image - Image file
• fas fa-folder - Folder

18. Finance

Contains icons related to finance and currency.

Example icons:

• fas fa-money-bill - Paper money
• fas fa-credit-card - Credit card
• fas fa-wallet - Wallet
• fas fa-piggy-bank - Piggy bank

19. Fitness

Contains icons related to fitness and sports.

Example icons:

• fas fa-running - Running
• fas fa-bicycle - Bicycle
• fas fa-swimmer - Swimming
• fas fa-dumbbell - Dumbbell

20. Food

Contains icons related to food and beverages.

Example icons:

• fas fa-utensils - Utensils
• fas fa-coffee - Coffee
• fas fa-wine-glass - Wine glass
• fas fa-pizza-slice - Pizza slice

Icon Search Tips

1. Using Official Icon Searcher

Visit Font Awesome Icon Library to search in following ways:

• Search by keywords
• Filter by category
• Filter by style
• Filter by version

2. Common Search Keywords

• arrow - Arrow
• user - User
• heart - Heart
• star - Star
• file - File
• chat - Chat
• social - Social
• brand - Brand

3. Icon Naming Patterns

Font Awesome icon naming follows certain patterns:

• Uses English words or phrases
• Multiple words separated by hyphens
• Names usually describe icon content or function
• For example: fa-home, fa-user-plus, fa-arrow-right

Icon Usage Recommendations

1. Choose Appropriate Icon Type

• For main function icons, use solid icons (fas)
• For secondary or auxiliary icons, you can use regular icons (far)
• For brand logos, use brand icons (fab)

2. Maintain Consistency

• Keep icon style consistent within the same project
• Avoid mixing different styles of similar icons
• Unify icon size and color scheme

3. Consider Semantics

• Choose icons that accurately express meaning
• Avoid using icons that might cause misunderstanding
• Add text descriptions when necessary

Through this chapter, you should have a comprehensive understanding of Font Awesome's icon types and categories. In the next chapter, we'll learn how to customize icon styles and appearance.