--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/icon-libraries' title: 'Icon libraries | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'The icon sets that ship with DXPR Builder, how they load, and how to add your own' tags: - 'Match your brand' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Icon libraries' description: 'The icon sets that ship with DXPR Builder, how they load, and how to add your own' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/icon-libraries' articleSection: 'Match your brand' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/icon-libraries' description: 'The icon sets that ship with DXPR Builder, how they load, and how to add your own' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Match your brand](/hc/documentation/learn-dxpr-builder/customization) # Icon libraries. The icon sets that ship with DXPR Builder, how they load, and how to add your own Learn DXPR BuilderManage the siteMatch your brand ## In this guide Related guides - [Icon sets](/hc/documentation/learn-dxpr-builder/development/icon-sets) - [Icon](/hc/documentation/learn-dxpr-builder/elements/icon) The icon picker in the **Icon** and **Circle counter** elements offers every icon set registered on your site. DXPR Builder ships 14 sets; modules and themes can add more with a YAML file. This page lists the shipped sets, explains how they load, and shows you how to add one. To limit the sets a role sees, use a builder profile; see [User profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). ## Shipped icon sets The sets are registered in `dxpr_builder.dxpr_icon_sets.yml`: | Key | Label in the picker | Class prefix | Library | |---|---|---|---| | `bi` | Bootstrap Icons | `bi` | `dxpr_builder/elements.bootstrap_icons` | | `et` | ET Line Icons | `et` | `dxpr_builder/elements.et_line_font` | | `fab` | Font Awesome Free Brands | `fab` | `dxpr_builder/elements.font_awesome_6_free` | | `far` | Font Awesome Free Regular | `far` | `dxpr_builder/elements.font_awesome_6_free` | | `fas` | Font Awesome Free Solid | `fas` | `dxpr_builder/elements.font_awesome_6_free` | | `glyphicon` | Glyphicon Halflings | `glyphicon` | `dxpr_builder/elements.glyphicons_halflings` | | `pe` | Pixeden Line Icons | `pe` | `dxpr_builder/elements.pe_icon_7_stroke` | | `ph` | Phosphor Icons Regular | `ph` | `dxpr_builder/elements.phosphor_icons` | | `ph_bold` | Phosphor Icons Bold | `ph-bold` | `dxpr_builder/elements.phosphor_icons_bold` | | `ph_duotone` | Phosphor Icons Duotone | `ph-duotone` | `dxpr_builder/elements.phosphor_icons_duotone` | | `ph_fill` | Phosphor Icons Fill | `ph-fill` | `dxpr_builder/elements.phosphor_icons_fill` | | `ph_light` | Phosphor Icons Light | `ph-light` | `dxpr_builder/elements.phosphor_icons_light` | | `ph_thin` | Phosphor Icons Thin | `ph-thin` | `dxpr_builder/elements.phosphor_icons_thin` | | `fa` | Font Awesome (v4 compatibility) | `fa` | `dxpr_builder/elements.font_awesome_6_free` | The picker does not offer the `fa` set, because it has no icon list. It makes icons saved with the old `fa` class load the Font Awesome library. Pages saved with the old Font Awesome library names also get the `dxpr_builder/elements.font_awesome_v4_shims` stylesheet, so their icons keep showing. All Font Awesome sets load Font Awesome Free 7. The library keeps its version 6 machine name, because saved pages and custom code refer to it. [Font Awesome 7 in DXPR Builder](/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7) lists what changed. ## How the picker and pages load icons The set dropdown starts with **All icon sets**, then lists every registered set that has an icon list. The 13 shipped sets other than `fa` have built-in lists, so a site with only DXPR Builder shows 14 entries. A set from another module or theme needs an `icons` list in its YAML to appear. When an editor picks an icon, the element stores the icon's classes, such as `bi bi-star`, and the name of its library. Visitors then download only the icon fonts their page uses. In the editor, ET Line, Pixeden and Glyphicon load with the editor itself; the picker loads the other sets' stylesheets when it opens. How editors choose and style an icon is on [Adding an Icon](/hc/documentation/learn-dxpr-builder/elements/icon). ## Limit icon sets per role Each builder profile has an **Icon sets** group with a box per set and a **Check/Uncheck all Icon sets** box. Configure it at **DXPR Studio** > **DXPR Builder** > **User Profiles**; [User profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) has the steps. How the group behaves: - With **Check/Uncheck all Icon sets** ticked, the role sees every set, including sets added later. - With it unticked, the role sees only the ticked sets. A new profile starts this way, with every set ticked, so a set added later stays hidden until you tick it. - With it unticked and no set ticked, the picker is empty. - Icons already on a page keep showing. The profile only changes what the picker offers. ## Add an icon set An icon set is a YAML entry plus a Drupal library. DXPR Builder reads `*.dxpr_icon_sets.yml` from every installed module and theme. The property reference and the alter hook are on [Custom Icon Sets](/hc/documentation/learn-dxpr-builder/development/icon-sets). 1. Create `mymodule/mymodule.dxpr_icon_sets.yml`: ```yaml brand: label: 'Brand icons' prefix: brand css: css/brand-icons.css library: mymodule/brand_icons icons: - 'brand brand-logo' - 'brand brand-arrow' ``` `css` is relative to the module's folder and loads in the editor. Each icon is the prefix plus a class that starts with the prefix and a hyphen. 2. Declare the library in `mymodule.libraries.yml`. Visitors' pages load it: ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Clear caches with `drush cr`. 4. Tick the new set in every builder profile that does not have **Check/Uncheck all Icon sets** ticked. 5. Open an **Icon** element's settings and choose **Brand icons** in the set dropdown. A custom module can also remove a set from the picker with an alter hook; the code is on [Hooks API reference](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_icon_sets_alter). Icons from a shipped set keep loading on saved pages anyway. Icons from a removed custom set stop loading their CSS, because DXPR Builder only attaches a library that a registered set names. ## If an icon set is missing - **A new set is not in the dropdown.** Its YAML has no `icons` list, or the cache still holds the old registry. Add the list and run `drush cr`. - **A set is missing for some editors only.** Their builder profile does not tick it. Tick it under **Icon sets** at `/admin/dxpr_studio/dxpr_builder/profile`. - **Icons show in the editor but not for visitors.** The editor loads the set's `css` file, but visitors' pages load its `library`. Make sure `library` names a library in `mymodule.libraries.yml` that contains the CSS file. ## What's next? - [Custom Icon Sets](/hc/documentation/learn-dxpr-builder/development/icon-sets): the YAML property reference and the alter hook. - [Adding an Icon](/hc/documentation/learn-dxpr-builder/elements/icon): the Icon element's settings.