Objects
Here are the objects our GraphQL API supports.
Account
A Font Awesome account.
Field | Description | Auth |
---|---|---|
id (Integer ) | The account id. | profile_read |
email (String ) | The account email address. | profile_read |
proCdnReferrers (ProCdnReferrers) | Collection of domains that have been whitelisted for Pro CDN usage associated with this account. | domains_read |
kits (Kits) | All kits on this account. | kits_read |
kit (Kit) | The kit on this account, specified by token . | kits_read |
For the kit
field:
Argument | Type | Description |
---|---|---|
token | String! | required. A kit token, like “47997b2a2a” |
Download
Information about the the download assets for a release.
Field | Description |
---|---|
separatesWebDesktop (Boolean ) | Whether this release has separate download assets for Web and Desktop use cases. |
IconCount
Field | Description |
---|---|
free (Integer! ) | Count of Free icons in this release. |
pro (Integer! ) | Count of Pro icons in this release. |
IconUpload
A icon that has been uploaded to a kit.
An “icon upload” is also sometimes called a “custom icon”. They are icons that customers can upload to their own kits and use them just like any Font Awesome official icon.
Field | Description |
---|---|
name (String ) | Name of the icon, as specified by the customer who owns this kit. |
unicode (Integer ) | Value of the unicode, as an integer. This is generated by the system when the customer creates the icon upload. It is unique within a given kit, but two different kits may use the same unicode for different icons. |
version (Integer ) | Serial version number for this icon upload. If the customer changes the icon’s, path data, for example, the version number would change. Only the latest version is available via this API. |
width (String ) | The width as would be used in the third parameter of the viewBox attribute of an <svg> element. (Example above) |
height (String ) | The height as would be used in the third parameter of the viewBox attribute of an <svg> element. (Example above) |
pathData ([String!]! ) | The SVG path data for the icon. See details on the equivalent pathData field on the Svg type. |
html (String! ) | The SVG as an <svg> html element. |
iconDefinition (Json! ) | The svg formatted as an IconDefinition, usable in the Font Awesome JavaScript API. |
String! ) | Deprecated. Use the pathData field instead, which includes both primary and secondary paths for both monotone and duotone icons. The path field is only the primary path, which is insufficient for a duotone icon. |
An <i>
Element
The name
can suffice for building an <i>
using Font Awesome CSS class names.
You also need a CSS class to specify the familyStyle for the icon.
The familyStyle class for a monotone icon upload is always either fak
or fa-kit
.
The familyStyle class for a duotone icon upload is always either fakd
or fa-kit-duotone
.
If pathData.length == 2
, then it’s a duotone, else monotone.
Either of these could be added to a DOM that has either a Webfont/CSS or SVG/JS kit loaded.
CSS pseudo-element
Using the unicode
, an icon could be referenced using a CSS pseudo-element
HTML:
Suppose you want to use some monotone icon upload for .alpha
and some duotone icon for .beta
.
CSS:
(Replace e001
or e002
with the unicode
value as hex string: e.g. unicode.toString(16)
.)
Note that the font-family
for a monotone icon upload is always “Font Awesome Kit”; the font-family
for a duotone icon upload is always “Font Awesome Kit Duotone”.
More Examples
See also the examples below on getting an IconDefiniton
or <svg>
from an IconUpload
.
Icon
A specific Font Awesome icon.
Field | Description |
---|---|
id (String! ) | The identifying name of an icon, like pizza-slice or bicycle. |
changes ([String!]! ) | List of Font Awesome versions in which this icon was changed. |
label (String! ) | Usually, a more human readable representation of this icon. For example, the icon with id “coffee-pot” has a label of “Coffee Pot”. |
unicode (String! ) | Unicode by which this icon can be identified—just the hex digits as a string. For example, the value of this field for the coffee icon is “f0f4”. |
shim (Shim ) | A renaming or change in style for this icon between Font Awesome 4 and Font Awesome 5/6. |
familyStylesByLicense (FamilyStylesByLicense! ) | An object describing the families and styles of this icon by license type (Free and Pro). |
svgs ([Svg! ]) | SVGs for this icon. |
aliases (Aliases ) | Aliases for this icon. |
[String!]! ) | Deprecated. Use the familyStylesByLicense field instead. List of Font Awesome styles of this icon, i.e. “solid”, “regular”, “light”, “thin”, “duotone”, or “brands”. Note: This object does not include our new Sharp family’s solid style. |
Membership! ) | Deprecated. Use familyStylesByLicense field instead. An object describing the styles of this icon by license type (Free and Pro). Note: This object does not include our new Sharp family’s solid style. |
For the svgs
field:
Argument | Type | Description |
---|---|---|
filter | SvgsFilter | optional. By default, all available SVGs allowed by the scopes on the auth token used on the request are included. |
Authorization Scopes and the svgs
Field
The auth token used for the query request authorizes the selection of a given familyStyle based on its Authorization Scopes.
For example, the Classic Light familyStyle is only available when the auth token includes the svg_icons_pro
scope.
If the auth token has only the svg_icons_free
scope, then Classic Light icons will not be returned by this field, regardless of the filter
arg.
Font Awesome Free SVGs require an auth token with the svg_icons_free
scope.
Reduce Query Complexity by Filtering SVG familyStyles
Selecting the svgs
field with the default of all familyStyles will often result in a query that is too complex. Especially when selecting svgs
for all icons
under a release
.
Learn more about managing complexity here.
Here’s an example of query that uses filter
to include only the Sharp Light and Duotone Solid familyStyles:
The values for family
and style
here are uppercase because they are enum variants. Only valid values are available as variants.
See notes on the Family
and Style
types below.
SvgsFilter
An object declaring which familyStyles to include in an svgs filter.
Field | Description |
---|---|
familyStyles (FamilyStyleFilter! ) | A list of objects having keys of family and style . Each object declares one familyStyle to include in the filter. |
FamilyStyleFilter
An object declaring a single familyStyle to include in an svgs filter.
Field | Description |
---|---|
family (Family! ) | A family. |
style (Style! ) | A style. |
Family
An enum with variants corresponding to Font Awesome official families.
These are the only values that are allowed for family
in SvgsFilter
.
CLASSIC
DUOTONE
SHARP
Style
An enum with variants corresponding to Font Awesome official styles.
These are the only values that are allowed for style
in SvgsFilter
.
BRANDS
DUOTONE
LIGHT
REGULAR
SOLID
THIN
Svg
The SVG data for a specific Font Awesome icon, in one familyStyle.
The various separate fields can be used to construct an <svg>
HTML element or an IconDefinition
for use
in the Font Awesome JavaScript API. Alternatively, the html
field provides a fully formed <svg>
HTML element,
and the iconDefinition
field provides a fully formed JSON object that can be used as an IconDefinition
in the JavaScript API.
Field | Description |
---|---|
familyStyle (FamilyStyle! ) | The familyStyle of the SVG. |
height (Int! ) | The height of the SVG viewBox. |
width (Int! ) | The width of the SVG viewBox. |
html (String! ) | The svg formatted as an html <svg> element. |
iconDefinition (Json! ) | The svg formatted as an IconDefinition, usable in the Font Awesome JavaScript API. |
pathData ([String!]! ) | Each item is a value for a d attribute in an svg <path> element. A monotone icon has exactly one path, the primary path. A duotone icon always has two paths. When duotone, the first list element corresponds to the icon’s secondary path, and the second list element corresponds to the icon’s primary path. Heads up! This might seem counterintuitive: the first path (at list index 0) is the secondary layer for a duotone icon. Either path may be an empty string, indicating no path for that layer. Some duotone icons have only a primary path, while other duotone icons have only a secondary path. |
Constructing an IconDefinition
You might want an IconDefinition for use in the JavaScript API or the React component, for example.
You could get that by simply selecting the iconDefinition
field.
Or you could construct one from the component parts.
Or an abstract:
Constructing SVG elements
You might want an <svg>
element for an SVG. You could get that by selecting the html
field. This is formatted in the standard way all Font Awesome SVGs are formatted, including any styling necessary for duotone SVGs.
Or you could construct an <svg>
element from the component parts like the following example.
Notice that monotone and duotone SVGs are constructed quite differently. You can detect whether it’s a monotone or duotone SVG by its pathData
.
When pathData
has length == 1
, the one element is the primary path of a monotone SVG. When it has length == 2
, the elements are [secondary, primary]
.
A secondary path is always written first.
To make the SVG work with Font Awesome’s support styling, add class="svg-inline--fa"
and load the svg-with-js.css
stylesheet.
Kit
Metadata about a Font Awesome Kit.
Field | Description | Auth |
---|---|---|
name (String! ) | User-assignable name for the kit, like a nickname. When a kit is created, its initial name is just the token. | |
token (ID! ) | The token identifies this kit and is used in the URL for the Kit’s embed code. | |
status (String! ) | A value of “published” indicates that the kit is live and usable. | |
licenseSelected (String! ) | Either “free” or “pro”, indicating whether this kit will be able to load Pro icons, or only Free icons, and how they’ll be loaded, since Pro kits use some additional loading optimizations. | |
technologySelected (String! ) | Either “webfonts” or “svg”. | |
version (String! ) | The Font Awesome version that this kit loads. May be a semantic version like “6.1.2”, or one of the symbolic version ranges, like “5.x” or “6.x”. 5.x means the latest version 5; 6.x. means the latest version 6. If it’s one the symbolic version ranges, it can be resolved to the current semantic version by querying the kit’s release.version field. | |
minified (Boolean! ) | Whether this kit loads minified assets. | |
domains ([String!]! ) | List of domains, possibly involving wildcards, which are valid Origin domains for which to load this kit. | domains_read |
autoAccessibilityEnabled (Boolean! ) | Whether the Auto-Accessibility features are enabled for this kit. | |
shimEnabled (Boolean! ) | Whether Font Awesome 4 compatibility is enabled for this kit. | |
iconUploads ([IconUpload] ) | List of IconUpload objects on this kit. | |
release (Release! ) | The release of Font Awesome this Kit’s version is set to. If the version field is set to a symbolic version range (like “5.x” or “6.x”), this release will be set to the specific latest version. |
Membership (Deprecated)
As of Font Awesome 6.2.0, use the familyStylesByLicense
field of type FamilyStylesByLicense
, which is family-aware, including the Sharp family.
Objects of this type include only legacy style names. They never include the family/style combination of “Sharp Solid”, for example.
Indicates for each license type, in which legacy styles this icon appears.
Field | Description |
---|---|
free ([String!]! ) | A list of (legacy) styles in which this icon appears in Font Awesome Free. Free icons normally only appear in the “solid” style. Some also appear in the “regular” style for closer visual equivalence with Font Awesome 4. For icons that do not appear in Font Awesome Free at all, like alicorn, this will be an empty list. |
pro ([String!]! ) | A list of (legacy) styles in which this icon appears in Font Awesome Pro. Pro icons normally appear in all available styles. |
FamilyStyle
A combination of family and style.
As of Font Awesome 6.2.0, every style is in a family. The original legacy Font Awesome styles - Solid, Regular, Light, and Thin - are in the Classic family.
Field | Description |
---|---|
family (String! ) | A family name, like “classic”, “duotone”, or “sharp”. |
style (String! ) | A style name, like “solid”, “regular”, “light”, “thin”, or “brands”. |
prefix (String! ) | A prefix, like “fas” (for the Classic Solid familyStyle), or “fasl” (for the Sharp Light familyStyle). A prefix is a single term that distinctly identifies a familyStyle. |
Custom icons (also known as iconUploads
) have a family of “kit” for monotone icons, or “kit-duotone” for duotone icons. Both have a style of “custom”.
The combination of family
and style
distinctly identifies a Font Awesome familyStyle.
A single prefix also distinctly identifies a familyStyle. Therefore, maps could be created, mapping in either direction:
prefix => {family, style}
{family, style} => prefix
Duotone is its own family. One style was introduced to that family in Font Awesome 5: Duotone Solid.
Brands is a style in the Classic family.
Here’s an example of the Duotone (Solid) FamilyStyle
object:
An example for (Classic) Brands:
An example for Sharp Solid:
An example for Kit Custom:
An example for Kit Duotone Custom:
FamilyStylesByLicense
Indicates for each license type, in which families and styles this icon appears.
Field | Description |
---|---|
free ([FamilyStyle!]! ) | A list of families and styles in which this icon appears in Font Awesome Free. Free icons normally only appear in the “classic” family and “solid” style. Some icons also appear in the “classic” family and “regular” style for closer visual equivalence with Font Awesome 4. Brand icons appear in the “classic” family and “brands” style. For icons that do not appear in Font Awesome Free at all, like alicorn, this will be an empty list. |
pro ([FamilyStyle!]! ) | A list of families and styles in which this icon appears in Font Awesome Pro. Pro icons normally appear in all available families and styles. |
ProCdnReferrers
Collection of domains that have been whitelisted for Pro CDN usage associated with the authenticated account.
Field | Description | Auth |
---|---|---|
hostnames ([String] ) | List of domain names. | domains_read required |
limit (Integer ) | Limit of the number of domains allowed to be whitelisted for this account. | domains_read required |
active (Boolean ) | Whether this domain whitelist is active. | domains_read required |
Release
Metadata about a given release of Font Awesome, identified by version
.
Field | Description |
---|---|
date (String! ) | The date of the release, in iso8601 format (YYYY-MM-DD), like this: 2020-03-23 |
isLatest (Boolean! ) | Whether this release, at the time of this query’s execution, is the latest available Font Awesome release. Pre-releases, alphas, and betas do not get included. |
download (Download!) | Metadata about the download formats available for this release. |
iconCount (IconCount!) | Metadata about icon counts in Free vs. Pro in this release. |
srisByLicense (SrisByLicense!) | For each license type—free and pro—provides Subresource Integrity hashes for each CDN resource available in this release. |
version (String! ) | The major.minor.patch version number that identifies this release. Example: 5.13.0 |
icons ([Icon!]! ) | All icons in this release. |
icon (Icon ) | A single icon in this release, selected by name. Must be lower case and match exactly. |
familyStyles ([FamilyStyle!]! ) | All familyStyles in this release. |
For the icons
field:
Argument | Type | Description |
---|---|---|
license | String | may be “free” or “pro”. “free” includes icons available in Font Awesome Free. “pro” includes icons available only in Pro, such as alicorn. Omit this argument to return all icons. |
For the icon
field:
Argument | Type | Description |
---|---|---|
name | String! | required. The name of the icon, like “mug-saucer” or “avocado”. It could be either the id of an icon, or any name alias. |
Selecting Icons By Name
Use the icon
field on a release
object to select a specific icon by name.
For fuzzy searching that includes word associations,
beyond simple text matching on icon names, use the
search
field.
You can use either an icon’s id
or any of its name aliases
as the value of the icon
field’s name
argument. It must match exactly.
For example, this will select the mug-saucer
icon with its unicode:
Multiple icons may be selected using GraphQL aliases The following query will select a few icons by name, with their iconDefinitions, for all available familyStyles:
Results will look like:
Notice that two of them have the same id
of mug-saucer
. That’s because
“coffee”, the name selected for the coffee
object, is an alias for “mug-saucer”:
two names for the same icon.
Shim
A shim to support Version 4 syntax.
A shim helps to achieve compatibility with Font Awesome 4 icon references on a Font Awesome 5 or 6 installation. Ideally, users will upgrade all icon references to use the newer syntax. But Font Awesome 4 is still commonly in use, and is sometimes difficult to upgrade. Shims can ease the upgrade path.
Learn more about Version 4 compatibility.
What shims can do
-
Some icons that appear in Font Awesome 4 have been renamed. A shim can map the Version 4 icon name to the Version 5/6 icon name automatically.
-
For some Version 4 icons, their visual appearance matches the Regular style better than the Solid style. A shim can automatically change these icons to use the Regular style.
-
Font Awesome 5/6 puts all brand-related icons into a separate Brands style; Font Awesome 4 did not. A shim can map Version 4 brand icons into the Font Awesome 5 Brand style.
Examples
Icons with no shims
Examples of icons with no shims include “intersection” and “coffee”.
The “intersection” icon first appeared in Font Awesome 5, and therefore has no shim.
The “coffee” icon appeared prior to Font Awesome 5/6, yet because its equivalent form in Font Awesome 5/6 is in the Solid (fas) style, and because that is the default style in Font Awesome 5/6, no shim is required.
Icons with shims
Examples of icons with shims include “bluetooth”, “bath”, and “address-book”.
The “bluetooth” icon’s name is the same in Font Awesome 4 and 5/6, but because it is a brand icon, and all brand icons appear in the Font Awesome 5 Brand (fab) style, the shim exists to map it into that style.
The “bath” icon in Font Awesome 5/6 is equivalent to the icon that was called “bathtub” in Font Awesome 4. The shim maps from the old name to the new name.
The “address-book” icon is equivalent to what was called “address-book-o” in Font Awesome 4. Its name change in Font Awesome 5/6 indicates a naming convention change. Instead of the “-o” in the icon name, indicating an “outline” style for some icons in Font Awesome 4, Font Awesome 5/6 has a Regular (far) style and all icons have Regular style variants.
Since the Regular (far) style is a non-default style in Font Awesome 5/6, the shim must not only map the icon’s name from “address-book-o”, but also its style into the Font Awesome 5/6 Regular (far) style.
Field | Description |
---|---|
id (String! ) | The Version 4 name of the icon. Example: the shim for the Font Awesome 5 “bath” icon has an id of “bathtub”, because this icon was called “bathtub” in Font Awesome 4. |
name (String ) | The Version 5/6 name of the icon. If this field is null , it means the Version 4 and Version 5/6 icon names are the same. In that case, the shim’s prefix must hold the significant difference. |
prefix (String ) | The style prefix of this icon in Font Awesome 5/6. For example, on the “address-book” icon, this will be “far”. If null , it means that the Version 5/6 equivalent for this icon is in the default Solid style, whose prefix is “fas”. |
SRI
A Subresource Integrity hash value for a CDN resource at a relative path.
Field | Description |
---|---|
path (String! ) | Relative path to a resource on a Font Awesome CDN. Example: css/all.css is a relative path to the stylesheet that loads all icons using the Webfonts with CSS technology. |
value (String! ) | The hash value of the contents of the resource indicated by path . |
For example, the value
of the contents of css/all.css
in Font Awesome 5.13.0 is:
SrisByLicense
An Sri collection for a Font Awesome release, organized by license: free or pro.
The relative path css/all.css
is valid on both the Free and Pro CDNs, but refers to two different resources with different contents, and therefore different hashes.
Field | Description |
---|---|
free ([Sri!]! ) | The set of Sri objects for all resources on the Free CDN for this release. |
pro ([Sri!]! ) | The set of Sri objects for all resources on the Pro CDN for this release. |
Aliases
Name and unicode aliases for a given icon.
Field | Description |
---|---|
[String!]! ) | A list of name aliases. |
UnicodeAliases ) | An object that may have various types of unicode aliases. Values are hexadecimal. |
Name Aliases
Name aliases are names for an icon, other than its id
.
From time to time, an icon will be renamed. That is to say, its id
is
changed from one value to another. When this happens, for compatibility,
the old id
becomes a name alias. Thus, users or applications that
have been using the older name for an icon, when updating to a new release, and
continuing to use that older name, will continue to get the expected icon by that name.
For example, the icon with the id
“mug-saucer” in Font Awesome 6.5.1 had
an id
of “coffee” in Font Awesome 5.15.4. When that icon was renamed to “mug-saucer”,
the name “coffee” was retained as an alias for the same icon. Therefore,
for most use cases, the two names can be used interchangeably. For example, when using
the names in CSS classes on HTML elements, in Font Awesome 6, the classes fa-coffee
and fa-mug-saucer
are equivalent.
UnicodeAliases
Unicode aliases are unicodes for an icon, or one of its duotone layers, other than the icon’s main unicode. Values are hexadecimal.
Field | Description |
---|---|
[String!]! ) | unicode aliases that each refer to a monotone icon or a “whole” duotone icon. |
[String!]! ) | unicode aliases that each refer to just the primary layer of a duotone icon. |
[String!]! ) | unicode aliases that each refer to just the secondary layer of a duotone icon. |
For example, as of Font Awesome 6.5.1, the icon named credit-card
has a main unicode of f09d
.
In Font Awesome 4.7.0 there was an icon class called fa-credit-card-alt
with a unicode of f283
.
In recent versions of Font Awesome, there is no icon called credit-card-alt
,
but for the sake of compatibility, the credit-card
icon has f283
as a unicode alias.
That icon also has credit-card-alt
as a name alias. Thus, when upgrading from Font Awesome 4
to Font Awesome 6, anywhere the f283
unicode or fa-credit-card-alt
class are used will get
the credit-card
icon.
There are also unicode aliases to provide compatibility with some standard unicode values, such as those in the ASCII range, as might be keyed on a computer keyboard.
For example, the icon named at
had a unicode value of f1fa
in Font Awesome 4 and 5.
As of Font Awesome 6, the unicodes for icons associated with many characters in the ASCII
range—such as the characters of the English alphabet, numbers, punctuation, and some
symbols—were changed to use their standard unicode values.
The standard unicode value for the @ character is 0x40. So in
Font Awesome 6, the at
icon was given the unicode value of (hex) 40
. But since it had been
f1fa
in previous releases, f1fa
is retained as a unicode alias for the at
icon.
There are also unicode aliases to provide compatibility with emoji standard unicode values.
For example, as of Font Awesome 6.5.1, the icon named face-grin
has a
unicode of f580
. That icon also has a unicode alias of 1f600
, because 1f600
is an
emoji standard unicode value for one of the smiley emojis.
There are three types of unicode aliases: composite, primary, and secondary. The names of the unicode alias types have to do with icon layers.
Composite type aliases are unicodes that refers to a “whole” icon. This is the main type of unicode alias. It’s the only type of unicode alias that’s relevant to all icons.
A monotone icon has only one layer. That one layer comprises the “whole” icon. Thus, composite is the only type of unicode alias that’s relevant to monotone icons.
A duotone icon may have both a primary and secondary layer (or it may have just one or the other). In Font Awesome 5, when the duotone style was introduced, for each icon, there were separate unicodes that referred to its primary and secondary layers. In order to render the “whole” icon, it was necessary to overlay the primary glyph on top of the secondary glyph. Each glyph was looked up by its corresponding unicode.
The primary and secondary unicode alias types refer to unicodes that were previously used to refer to the distinct layers of duotone icons. Thus, primary and secondary unicode aliases are only relevant to duotone icons.
Composite unicode aliases are also relevant to duotone icons, because in
Font Awesome’s Desktop OTF duotone fonts, duotone icons are encoded both “whole”,
as SVG glyphs (in the font’s SVG
table), as well as in separate glyphs for
each layer (in the font’s CFF
table). The different types of glyphs are used
in different use cases, usually depending on whether custom styling needs to
be applied.
(Most applications that support SVG fonts do not allow custom styles to be applied to SVG glyphs, but will allow custom styles to be applied to each standard glyph. See Duotone Icons on the Desktop for more info.)
SVG duotone glyphs include the whole icon—both layers properly aligned with the default styling. They are addressable using a single unicode: either the icon’s main unicode, or any composite unicode alias.
Duotone icons introduced in Font Awesome 6 do not have distinct unicodes assigned to their secondary layers, nor do they have secondary unicode aliases. As of Font Awesome 6, the normal way to lookup duotone secondary layers in both webfonts and desktop OTF fonts is to use ligatures. Ligatures are the only way to lookup duotone secondary layers for icons introduced in Font Awesome 6.
So while it might look like there are secondary unicode aliases for all duotone icons, look closely! They’re only available for those duotone icons that were introduced in Font Awesome 5, for compatibility.
See this blog post for more details and examples.