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.
The available fields provide all of the information needed to build and render a Font Awesome icon in any of several ways.
(In the following examples, ${width}
is pseudo-code that means to use the value of width
as returned by this API.)
IconDefinition object
An iconDefinition could be constructed for use in the JavaScript API or when using the React component.
const someIconDefinition = {
"prefix": "fak",
"iconName": `${name}`,
"icon": [
parseInt(`${width}`),
parseInt(`${height}`),
[], // no ligatures
unicode.toString(16),
`${path}`
]
}
// React component
<FontAwesomeIcon icon={ someIconDefinition }/>
Or an abstract:
import { icon } from '@fortawesome/fontawesome-svg-core'
icon(someIconDefinition).abstract
SVG element
A valid Font Awesome inline SVG can be built from the data in this object, for example:
<svg class="svg-inline--fa" viewBox="0 0 ${width} ${height}">
<path d="${path}" />
</svg>
An <i>
Element
The name
can suffice for building an <i>
using Font Awesome CSS class names:
<i class="fak fa-${name}"></i>
This could be added to a DOM that has either the JavaScript framework loaded with autoReplaceSvg enabled (in which case it will be automatically transformed into an <svg>
), or the Webfont with CSS technology loaded (in which case, it will be rendered from the loaded webfont).
Note that fak
is always used as the style prefix for Kit Icon Uploads.
CSS pseudo-element
Using the unicode
, an icon could be referenced using a CSS pseudo-element
HTML:
<ul class="fancy-list">
<li>Alpha</li>
<li>Beta</li>
</ul>
CSS:
.fancy-list {
list-style-type: none;
margin-left: 2.5em;
padding-left: 0;
}
.fancy-list li:before {
content: '\e001';
font-family: 'Font Awesome Kit';
margin-right: 0.25em;
}
(Replace e001
with the unicode
value as hex string: e.g. unicode.toString(16)
.)
Note that the font-family
for an icon upload is always "Font Awesome Kit".
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) |
path (String ) | SVG path data as would be used in the d attribute of an SVG <path> element. (Example above) |
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). |
[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. |
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". |
With 6.2.0, we also now have the Sharp family - the Sharp Solid style is available now, with the other styles coming soon. Duotone is also its own family, with one Style, Duotone Solid. And Brands is a style in the Classic family.
Here's an example of the Duotone (Solid) FamilyStyle
object:
{
family: "duotone",
style: "solid"
}
An example for (Classic) Brands:
{
family: "classic",
style: "brands"
}
An example for Sharp Solid:
{
family: "sharp",
style: "solid"
}
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. |
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. |
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 (opens new window) 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:
sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V
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. |