Get Started on the Desktop

import { CardGrid, LinkCard } from '@astrojs/starlight/components'

You can use Font Awesome icons on the desktop in design mockups, presentations, and elsewhere in your desktop applications.

We'll cover what files and directories are contained in the desktop-use version of Font Awesome and details of using ligature-based fonts and SVG.

Before You Get Started

Make sure you've already:

What's in the Download?

Our Desktop-focused download contains the following directories and files:

Folders & files What They Are
/otfs Ligature-based font files for each style in Font Awesome
/svgs Individual optimized .svg vector files for each icon in Font Awesome (separated by style)
/svgs-full Individual square optimized .svg vector files for each icon in Font Awesome (separated by style)

Did You Know?

You can also download a customized Kit which will include any custom icons you've added, as well as Pro+ icons if you have a Pro+ plan. Get the details on using a Downloaded Kit

Install the Ligature-based Font Files

Get up and running using ligatures to insert icons into your documents by first installing all of the styles you'd like to use. Here's a rundown of what font file corresponds to which Font Awesome style:

Classic

Style Availability Font Files Preview
Solid Free or Pro /otfs/Font Awesome 7 Free-Solid-900.otf
Regular Free or Pro /otfs/Font Awesome 7 Free-Regular-400.otf
Light Pro only /otfs/Font Awesome 7 Pro-Light-300.otf
Thin Pro only /otfs/Font Awesome 7 Pro-Thin-100.otf

Duotone

Style Availability Font Files Preview
Solid Pro only /otfs/Font Awesome 7 Duotone-Solid-900.otf
Regular Pro only /otfs/Font Awesome 7 Duotone-Regular-400.otf
Light Pro only /otfs/Font Awesome 7 Duotone-Light-300.otf
Thin Pro only /otfs/Font Awesome 7 Duotone-Thin-100.otf

Sharp

Style Availability Font Files Preview
Solid Pro only /otfs/Font Awesome 7 Sharp-Solid-900.otf
Regular Pro only /otfs/Font Awesome 7 Sharp-Regular-400.otf
Light Pro only /otfs/Font Awesome 7 Sharp-Light-300.otf
Thin Pro only /otfs/Font Awesome 7 Sharp-Thin-300.otf

Sharp Duotone

Style Availability Font Files Preview
Solid Pro only /otfs/Font Awesome 7 Sharp-Duotone-Solid-900.otf
Regular Pro only /otfs/Font Awesome 7 Sharp-Duotone-Regular-400.otf
Light Pro only /otfs/Font Awesome 7 Sharp-Duotone-Light-300.otf
Thin Pro only /otfs/Font Awesome 7 Sharp-Duotone-Thin-100.otf

Brands

Style Availability Font Files Preview
Brands Free /otfs/Font Awesome 7 Brands-Regular-400.otf

Chisel

Style Availability Font Files Preview
Regular Pro+ only /otfs/Font Awesome 7 Chisel-Regular-400.otf

Etch

Style Availability Font Files Preview
Solid Pro+ only /otfs/Font Awesome 7 Etch-Solid-900.otf

Jelly

Style Availability Font Files Preview
Regular Pro+ only /otfs/Font Awesome 7 Jelly-Regular-400.otf
Fill Regular Pro+ only /otfs/Font Awesome 7 Jelly-Fill-Regular-400.otf
Duo Regular Pro+ only /otfs/Font Awesome 7 Jelly-Duo-Regular-400.otf

Notdog

Style Availability Font Files Preview
Solid Pro+ only /otfs/Font Awesome 7 Notdog-Solid-900.otf
Duo Solid Pro+ only /otfs/Font Awesome 7 Notdog-Duo-Solid-900.otf

Slab

Style Availability Font Files Preview
Regular Pro+ only /otfs/Font Awesome 7 Slab-Regular-400.otf
Press Regular Pro+ only /otfs/Font Awesome 7 Slab-Press-Regular-400.otf

Thumbprint

Style Availability Font Files Preview
Light Pro+ only /otfs/Font Awesome 7 Thumbprint-Light-300.otf

Utility

Style Availability Font Files Preview
Semibold Pro+ only /otfs/Font Awesome 7 Utility-Semibold-600.otf
Fill Semibold Pro+ only /otfs/Font Awesome 7 Utility-Fill-Semibold-600.otf
Duo Semibold Pro+ only /otfs/Font Awesome 7 Utility-Duo-Semibold-600.otf

Whiteboard

Style Availability Font Files Preview
Semibold Pro+ only /otfs/Font Awesome 7 Whiteboard-Semibold-600.otf

Kit-Based Custom Icons

If you're using a Font Awesome Kit and have added custom icons.

Style Availability Font Files
Custom Icons Pro Kits + Icon Download only /otfs/Font Awesome Kit [kit-ID]-Regular-400.otf
Custom Duotone Icons Pro Kits + Icon Download only /otfs/Font Awesome Kit [kit-ID]-Duotone-Regular-400.otf

You'll want to install these into the Font Manager that your operating system uses to manage fonts. For Macs, that is often Font Book or FontBase. For Windows, it's the Fonts control panel. Also, depending on your operating system and management software, **make sure that you've activated/enabled these fonts in the Font Manager once they are installed**. They will only be available to use in your apps if they have been activated.

Not sure how to install fonts?

Check out these PC and Mac help articles for more details and guidance.

Enable Ligatures

Many desktop programs have a setting for enabling ligatures. Most of the time, we find it's on by default, but if you're having trouble with ligatures, you might want to check that ligatures are turned on.

We have instructions for a few common applications listed below, but you should check the documentation for your specific program and version.

Adobe Creative Cloud

In Photoshop, you can toggle ligatures using the "fi" button in the Character palette. In Illustrator, you can find the "fi" button in the Open Type palette.

Windows + Microsoft Office

To enable ligatures in Microsoft, open your font settings by hitting Ctrl-D. In the Advanced tab under Open Type Features, set ligatures to "All" and make sure the "Use contextual alternates" checkbox is checked. And make sure your document isn't in compatibility mode.


Go Add Some Icons

Our icons are now ready to do your Desktop project's bidding. Learn how to add them to your project and then use their power to bring order and style to your designs!

Add Icons As SVGs
Add Icons as Glyphs
Add Icons as Ligatures
Duotone Icons on the Desktop
    No results