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.
path (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.
(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
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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.
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.
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.
Reduce Your Query Size with Prefix
Another way to reduce the size of your query results on the svgs field is to select only the prefix under familyStyle. If you
later need to resolve that prefix into a family and style, you could select the familyStyles field on a Release and build a lookup
table that maps prefix => {family, style}. See also the section on the FamilyStyle type.
SvgsFilter
An object declaring which familyStyles to include in an svgs filter.
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.
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.
// For a monotone icon, the path used in an IconDefinition is just a string.// For a duotone icon, it's a list, with the secondary path appearing first.// The pathData field selected from the GraphQL API is always a list.const path = pathData.length ==1? pathData[0]: pathData
// If using `width` and `height` from an `IconUpload`, those types are `String`// and must be parsed as numbers when using in an `IconDefinition`.// The svgs field returns integers for width and height.// This is one way to ensure they are parsed as numbers, in some context where// you might get properties for either.const widthInt =+width
const heightInt =+height
// The unicode in an IconDefinition is always the hexadecimal string representation.const unicodeHex = unicode.toString(16)const someIconDefinition ={"prefix":`${prefix}`,"iconName":`${name}`,"icon":[
widthInt,
heightInt,[],// no ligatures
unicodeHex,
path
]}// React component<FontAwesomeIconicon={ someIconDefinition }/>
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(opens new window) 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.
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)
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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:
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.
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.
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.
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
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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:
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.