--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/pictogrambibliotheken' title: 'Pictogrambibliotheken | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:32:34+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- De pictogramkiezer in de elementen Pictogram en Cirkelteller biedt elke op je site geregistreerde pictogrammenset. DXPR Builder levert 14 sets mee; modules en thema's kunnen er meer toevoegen met een YAML-bestand. Deze pagina somt de meegeleverde sets op, legt uit hoe ze laden en toont hoe je er een toevoegt. Om de sets te beperken die een rol ziet, gebruik je een builderprofiel; zie Gebruikersprofielen. 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-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Pictogrambibliotheken description: |- De pictogramkiezer in de elementen Pictogram en Cirkelteller biedt elke op je site geregistreerde pictogrammenset. DXPR Builder levert 14 sets mee; modules en thema's kunnen er meer toevoegen met een YAML-bestand. Deze pagina somt de meegeleverde sets op, legt uit hoe ze laden en toont hoe je er een toevoegt. Om de sets te beperken die een rol ziet, gebruik je een builderprofiel; zie Gebruikersprofielen. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:32:34+0000' dateModified: '2026-10-24T17:19:22+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/nl/hc/documentatie/dxpr-builder-leren/aanpassing/pictogrambibliotheken' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/pictogrambibliotheken' description: |- De pictogramkiezer in de elementen Pictogram en Cirkelteller biedt elke op je site geregistreerde pictogrammenset. DXPR Builder levert 14 sets mee; modules en thema's kunnen er meer toevoegen met een YAML-bestand. Deze pagina somt de meegeleverde sets op, legt uit hoe ze laden en toont hoe je er een toevoegt. Om de sets te beperken die een rol ziet, gebruik je een builderprofiel; zie Gebruikersprofielen. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[De site beheren](/nl/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/nl/hc/documentation/learn-dxpr-builder/customization) # Pictogrambibliotheken. DXPR Builder lerenDe site beherenJe huisstijl toepassen ## In deze gids Gerelateerde gidsen - [Aangepaste pictogrammensets](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/pictogrammensets) - [Een pictogram toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/pictogram) De pictogramkiezer in de elementen **Pictogram** en **Cirkelteller** biedt elke op je site geregistreerde pictogrammenset. DXPR Builder levert 14 sets mee; modules en thema's kunnen er meer toevoegen met een YAML-bestand. Deze pagina somt de meegeleverde sets op, legt uit hoe ze laden en toont hoe je er een toevoegt. Om de sets te beperken die een rol ziet, gebruik je een builderprofiel; zie [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). ## Meegeleverde pictogrammensets De sets zijn geregistreerd in `dxpr_builder.dxpr_icon_sets.yml`: | Sleutel | Label in de kiezer | Klasseprefix | 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` | De kiezer biedt de set `fa` niet aan, omdat die geen pictogrammenlijst heeft. Die zorgt dat pictogrammen bewaard met de oude `fa`-klasse de Font Awesome-library laden. Pagina's bewaard met de oude Font Awesome-librarynamen krijgen ook de stylesheet `dxpr_builder/elements.font_awesome_v4_shims`, zodat hun pictogrammen blijven tonen. Alle Font Awesome-sets laden Font Awesome Free 7. De library behoudt zijn versie-6-machinenaam, omdat bewaarde pagina's en aangepaste code ernaar verwijzen. [Font Awesome 7 in DXPR Builder](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/font-awesome-7)somt op wat is gewijzigd. ## Hoe de kiezer en pagina's pictogrammen laden De setdropdown begint met **All icon sets** en somt daarna elke geregistreerde set met een pictogrammenlijst op. De 13 meegeleverde sets behalve `fa` hebben ingebouwde lijsten, dus een site met alleen DXPR Builder toont 14 vermeldingen. Een set van een andere module of een ander thema heeft een `icons`-lijst in zijn YAML nodig om te verschijnen. Wanneer een redacteur een pictogram kiest, slaat het element de klassen van het pictogram op, zoals `bi bi-star`, en de naam van zijn library. Bezoekers downloaden daarna alleen de pictogramlettertypen die hun pagina gebruikt. In de editor laden ET Line, Pixeden en Glyphicon met de editor zelf; de kiezer laadt de stylesheets van de andere sets wanneer hij opent. Hoe redacteurs een pictogram kiezen en stijlen staat op [Een pictogram toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/icon). ## Pictogrammensets per rol beperken Elk builderprofiel heeft een groep **Icon sets** met een vak per set en een vak **Check/Uncheck all Icon sets**. Stel hem in bij **DXPR Studio** > **DXPR Builder** > **User Profiles**; [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)heeft de stappen. Hoe de groep zich gedraagt: - Met **Check/Uncheck all Icon sets** aangevinkt ziet de rol elke set, inclusief later toegevoegde sets. - Zonder vinkje ziet de rol alleen de aangevinkte sets. Een nieuw profiel begint zo, met elke set aangevinkt, dus een later toegevoegde set blijft verborgen totdat je hem aanvinkt. - Zonder vinkje en zonder aangevinkte set is de kiezer leeg. - Pictogrammen die al op een pagina staan blijven tonen. Het profiel wijzigt alleen wat de kiezer biedt. ## Een pictogrammenset toevoegen Een pictogrammenset is een YAML-vermelding plus een Drupal-library. DXPR Builder leest `*.dxpr_icon_sets.yml` uit elke geïnstalleerde module en elk thema. De eigenschappenreferentie en de alter hook staan op [Aangepaste pictogrammensets](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/pictogrammensets). 1. Maak `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 relatief ten opzichte van de moduleremap en laadt in de editor. Elk pictogram is de prefix plus een klasse die begint met de prefix en een koppelteken. 2. Declareer de library in `mymodule.libraries.yml`. Pagina's van bezoekers laden hem: ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Wis de caches met `drush cr`. 4. Vink de nieuwe set aan in elk builderprofiel dat **Check/Uncheck all Icon sets** niet heeft aangevinkt. 5. Open de instellingen van een **Pictogram**-element en kies **Brand icons** in de setdropdown. Een aangepaste module kan ook een set uit de kiezer verwijderen met een alter hook; de code staat op [Hooks API-referentie](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/hooks-api#hook_dxpr_builder_icon_sets_alter). Pictogrammen uit een meegeleverde set blijven toch laden op bewaarde pagina's. Pictogrammen uit een verwijderde aangepaste set stoppen met het laden van hun CSS, omdat DXPR Builder alleen een library koppelt die een geregistreerde set noemt. ## Als een pictogrammenset ontbreekt - **Een nieuwe set staat niet in de dropdown.** Zijn YAML heeft geen `icons`-lijst, of de cache bevat nog het oude register. Voeg de lijst toe en draai `drush cr`. - **Een set ontbreekt alleen voor sommige redacteurs.** Hun builderprofiel vinkt hem niet aan. Vink hem aan onder **Icon sets** op `/admin/dxpr_studio/dxpr_builder/profile`. - **Pictogrammen tonen in de editor maar niet voor bezoekers.** De editor laadt het `css`-bestand van de set, maar pagina's van bezoekers laden zijn `library`. Zorg dat `library` een library in `mymodule.libraries.yml` noemt die het CSS-bestand bevat. ## Wat nu? - [Aangepaste pictogrammensets](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/pictogrammensets): de YAML-eigenschappenreferentie en de alter hook. - [Een pictogram toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/icon): de instellingen van het Pictogram-element.