# Objects Reference for objects available in the Font Awesome GraphQL API schema. > Here are the objects our GraphQL API supports. ## Account _A Font Awesome account._ | Field | Description | Auth | | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | | **id (`Integer`)** | The account id. | [profile_read](/apis/graphql/auth.md) | | **email (`String`)** | The account email address. | [profile_read](/apis/graphql/auth.md) | | **proCdnReferrers ([ProCdnReferrers](/apis/graphql/objects.md#procdnreferrers))** | Collection of domains that have been whitelisted for Pro CDN usage associated with this account. | [domains_read](/apis/graphql/auth.md) | | **kits ([Kits](/apis/graphql/objects.md#kit))** | All kits on this account. | [kits_read](/apis/graphql/auth.md) | | **kit ([Kit](/apis/graphql/objects.md#kit))** | The kit on this account, specified by `token`. | [kits_read](/apis/graphql/auth.md) | | **iconCollection ([IconCollection](/apis/graphql/objects.md#iconcollection))** | The [Icon Collection](/apis/graphql/objects.md#iconcollection) available to this account's subscription plan, for the requested Font Awesome `version`. Resolves to `null` if the account has no subscription plan, the plan has no associated Icon Collection, or the plan's Icon Collection is not present in the requested version's metadata. | [entitlements_read](/apis/graphql/auth.md) | For the `kit` field: | Argument | Type | Description | | -------- | --------- | ------------------------------------------ | | `token` | `String!` | _required_. A kit token, like "47997b2a2a" | For the `iconCollection` field: | Argument | Type | Description | | --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `version` | `String` | The Font Awesome release version whose metadata is consulted, like `"7.0.0"`. When omitted, defaults to the latest released version's metadata. | ## Aliases Name and unicode aliases for a given icon. | Field | Description | | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | | **names ([`[String!]!`](/apis/graphql/objects#name-aliases))** | A list of [name aliases](#name-aliases). | | **unicodes ([`UnicodeAliases`](/apis/graphql/objects.md#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 | | ----------------------------------------- | ------------------------------------------------------------------------------ | | **composite (`[String!]!`)** | unicode aliases that each refer to a monotone icon or a "whole" duotone icon. | | **primary (`[String!]!`)** | unicode aliases that each refer to just the primary layer of a duotone icon. | | **secondary (`[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](/desktop/add-icons/duotone-desktop.md) 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](https://blog.fontawesome.com/icon-unicodes-and-ligatures) for more details and examples. ## BuildType _An enum of the possible build types for [kit download](/apis/graphql/objects.md#kitdownload)._ | Variant | Description | | ------------- | ------------------- | | **`WEB`** | A web download. | | **`DESKTOP`** | A desktop download. | ## 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. | ## 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` - `SHARP_DUOTONE` - `CHISEL` - `ETCH` - `GRAPHITE` - `JELLY` - `JELLY_FILL` - `JELLY_DUO` - `MOSAIC` - `NOTDOG` - `NOTDOG_DUO` - `PIXEL` - `SLAB` - `SLAB_PRESS` - `SLAB_DUO` - `SLAB_PRESS_DUO` - `THUMBPRINT` - `UTILITY` - `UTILITY_FILL` - `UTILITY_DUO` - `VELLUM` - `WHITEBOARD` ## 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. The description of a family-style does not vary from one version of Font Awesome to another. |
Field
| Description | | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **family (`String!`)** | A family name, like "classic", "duotone", "sharp", or "sharp-duotone". | | **style (`String!`)** | A style name, like "solid", "regular", "light", "thin", or "brands". | | **label (`String!`)** | A human-readable label for this family-style, suitable for direct display in a UI. For example, "Sharp Solid", "Sharp Duotone Light", "Notdog Duo Solid". | | **prefix (`String!`)** | A prefix, like "fas" (for the Classic Solid family-style), or "fasl" (for the Sharp Light family-style). A prefix is a single term that distinctly identifies a family-style. Used as a CSS class or in the JavaScript API. | | **shorthand (`String!`)** | A single term that fully specifies a family-style, used for naming family-style-specific assets in CDN URLs and file paths inside kit zip archives. Legacy familyStyles are named only after their style—for example, `solid` as a style shorthand implies the Classic family. More recent shorthands include both family and style, like `sharp-duotone-light`, `whiteboard-semibold`, or `notdog-duo-solid`. | | **visualTags (`[VisualTag!]!`)** | List of visualTags for this family-style. | 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". They never have visual tags. The combination of `family` and `style` distinctly identifies a Font Awesome family-style. A single prefix also distinctly identifies a family-style. 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: ```css { family: "duotone", style: "solid", prefix: "fad", shorthand: "duotone" } ``` An example for (Classic) Brands: ```css { family: "classic", style: "brands", prefix: "fab", shorthand: "brands" } ``` An example for Sharp Solid: ```css { family: "sharp", style: "solid", prefix: "fass", shorthand: "sharp-solid" } ``` An example for Kit Custom: ```css { family: "kit", style: "custom", prefix: "fak", shorthand: "kit" } ``` An example for Kit Duotone Custom: ```css { family: "kit-duotone", style: "custom", prefix: "fakd", shorthand: "kit-duotone" } ``` ## FamilyStyleFilter _An object declaring a single family-style to include in an svgs filter._ | Field | Description | | ------------------------------------------------------ | ----------- | | **family ([`Family!`](/apis/graphql/objects.md#family))** | A family. | | **style ([`Style!`](/apis/graphql/objects.md#style))** | A style. | ## FamilyStylePair _An input object naming a complete family-style by both canonical parts. Used as the `pair` member of [`FamilyStyleSelector`](/apis/graphql/objects.md#familystyleselector)._ | Field | Description | | ---------------------- | ---------------------------------------------------------------------------------------- | | **family (`String!`)** | Lowercase canonical family name, e.g. `"classic"`, `"sharp"`. Max length: 25 characters. | | **style (`String!`)** | Lowercase canonical style name, e.g. `"solid"`, `"regular"`. Max length: 25 characters. | ## FamilyStylesByLicense _Indicates for each license type, in which families and styles this icon appears._ |
Field
| Description | | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **free ([`[FamilyStyle!]!`](/apis/graphql/objects#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!]!`](/apis/graphql/objects#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. | ## FamilyStyleSelector _An input object that selects a single family-style. Used as the `selector` argument of [`Kit.familyStyleMember`](/apis/graphql/objects.md#kit)._ Exactly one member must be supplied and non-null; the three forms are mutually exclusive. | Field | Description | | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | **pair ([`FamilyStylePair`](/apis/graphql/objects.md#familystylepair))** | A family name and style name together. | | **shorthand (`String`)** | A single shorthand term, e.g. `"solid"`, `"notdog-duo-solid"`. Max length: 25 characters. | | **prefix (`String`)** | A single prefix term, e.g. `"fas"`, `"fass"`. Max length: 25 characters. | For example, each of these selects the Classic Solid family-style: ```graphql familyStyleMember(selector: { pair: { family: "classic", style: "solid" } }) { ... } familyStyleMember(selector: { shorthand: "solid" }) { ... } familyStyleMember(selector: { prefix: "fas" }) { ... } ``` ## FamilyStyleSubset _A subsetted family-style, containing only some icons._ For a given family-style, this indicates what icons are included. It may be used in the context of an Icon Collection subset, such as as the Font Awesome Free collection, to show which subset of icons are available each each family-style present in the collection. It may also be used in the context of a Kit, to show which icons are included in the kit for each family-style. When the `only` field is `null`, it means that the whole family-style is included in the collection or kit, with no curation. When `only` is a paginated list of icons, it means that only those specific icons within the family-style are included in the collection or kit. For example, the Font Awesome Free collection includes only some icons in the Classic Solid family-style, so the `only` field for that family-style subset would be a paginated list of those included icons. The same collection includes all icons in the Brands family-style, so the `only` field for that family-style subset would be `null`. For a kit, if the `subsetType` is `CUSTOM`, then the `only` field for each family-style included in the kit would be a paginated list of the specific icons curated for that family-style in the kit. If the `subsetType` is `AUTO` or `FULL`, then the `only` field for each family-style included in the kit would be `null`, since all icons in those family-styles are included with no curation. To simply get a list of all icons in a family-style that are available under the current scope, regardless of subset semantics, use the `iconVariantsPaginated` field instead of `only`. See more on the `iconVariantsPaginated` field [below](#the-iconvariantspaginated-field-on-familystylesubset). | Field | Description | | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **familyStyle ([`FamilyStyle!`](/apis/graphql/objects.md#familystyle))** | The family-style this entry applies to. | | **only ([`IconVariantsPaginated`](/apis/graphql/objects.md#iconvariantspaginated))** | `null` when the all icons in the family-style are available, else a paginated list of the curated icons. | | **iconVariantsPaginated ([`IconVariantsPaginated!`](/apis/graphql/objects.md#iconvariantspaginated))** | All icon variants for this family-style entry, as a paginated list, regardless of subset type. See [below](#the-iconvariantspaginated-field-on-familystylesubset). | For the `only` field: | Argument | Type | Description | | ---------- | ----- | ----------------------------------------------------------- | | `page` | `Int` | Page number (1-based). Default: `1`. | | `pageSize` | `Int` | Number of icon variants per page. Default: `20`. Max: `50`. | #### The `iconVariantsPaginated` field on `FamilyStyleSubset` All in-scope icon variants for this family-style entry, as a paginated list. An icon variant is an official icon in a specific family-style. For example, "mug-saucer" in "sharp-solid" is a different icon variant than "mug-saucer" in "sharp-regular". What does not vary across these are the properties of the icon soul, such as its name, unicode, label, and aliases. Unlike `only` (which is `null` when the whole family-style is included), `iconVariantsPaginated` always returns a paginated result: - When the subset is curated (as in a Kit whose `subsetType` is `CUSTOM`), it returns the same curated icons as `only`. - When the whole family-style is included (as in a Kit whose `subsetType` is `AUTO` or `FULL`), it returns all icon variants for this family-style for the kit's version of Font Awesome. | Argument | Type | Description | | ---------- | ----- | --------------------------------------------------- | | `page` | `Int` | Page number (1-based). Default: `1`. | | `pageSize` | `Int` | Number of icons per page. Default: `20`. Max: `50`. | ## FamilyStyleSubsetPaginated _A page of [`FamilyStyleSubset`](/apis/graphql/objects.md#familystylesubset)s with pagination metadata._ | Field | Description | | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | **familyStyles ([`[FamilyStyleSubset!]!`](/apis/graphql/objects#familystylesubset))** | The list of family-styles for the requested page. | | **page (`Int!`)** | The page number of the returned family-styles. Page numbers start at 1. | | **pageSize (`Int!`)** | The number of family-styles returned per page. | | **totalFamilyStyleCount (`Int!`)** | The total number of family-styles available for this query, without regard to pagination. | | **totalPageCount (`Int!`)** | The total number of pages available for this query, given the page size. | ## Icon _A specific Font Awesome icon._ | Field | Description | | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **id (`String!`)** | The identifying name of an icon, like [pizza-slice](https://fontawesome.com/icons/pizza-slice?s=solid) or [bicycle](https://fontawesome.com/icons/bicycle?style=solid). | | **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](https://fontawesome.com/icons/coffee-pot?style=solid)" has a `label` of "Coffee Pot". | | **unicodeInt (`Integer!`)** | Unicode by which this icon can be identified, as an integer. For example, the value of this field for the `mug-saucer` icon is `61684`. | | **unicodeHex (`String!`)** | The same unicode codepoint as `unicodeInt`, formatted as a hexadecimal string. For example, `"f0f4"` for `mug-saucer`. Useful for CSS pseudo-elements and `IconDefinition`s, both of which use the hex form. | | **shim ([`Shim`](/apis/graphql/objects.md#shim))** | A renaming or change in style for this icon between Font Awesome 4 and Font Awesome 5/6. | | **familyStylesByLicense ([`FamilyStylesByLicense!`](/apis/graphql/objects.md#familystylesbylicense))** | An object describing the families and styles of this icon by license type (Free and Pro). | | **svgs ([[`Svg!`]](/apis/graphql/objects#svg))** | SVGs for this icon. | | **aliases ([`Aliases`](/apis/graphql/objects.md#aliases))** | Aliases for this icon. | For the `svgs` field: | Argument | Type | Description | | -------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | `filter` | [`SvgsFilter`](/apis/graphql/objects.md#svgsfilter) | _optional_. By default, all available SVGs allowed by the scopes on the auth token used on the request are included. | #### Authorization Scopes and Subscription Limits for the `svgs` Field The auth token used for the query request authorizes the selection of a given family-style based on its [Authorization Scopes](/apis/graphql/auth.md) and based on your [Font Awesome subscription](https://fontawesome.com/account). For example, the Classic Light family-style 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. Another example, if you have a Pro plan but do not have access to the Pro+ Collection, you won't be able to access those additional families and styles from the `svgs` field.

Confusing familyStylesByLicense and svgs

The **familyStylesByLicense** field returns _every family and style that this icon has been created for_. The **svgs** field will only return data _that the associated account has permission to use_. So keep this in mind if you are enumerating families and styles. The subscription may or may not have access to everything listed in **familyStylesByLicense**. #### 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](/apis/graphql/complexity.md). Here's an example of query that uses `filter` to include only the Sharp Light and Duotone Solid familyStyles: ```graphql query { release(version: "7.x") { icons { id svgs(filter: { familyStyles: [{ family: SHARP, style: LIGHT }, { family: DUOTONE, style: SOLID }] }) { width height pathData } } } } ``` 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`](/apis/graphql/objects.md#family) and [`Style`](/apis/graphql/objects.md#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`](/apis/graphql/objects.md#familystyle) type. ## IconCollection _A grouping of [Icon Packs](/apis/graphql/objects.md#iconpack) available to a subscription plan._ An Icon Collection is the set of icons a customer's plan entitles them to, for a given Font Awesome version. It is the root of the graph returned by [`Account.iconCollection`](/apis/graphql/objects.md#account). | Field | Description | | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **name (`String!`)** | The name of the Icon Collection, like `"free-collection"` or `"pro-collection"`. | | **label (`String!`)** | A UI label for the collection, like `"Free Collection"` or `"Pro Collection"`. Suitable for display to a user. | | **labelIconName (`String!`)** | The name of the icon used to represent this collection's label in a UI, like `"circle-half"`. Combined with `labelIconPrefix`, fully specifies an icon a client can render. | | **labelIconPrefix (`String!`)** | The style prefix of the icon used to represent this collection's label in a UI, like `"fas"`. Combined with `labelIconName`, fully specifies an icon a client can render. | | **iconPacks ([`[IconPack!]!`](/apis/graphql/objects#iconpack))** | The Icon Packs included in this Icon Collection, in canonical listing order. | | **subset ([`IconCollectionSubset`](/apis/graphql/objects.md#iconcollectionsubset))** | When an Icon Collection includes only some icons in one or more familyStyles, this subset lists which familyStyles are present and which icons are available in each. For example, the Font Awesome Free collection includes only some Classic Solid icons, some Classic Regular icons, and all Brand icons. Resolves to `null` when the collection contains every icon of every included family-style with no curation (for example, the Font Awesome Pro collection). | ## IconCollectionSubset _A breakdown of which icons are present in each family-style of a subsetted Icon Collection._ It exposes two access patterns over the same underlying data: - Selecting all familyStyles in the Icon Collection. - Selecting a single family-style. Good for paginating the icons under the `only` subfield of each family-style. See more below. | Field | Description | | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **familyStyleSubset ([`FamilyStyleSubset`](/apis/graphql/objects.md#familystylesubset))** | A single family-style subset entry, looked up by `family` and `style`. Designed for use with field aliasing so each family-style can paginate independently of the others. | | **familyStyleSubsets ([`[FamilyStyleSubset!]!`](/apis/graphql/objects#familystylesubset))** | Every family-style subset entry in the collection. When selected as a single field, every entry resolves with the same `only(page, pageSize)` arguments — see the note below. For independent pagination per family-style, use the singular `familyStyleSubset(family, style)` field via aliased selections. | For the `familyStyleSubset` field: | Argument | Type | Description | | -------- | --------- | ---------------------------------------------------------------------------------------- | | `family` | `String!` | _required_. Lowercase canonical family name, like `"classic"`, `"sharp"`, or `"brands"`. | | `style` | `String!` | _required_. Lowercase canonical style name, like `"solid"`, `"regular"`, or `"light"`. | Selecting `familyStyleSubsets { only(page: …, pageSize: …) { … } }` applies the same pagination arguments to every entry in a single selection. To paginate each family-style independently in one round trip, use the singular `familyStyleSubset(family, style)` field with field aliases — for example: ```graphql solid: familyStyleSubset(family: "classic", style: "solid") { only(page: 1) { icons { id } } } regular: familyStyleSubset(family: "classic", style: "regular") { only(page: 2) { icons { id } } } ``` A full aliased-pagination example is shown in the [Icon Collection Example queries](#icon-collection-example-queries) section. ## IconCount | Field | Description | | --------------------- | ------------------------------------ | | **free (`Integer!`)** | Count of Free icons in this release. | | **pro (`Integer!`)** | Count of Pro icons in this release. | ## IconPack _A group of [familyStyles](/apis/graphql/objects.md#familystyle) with a common visual personality. For example: Classic, Sharp, Whiteboard, Notdog, or Jelly._ | Field | Description | | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **name (`String!`)** | The name of the Icon Pack, like `"whiteboard"` or `"sharp-duotone"`. | | **label (`String!`)** | UI UI label text for the Icon Pack, like `"Whiteboard"` or `"Sharp Duotone"`. | | **description (`String!`)** | A description for the Icon Pack, suitable for display to a user. | | **labelIconName (`String!`)** | The name of the icon used to represent this pack's label in a UI, like `"circle-half"`. Combined with `labelIconPrefix`, fully specifies the icon a client can render as part of the pack's label. | | **labelIconPrefix (`String!`)** | The style prefix of the icon used to represent this pack's label in a UI, like `"fas"`. Combined with `labelIconName`, fully specifies the icon a client can render as part of the pack's label. | | **designerName (`String`)** | Name of the designer or organization credited with this Icon Pack, intended for an attribution credit in a UI. May be `null` when no attribution is recorded. | | **designerUrl (`String`)** | URL of the designer or organization credited with this Icon Pack, intended for an attribution credit in a UI. May be `null` when no attribution URL is recorded. | | **familyStyles ([`[FamilyStyle!]!`](/apis/graphql/objects#familystyle))** | The familyStyles included in this Icon Pack. In canonical family-style listing order, the recommended listing order for a UI. | | **sourceCanvasHeight (`Int!`)** | The source canvas height (in pixels) used by all familyStyles in the pack. The canvas is the visible bounding box icons are designed within. | | **sourceGridHeight (`Int!`)** | The source grid height (in pixels) used by all familyStyles in the pack. The grid is the invisible design grid icons are drawn on, before any scaling up. | The grid is the invisible design surface; the canvas is the visible bounding box that includes a uniform padding on all four sides. The difference between them is the padding. An official icon may be designed to overflow the grid into the padding, but it will never overflow the canvas. Both grid and canvas are squares of equal height and width, so `sourceGridHeight` and `sourceCanvasHeight` also imply their respective widths.

Custom Icons May Overflow the Canvas

While official icons are designed to never overflow the canvas, there is no such restriction on custom icons (aka icon uploads). They are free to overflow the canvas. So SVG elements constructed for custom icons should allow overflow. ## IconsPaginated _A page of icons returned by [`Release.iconsPaginated`](/apis/graphql/objects.md#release) or [`searchPaginated`](/apis/graphql/query-fields.md#searchpaginated-iconspaginated)._ | Field | Description | | ---------------------------------------------------- | --------------------------------------------------------------------------------- | | **icons ([`[Icon!]!`](/apis/graphql/objects#icon))** | The list of icons for the requested page. | | **page (`Int!`)** | The page number of the returned icons. Page numbers start at 1. | | **pageSize (`Int!`)** | The number of icons returned per page. | | **totalIconCount (`Int!`)** | The total number of icons available for this query, without regard to pagination. | | **totalPageCount (`Int!`)** | The total number of pages available for this query, given the page size. | ## IconUpload _A icon that has been uploaded to a [kit](/apis/graphql/objects.md#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. | | **unicodeInt (`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. | | **unicodeHex (`String!`)** | The same unicode codepoint as `unicodeInt`, formatted as a hexadecimal string (e.g. `"e001"`). Useful for CSS pseudo-elements and `IconDefinition`s, both of which use the hex form. | | **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 `` element. (Example above) | | **height (`String`)** | The height as would be used in the third parameter of the `viewBox` attribute of an `` element. (Example above) | | **pathData (`[String!]!`)** | The SVG path data for the icon. See details on the equivalent `pathData` field on the [Svg](/apis/graphql/objects.md#svg) type. | | **html (`String!`)** | The SVG as an `` html element. | | **iconDefinition (`Json!`)** | The svg formatted as an [IconDefinition](/apis/javascript/icon-library.md#using-the-library), usable in the Font Awesome JavaScript API. | #### As an i-tag The `name` can suffice for building an `` using Font Awesome CSS class names. You also need a CSS class to specify the family-style for the icon. The family-style class for a monotone icon upload is always either `fak` or `fa-kit`. The family-style 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. ```html ``` Either of these could be added to a DOM that has either a Webfont/CSS or SVG/JS kit loaded. #### As a CSS pseudo-element Using the `unicode`, an icon could be referenced using a [CSS pseudo-element](/web/add-icons/pseudo-elements.md) HTML: ```html ``` Suppose you want to use some monotone icon upload for `.alpha` and some duotone icon for `.beta`. CSS: ```css .fancy-list { list-style-type: none; margin-left: 2.5em; padding-left: 0; } .fancy-list .alpha:before { content: '\e001'; font-family: 'Font Awesome Kit'; margin-right: 0.25em; } .fancy-list .beta:before { content: '\e002'; font-family: 'Font Awesome Kit Duotone'; margin-right: 0.25em; } ``` (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`](/apis/graphql/objects.md#constructing-an-icondefinition) or [``](/apis/graphql/objects.md#constructing-svg-elements) from an `IconUpload`. ## IconVariant _One family-style variant of an icon, with its SVG data (when permitted)._ An icon variant is an official icon in a specific family-style. For example, "mug-saucer" in "sharp-solid" is a different icon variant than "mug-saucer" in "sharp-regular". What does not vary across these are the properties of the icon soul, such as its name, unicode, label, and aliases. | Field | Description | Auth | | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | **name (`String!`)** | The identifying name of an icon, like [pizza-slice](https://fontawesome.com/icons/pizza-slice?s=solid) or [bicycle](https://fontawesome.com/icons/bicycle?style=solid). | | **unicodeInt (`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. | | **unicodeHex (`String!`)** | The same unicode codepoint as `unicodeInt`, formatted as a hexadecimal string (e.g. `"e001"`). Useful for CSS pseudo-elements and `IconDefinition`s, both of which use the hex form. | | **familyStyle ([`FamilyStyle!`](/apis/graphql/objects.md#familystyle))** | The family-style of this icon variant. | | | **svg ([`Svg`](/apis/graphql/objects.md#svg))** | SVG data for the icon variant. Will be `null` if the current authorization lacks permission to download SVGs (requires `svg_icons_pro` or `svg_icons_free`), which is always the case for Pro Lite accounts. | [svg_icons_free](/apis/graphql/auth.md) / [svg_icons_pro](/apis/graphql/auth.md) | ## IconVariantsPaginated _A page of icon variants._ An icon variant is an official icon in a specific family-style. For example, "mug-saucer" in "sharp-solid" is a different icon variant than "mug-saucer" in "sharp-regular". What does not vary across these are the properties of the icon soul, such as its name, unicode, label, and aliases. | Field | Description | | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | **iconVariants ([`[IconVariant!]!`](/apis/graphql/objects#iconvariant))** | The list of icon variants for the requested page. | | **page (`Int!`)** | The page number of the returned icons. Page numbers start at 1. | | **pageSize (`Int!`)** | The number of icons returned per page. | | **totalIconVariantCount (`Int!`)** | The total number of icon variants available for this query, without regard to pagination. | | **totalPageCount (`Int!`)** | The total number of pages available for this query, given the page size. | ## IconWithVariants _A Font Awesome official icon with a set of its family-style variants, as filtered by the context of selection._ Its `variants` field contains only the family-style available in the selection context. If selected under a subsetted Kit, the variants are filtered by the Kit's subset and the Account's permits. | Field | Description | | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **name (`String!`)** | The identifying name of an icon, like "coffee" or "bicycle". Same identity as [`Icon.id`](/apis/graphql/objects.md#icon). | | **label (`String!`)** | A more human readable representation of this icon's name. For example, the icon "coffee-pot" has a label of "Coffee Pot". | | **unicodeInt (`Int!`)** | Unicode codepoint of the icon's primary glyph, as an integer. For example, the value for the `mug-saucer` icon is `61684`. | | **unicodeHex (`String!`)** | The same unicode codepoint, formatted as a hexadecimal string. For example, the value for the `mug-saucer` icon is `"f0f4"`. | | **variants ([`[IconVariant!]!`](/apis/graphql/objects#iconvariant))** | Variants of this icon that are available in the selection context—one per family-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 "6.x" or "7.x". 6.x means the latest version 6; 7.x. means the latest version 7. If it's one of the symbolic version ranges, it can be resolved to the current semantic version by querying the kit's `release.version` field. | | | **kitRevision (`Int!`)** | A revision number that increments every time any change is made on the kit, including changes to custom icons. | | | **subsetType ([`KitSubsetType!`](/apis/graphql/objects.md#kitsubsettype))** | What type of subset this kit has. | | | **subsetTypeLabel (`String!`)** | A human-readable label for the `subsetType`, suitable for a UI label. | | | **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](/apis/graphql/auth.md) | | **autoAccessibilityEnabled (`Boolean!`)** | Whether the Auto-Accessibility features are enabled for this kit. **Not applicable for Font Awesome 7.** | | | **shimEnabled (`Boolean!`)** | Whether Font Awesome 4 compatibility is enabled for this kit. | | | **iconUploads ([`[IconUpload]`](/apis/graphql/objects#iconupload))** | List of [IconUpload](/apis/graphql/objects.md#iconupload) objects on this kit. | | | **release ([`Release!`](/apis/graphql/objects.md#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 "6.x" or "7.x"), this release will be set to the specific latest version. | | | **searchKit ([`SearchKitResult`](/apis/graphql/objects.md#searchkitresult))** | Searches icons in this kit. Requires the `kits_read` scope. | [kits_read](/apis/graphql/auth.md) | | **familyStylesPaginated ([`FamilyStyleSubsetPaginated!`](/apis/graphql/objects.md#familystylesubsetpaginated))** | A paginated wrapper over the family-styles included in this kit. See [below](#the-familystylespaginated-field). | | | **familyStyleMember ([`FamilyStyleSubset`](/apis/graphql/objects.md#familystylesubset))** | A single family-style lookup on this kit, selected by a `selector`. See [below](#the-familystylemember-field). | | | **icon ([`IconWithVariants`](/apis/graphql/objects.md#iconwithvariants))** | A single icon in this kit, looked up by name, together with the family-style variants this kit includes for that icon. See [below](#the-icon-field). | | | **iconVariantsPaginated ([`IconVariantsPaginated!`](/apis/graphql/objects.md#iconvariantspaginated))** | All official icon variants present in this kit, as a paginated list. See [below](#the-iconvariantspaginated-field). | | | **showcaseIcons ([`IconVariantsPaginated!`](/apis/graphql/objects.md#iconvariantspaginated))** | An interesting, varied sample of this kit's official icon variants, as a paginated list. See [below](#the-showcaseicons-field). | | | **showcaseCacheKey (`String!`)** | An opaque cache key for this kit's `showcaseIcons`. See [below](#the-showcasecachekey-field). | | For the `searchKit` field: Searches icons in a kit. When a kit is subsetted, searching official icons is limited to the kit's subset and account permissions. Each call searches only official Font Awesome icons, in the `OFFICIAL` search mode, or custom icons (also known as "icon uploads") in the `CUSTOM` search mode. To search both in a single request, select the field more than once using [GraphQL aliases](https://graphql.org/learn/queries/#aliases). | Argument | Type | Description | | ------------ | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `query` | `String!` | _required_. A string of search terms, like "coff" or "coffee mug". Max length: 512. | | `searchMode` | [`KitSearchMode`](/apis/graphql/objects.md#kitsearchmode) | _required_. Which icons to search. Use `OFFICIAL` for official Font Awesome icons or `CUSTOM` for custom icons (also known as "icon uploads"). | | `page` | `Int` | default: 1. The page of results to return. Pages start at 1. | | `pageSize` | `Int` | default: 20. max: 50. Number of icons per page. | #### Example: Suppose we have a Pro kit on an account with a Pro plan, identified by token `b75bd6c2d2`. The kit includes the Classic Light family-style in its subset (an "auto" subset, also known as "By Style" subset). It also has two custom icon uploads: `dragonfruit` and `dragon-claw`. The `icons` field on the returned [`SearchKitResult`](/apis/graphql/objects.md#searchkitresult) is a [`SearchKitIcon`](/apis/graphql/objects.md#searchkiticon) union, so an inline fragment is used to select fields by concrete type. In `OFFICIAL` mode, results are always [`IconWithVariants`](/apis/graphql/objects.md#iconwithvariants) objects. In `CUSTOM` mode, results are always [`IconUpload`](/apis/graphql/objects.md#iconupload) objects. Select only the fragment that matches the chosen `searchMode`. ##### Searching official icons (`searchMode: OFFICIAL`) Search official Font Awesome icons in this kit matching "dragon": ```graphql query { me { kit(token: "b75bd6c2d2") { searchKit(query: "dragon", page: 1, pageSize: 3, searchMode: OFFICIAL) { page pageSize totalIconCount totalPageCount icons { __typename ... on IconWithVariants { name label unicodeHex variants { familyStyle { family style prefix shorthand } } } } } } } } ``` ```json { "data": { "me": { "kit": { "searchKit": { "page": 1, "pageSize": 3, "totalIconCount": 67, "totalPageCount": 23, "icons": [ { "__typename": "IconWithVariants", "label": "Dragon", "name": "dragon", "unicodeHex": "f6d5", "variants": [ { "familyStyle": { "family": "classic", "prefix": "fal", "shorthand": "light", "style": "light" } } ] }, { "__typename": "IconWithVariants", "label": "Dice D8", "name": "dice-d8", "unicodeHex": "f6d2", "variants": [ { "familyStyle": { "family": "classic", "prefix": "fal", "shorthand": "light", "style": "light" } } ] }, { "__typename": "IconWithVariants", "label": "Dice D6", "name": "dice-d6", "unicodeHex": "f6d1", "variants": [ { "familyStyle": { "family": "classic", "prefix": "fal", "shorthand": "light", "style": "light" } } ] } ] } } } } } ``` Notice how the "light" shorthand illustrates the legacy-naming behavior documented on [`FamilyStyle.shorthand`](/apis/graphql/objects.md#familystyle): a style-only shorthand implies the Classic family. Also notice that `variants` contains only the familyStyles available through this Kit, filtered by both the Kit's subset and its Account's permits. It doesn't include `dragon` for `classic-solid`, `sharp-light`, `utility-semibold`, or any other family-style because this Kit's subset is limited to Classic Light. ##### Searching custom icons (`searchMode: CUSTOM`) Search the kit's custom icon uploads for names matching "dragon": ```graphql query { me { kit(token: "b75bd6c2d2") { searchKit(query: "dragon", page: 1, pageSize: 3, searchMode: CUSTOM) { page pageSize totalIconCount totalPageCount icons { __typename ... on IconUpload { name unicodeHex } } } } } } ``` ```json { "data": { "me": { "kit": { "searchKit": { "page": 1, "pageSize": 3, "totalIconCount": 2, "totalPageCount": 1, "icons": [ { "__typename": "IconUpload", "name": "dragonfruit", "unicodeHex": "e002" }, { "__typename": "IconUpload", "name": "dragon-claw", "unicodeHex": "e003" } ] } } } } } ``` Both of the kit's custom uploads — `dragonfruit` and `dragon-claw` — match, so `totalIconCount` is 2 and they fit on a single page. #### The `familyStylesPaginated` field A paginated wrapper over the family-styles included in this kit, after filtering by the kit's subset and the account's entitlements. One entry per family-style, in canonical family-style listing order, with pagination metadata. Use `page` (1-based) and `pageSize` to walk the result. `totalFamilyStyleCount` reports the total across all pages; `totalPageCount` reports the page count given the requested `pageSize`. For each entry: - When the `only` field is `null`, the kit is not subsetted (it includes the full library) or it is auto-subsetted (by style). Either way, for that family-style the kit includes every icon available for that family-style, in this kit's configured version of Font Awesome, up to the account's entitlements. - When the `only` field is non-null, the kit is custom-subsetted and the `only` field lists the specific icons that are included in the kit for that family-style. The [`Kit.subsetType`](/apis/graphql/objects.md#kit) explicitly indicates what kind of subset the kit has, and `Kit.subsetTypeLabel` provides a human-readable UI label. For a single family-style lookup, use the singular [`familyStyleMember(selector)`](#the-familystylemember-field) field instead. | Argument | Type | Description | | ---------- | ----- | ----------------------------------------------------------- | | `page` | `Int` | Page number (1-based). Default: `1`. | | `pageSize` | `Int` | Number of family-styles per page. Default: `20`. Max: `50`. | #### The `familyStyleMember` field A single family-style lookup on this kit. Returns `null` when the requested family-style exists at this kit's version but is not available in the kit, either due to the kit's subset or the account's permits. Produces an `invalid family-style` error when the requested family-style does not exist at all. | Argument | Type | Description | | ---------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | `selector` | [`FamilyStyleSelector!`](/apis/graphql/objects.md#familystyleselector) | _required_. Selects the target family-style. Provide exactly one of `pair`, `shorthand`, or `prefix`. | #### The `icon` field A single icon in this kit, looked up by name, together with the family-style variants this kit includes for that icon. The `name` may be the icon's canonical id or one of its aliases; either way, the result will use the canonical name as the value of its `name` field. The Font Awesome version used for the lookup is the one resolved from this kit's `version`. The returned `variants` are limited to the family-styles present in this kit's subset. SVG content on each variant remains gated by the existing SVG auth scopes. Returns `null` when the named icon does not exist at this kit's Font Awesome version, or when it exists but none of its family-style variants are present in this kit. | Argument | Type | Description | | -------- | --------- | ------------------------------------------------------------------------- | | `name` | `String!` | _required_. Canonical icon id or a name alias. Max length: 80 characters. | #### The `iconVariantsPaginated` field All icon variants present in this kit, as a paginated list. An icon variant is an official icon in a specific family-style. For example, "mug-saucer" in "sharp-solid" is a different icon variant than "mug-saucer" in "sharp-regular". What does not vary across these are the properties of the icon soul, such as its name, unicode, label, and aliases. Returns only the icon variants that are present in the kit's subset. Custom icons (also known as "icon uploads") are never included here. The variants are ordered by ascending icon name, then by ascending short prefix id; this order is not configurable. A kit with no official icons returns an empty list with zero counts. SVG content on each variant is gated by the SVG auth scopes. | Argument | Type | Description | | ---------- | ----- | ------------------------------------------------------------ | | `page` | `Int` | Page number (1-based). Default: `1`. | | `pageSize` | `Int` | Number of icon variants per page. Default: `20`. Max: `500`. | #### The `showcaseIcons` field An interesting, varied sample of this kit's official icon variants, as a paginated list — a "showcase" of the kit rather than a trivial alphabetical slice. The icons are selected to be representative and varied. The exact selection is intentionally not specified here and may change over time. To cache the result, use `showcaseCacheKey`: while it is unchanged, a previously-fetched showcase for this kit stays valid and may be reused; when the kit changes or the selection changes, `showcaseCacheKey` changes and clients should refetch. See [below](#the-showcasecachekey-field). Returns only official icons. Custom icons (also known as "icon uploads") are never included here — use `searchKit(searchMode: CUSTOM)` or `iconUploads` for those. Use `page`/`pageSize` to paginate. Provide an optional `selector` to restrict the showcase to one family-style; an unknown selector yields an `invalid family-style` error, and a real family-style not present in the kit yields an empty page. SVG content on each variant is gated by the SVG auth scopes. For all official icon variants (unfiltered), use `iconVariantsPaginated` instead. See [above](#the-iconvariantspaginated-field). | Argument | Type | Description | | --------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `page` | `Int` | Page number (1-based). Default: `1`. | | `pageSize` | `Int` | Number of icon variants per page. Default: `20`. Max: `500`. | | `limitPerFamilyStyle` | `Int` | Max icon variants contributed per family-style. Default: `80`. Max: `500`. | | `selector` | [`FamilyStyleSelector`](/apis/graphql/objects.md#familystyleselector) | Optional. Restrict the showcase to one family-style. Provide exactly one of `pair` (family and style together), `shorthand`, or `prefix`. Omit to draw from all family-styles in the kit. | #### The `showcaseCacheKey` field An opaque cache key for this kit's `showcaseIcons`. The icons returned by `showcaseIcons` are selected to be an interesting sample of the kit's icons. If the selection changes, `showcaseCacheKey` changes. If the kit changes, `showcaseCacheKey` changes. As long as `showcaseCacheKey` remains the same value, clients can reuse cached versions of the showcase icons list. Use it as the cache key for showcase results instead of combining the kit token and `kitRevision` yourself. Treat the value as opaque (compare only for equality). It is a single per-kit value — it does not vary with the `showcaseIcons` arguments (`page`, `pageSize`, `selector`, `limitPerFamilyStyle`); combine it with your own request variables to key individual pages. ## KitDownload _An object representing the result of a kit download request._ A kit download request is initiated by the `createKitDownload` mutation, and its status can be polled by the `getKitDownload` field. Both return this object as a response. When the corresponding kit download is ready, the `url` field of this object will contain the link to download the kit, and the status field will be `READY`. |
Field
| Description | | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **buildId (`String!`)** | An identifier that is distinct to a particular state of a specific kit. This should be used as an argument to the `getKitDownload` field when polling for the status a build. | | **status ([`KitDownloadStatus!`](/apis/graphql/objects.md#kitdownloadstatus))** | An enum indicating the kit's build status. | | **url (`String`)** | A short-lived URL from which to download the built kit as a zip file. This will be `null` until the `status` is `READY`. | ## KitDownloadStatus _An enum showing the status of a kit download request._ | Variant | Description | | ------------- | ------------------------------------------ | | **`READY`** | The kit download zip is ready to download. | | **`FAILED`** | The kit download request failed. | | **`PENDING`** | The kit download request is in progress. | ## KitSearchMode _An enum of search options for [`Kit.searchKit`](/apis/graphql/objects.md#kit)._ | Variant | Description | | -------------- | ------------------------------------------------ | | **`OFFICIAL`** | Official Font Awesome icons. | | **`CUSTOM`** | Kit custom icons (also known as "icon uploads"). | ## KitSubsetType _A enum whose variants are the possible types of kit subsets._ | Variant | Description | | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`CUSTOM`** | The kit's subset is defined as an icon-by-icon selection. Only the individual icons named in the subset are included in the kit. | | **`AUTO`** | The kit's subset is defined as a list of family-styles. All icons available in those family-styles, for the kit's version of Font Awesome, are included in the subset. | | **`FULL`** | The kit includes all icons permitted by its account's Icon Collection, for the kit's version of Font Awesome. This is the same as the kit having no subset. | ## License _An enum of license filters for icons._ The `license` filter accepts `free` or `pro`. **`free`** returns only icons that ship with Font Awesome Free. **`pro`** returns only icons that are exclusive to Font Awesome Pro — it is **not** a superset of Free. `free` and `pro` are intentionally disjoint sets. To retrieve the full superset of icons regardless of license, omit the parameter (in GraphQL, this corresponds to the enum value `ANY`). | Variant | Description | | ---------- | ---------------------------------------------------------------------------------------------------- | | **`ANY`** | No license filter applied. All icons are returned. | | **`FREE`** | Only icons available in Font Awesome Free are returned. | | **`PRO`** | Only icons available exclusively in Font Awesome Pro are returned. Free-licensed icons are excluded. | ## Membership (Deprecated) As of Font Awesome 6.2.0, use the `familyStylesByLicense` field of type [`FamilyStylesByLicense`](/apis/graphql/objects.md#familystylesbylicense), which is family-aware, including the Sharp family. Objects of this type include only legacy style names. They never include the family-style 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. | ## 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](/apis/graphql/auth.md) _required_ | | **limit (`Integer`)** | Limit of the number of domains allowed to be whitelisted for this account. | [domains_read](/apis/graphql/auth.md) _required_ | | **active (`Boolean`)** | Whether this domain whitelist is active. | [domains_read](/apis/graphql/auth.md) _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!](/apis/graphql/objects.md#download))** | Metadata about the download formats available for this release. | | **iconCount ([IconCount!](/apis/graphql/objects.md#iconcount))** | Metadata about icon counts in Free vs. Pro in this release. | | **srisByLicense ([SrisByLicense!](/apis/graphql/objects.md#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 | | **icon ([`Icon`](#icon))** | A single icon in this release, [selected by name](#selecting-icons-by-name). Must be lower case and match exactly. | | **familyStyles ([`[FamilyStyle!]!`](/apis/graphql/objects#familystyle))** | All familyStyles in this release. | | **iconsPaginated ([`IconsPaginated`](/apis/graphql/objects.md#iconspaginated))** | Icons available in this release. | 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](#name-aliases). | For the `iconsPaginated` field: | Argument | Type | Description | | ---------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `license` | [`License`](#license) | default: `ANY`. Filter by license: `ANY` returns all icons, `FREE` only returns icons available in Font Awesome Free, `PRO` only returns icons available exclusively under the Pro license. | | `page` | `Int` | default: 1. The page of results to return. Pages start at 1. | | `pageSize` | `Int` | default: 100. max: 500. Number of icons per page. | #### Example: This returns three icons from page 123 in version 7.2.0, along with pagination metadata. ```graphql query { release(version: "7.2.0") { iconsPaginated(page: 123, pageSize: 3) { page pageSize totalIconCount totalPageCount icons { id label unicode } } } } ``` ```json { "data": { "release": { "iconsPaginated": { "page": 123, "pageSize": 3, "totalIconCount": 4318, "totalPageCount": 1440, "icons": [ { "id": "binoculars", "label": "Binoculars", "unicode": "f1e5" }, { "id": "biohazard", "label": "Biohazard", "unicode": "f780" }, { "id": "bird", "label": "Bird", "unicode": "e469" } ] } } } } ``` #### 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`](/apis/graphql/query-fields.md#search-icon) field. You can use either an icon's `id` or any of its [name aliases](#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: ```graphql query { release(version: "7.x") { icon(name: "mug-saucer") { id unicode } } } ``` Multiple icons may be selected using [GraphQL aliases](https://graphql.org/learn/queries/#aliases) The following query will select a few icons by name, with their iconDefinitions, for all available familyStyles: ```graphql query { release(version: "7.x") { mugSaucer: icon(name: "mug-saucer") { id svgs { iconDefinition } } coffee: icon(name: "coffee") { id svgs { iconDefinition } } cookie: icon(name: "cookie") { id svgs { iconDefinition } } } } ``` Results will look like: ```json { "data": { "release": { "coffee": { "id": "mug-saucer", "svgs": [...] }, "cookie": { "id": "cookie", "svgs": [...] }, "mugSaucer": { "id": "mug-saucer", "svgs": [...] } } } } ``` 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. ## SearchKitIcon _A union type representing any icon that can appear in a [`SearchKitResult`](/apis/graphql/objects.md#searchkitresult)._ A `SearchKitIcon` is one of: - [`IconWithVariants`](/apis/graphql/objects.md#iconwithvariants) — an official Font Awesome icon available in the kit, with its family-style variants. - [`IconUpload`](/apis/graphql/objects.md#iconupload) — a custom icon uploaded to the kit. Because this is a union, consumers must use inline fragments to select fields by concrete type: ```graphql icons { __typename ... on IconWithVariants { name label unicodeHex variants { familyStyle { shorthand } } } ... on IconUpload { name unicodeHex } } ``` ## SearchKitResult _A page of results returned by [`Kit.searchKit`](/apis/graphql/objects.md#kit)._ | Field | Description | | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | **icons ([`[SearchKitIcon!]!`](/apis/graphql/objects#searchkiticon))** | The list of icons for the requested page. This is a union—select fields using inline fragments. | | **page (`Int!`)** | The page number of the returned icons. Page numbers start at 1. | | **pageSize (`Int!`)** | The number of icons returned per page. | | **totalIconCount (`Int!`)** | The total number of icons available for this query, without regard to pagination. | | **totalPageCount (`Int!`)** | The total number of pages available for this query, given the page size. | ## Shim _A shim to support v4 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](/upgrade/upgrade-from-older-versions.md) about v4 compatibility. #### What shims can do 1. Some icons that appear in Font Awesome 4 have been renamed. A shim can map the v4 icon name to the v5/6 icon name automatically. 2. For some v4 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. 3. Font Awesome 5/6 puts all brand-related icons into a separate Brands style; Font Awesome 4 did not. A shim can map v4 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 v4 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 v5/6 name of the icon. If this field is `null`, it means the v4 and v5/6 icon names are the same. In that case, the shim's `prefix` must hold the significant difference. | | **prefix (`String`)** | The v5/6 prefix for this icon. For example, if the v4 icon was "star-o" and the v5/6 equivalent is "far fa-star", then the `prefix` would be "far". If `null`, it means that the v5/6 equivalent for this icon is in the default Solid style, whose prefix is "fas". | ## SRI _A [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/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: ```css sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V ``` ## SrisByLicense _An [Sri](/apis/graphql/objects.md#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!]!`](/apis/graphql/objects#sri))** | The set of `Sri` objects for all resources on the Free CDN for this release. | | **pro ([`[Sri!]!`](/apis/graphql/objects#sri))** | The set of `Sri` objects for all resources on the Pro CDN for this release. | ## 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` - `SEMIBOLD` ## Svg _The SVG data for a specific Font Awesome icon, in one family-style._ The various separate fields can be used to construct an `` HTML element or an `IconDefinition` for use in the Font Awesome JavaScript API. Alternatively, the `html` field provides a fully formed `` 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!`](/apis/graphql/objects.md#familystyle))** | The family-style 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 `` element. | | **iconDefinition (`Json!`)** | The svg formatted as an [IconDefinition](/apis/javascript/icon-library.md#using-the-library), usable in the Font Awesome JavaScript API. | | **pathData (`[String!]!`)** | Each item is a value for a `d` attribute in an svg `` 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](/apis/javascript/methods.md#findicondefinition-params) for use in the JavaScript API or the [React component](/web/use-with/react.md), for example. You could get that by simply selecting the `iconDefinition` field. Or you could construct one from the component parts. ```jsx // 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 const someIconDefinition = { "prefix": `${prefix}`, "iconName": `${name}`, "icon": [ widthInt, heightInt, [], // no ligatures unicodeHex, path ] } // React component ``` Or an abstract: ```js import { icon } from '@fortawesome/fontawesome-svg-core' icon(someIconDefinition).abstract ``` #### Constructing SVG elements You might want an `` 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 `` 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. ```javascript const isDuotone = pathData.length == 2 const svg = isDuotone ? ` ` : ` ` ``` To make the SVG work with Font Awesome's support styling, add `class="svg-inline--fa"` and load the [`svg-with-js.css`](https://github.com/FortAwesome/Font-Awesome/blob/7.x/css/svg-with-js.css) stylesheet. ## SvgsFilter _An object declaring which familyStyles to include in an svgs filter._ | Field | Description | | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | **familyStyles ([`FamilyStyleFilter!`](/apis/graphql/objects.md#familystylefilter))** | A list of objects having keys of `family` and `style`. Each object declares one family-style to include in the filter. | ## VisualTag _A descriptive tag (for example `"filled"`, `"outlined"`, or `"dimensional"`) applied to a family-style._ Each tag carries its own label icon so a UI can render a chip for the tag. | Field | Description | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **name (`String!`)** | The name of the visual tag, like `"dimensional"` or `"filled"`. | | **label (`String!`)** | A UI label for this visual tag, like `"Dimensional"` or `"Filled"`. | | **labelIconName (`String!`)** | The name of the icon used to represent this tag in a UI, like `"circle-half"`. Combined with `labelIconPrefix`, fully specifies the icon a client can render with the label. | | **labelIconPrefix (`String!`)** | The style prefix of the icon used to represent this tag in a UI, like `"fas"`. Combined with `labelIconName`, fully specifies the icon a client can render with the label. | #### Icon Collection Example queries A minimal query to retrieve the authenticated account's Icon Collection and the names of its [Icon Packs](#iconpack): ```graphql { me { iconCollection { name label iconPacks { name label } } } } ``` A query that paginates across two familyStyles independently in a single round trip, using field aliases on the singular [`familyStyleSubset(family, style)`](#iconcollectionsubset) field. Each alias gets its own [`only(page, pageSize)`](#familystylesubset) selection, so each family-style can be fetched at a different page. The outer `subset` resolves to `null` for collections that include every icon of every included family-style (such as the Pro Collection); the aliased selections inside `subset` only return populated results for collections that carry a curated subset (such as the Free Collection): ```graphql { me { iconCollection { name subset { classicSolid: familyStyleSubset(family: "classic", style: "solid") { familyStyle { family style prefix } only(page: 1, pageSize: 10) { page pageSize totalIconCount totalPageCount icons { id } } } classicRegular: familyStyleSubset(family: "classic", style: "regular") { familyStyle { family style prefix } only(page: 3, pageSize: 10) { page pageSize totalPageCount icons { id } } } } } } } ``` ## Deprecated #### Release.icons type: `[Icon!]!` Accepts one optional argument: | 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. | Use [`Release.iconsPaginated`](#release) instead. `Release.icons` is retained for backward compatibility. #### Icon.unicode type: `String!` Value of the unicode, as a hexadecimal string. Use the `unicodeInt` or `unicodeHex` fields instead, which are more explicit about the format of the unicode value. The `unicode` field is retained for backward compatibility. #### Icon.styles type: `[String!]!` List of Font Awesome legacy styles of this icon, i.e. "solid", "regular", "light", "thin", "duotone", or "brands". It does not any include any styles added since Font Awesome 6.2.0, when Sharp Solid was introduced and all styles were organized into families. Use the `familyStylesByLicense` field instead. #### Icon.membership type: `Membership!` An object describing the styles of this icon by license type (Free and Pro). Like the deprecated `Icon.styles` field, this does not include any styles introduced since Font Awesome 6.2.0, when Sharp Solid was introduced and all styles were organized into families. Use the `familyStylesByLicense` field instead. #### IconUpload.path type: `String!` 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. #### IconUpload.unicode type: `Int!` Value of the unicode, as an integer. Use the `unicodeInt` or `unicodeHex` fields instead, which are more explicit about the format of the unicode value. The `unicode` field is retained for backward compatibility.