--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/personalizacion/bibliotecas-iconos' title: 'Bibliotecas de iconos | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:20+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'El selector de iconos en los elementos Icon y Circle counter ofrece cada conjunto de iconos registrado en tu sitio. DXPR Builder trae 14 conjuntos; módulos y temas pueden añadir más con un archivo YAML. Esta página enumera los incluidos, explica cómo se cargan y muestra cómo añadir uno. Para limitar los conjuntos que ve un rol, usa un perfil del constructor; consulta User profiles.' 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: 'Bibliotecas de iconos' description: 'El selector de iconos en los elementos Icon y Circle counter ofrece cada conjunto de iconos registrado en tu sitio. DXPR Builder trae 14 conjuntos; módulos y temas pueden añadir más con un archivo YAML. Esta página enumera los incluidos, explica cómo se cargan y muestra cómo añadir uno. Para limitar los conjuntos que ve un rol, usa un perfil del constructor; consulta User profiles.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:17:20+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/es/hc/documentacion/aprender-dxpr-builder/personalizacion/bibliotecas-iconos' articleSection: 'Adapta tu marca' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/personalizacion/bibliotecas-iconos' description: 'El selector de iconos en los elementos Icon y Circle counter ofrece cada conjunto de iconos registrado en tu sitio. DXPR Builder trae 14 conjuntos; módulos y temas pueden añadir más con un archivo YAML. Esta página enumera los incluidos, explica cómo se cargan y muestra cómo añadir uno. Para limitar los conjuntos que ve un rol, usa un perfil del constructor; consulta User profiles.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Gestionar el sitio](/es/hc/documentation/learn-dxpr-builder/manage) /[Adapta tu marca](/es/hc/documentation/learn-dxpr-builder/customization) # Bibliotecas de iconos. Aprende DXPR BuilderGestionar el sitioAdapta tu marca ## En esta guía Guías relacionadas - [Conjuntos de iconos personalizados](/es/hc/documentacion/aprender-dxpr-builder/desarrollo/conjuntos-iconos) - [Añadir un icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono) El selector de iconos en los elementos **Icon** y **Circle counter** ofrece cada conjunto de iconos registrado en tu sitio. DXPR Builder trae 14 conjuntos; módulos y temas pueden añadir más con un archivo YAML. Esta página enumera los incluidos, explica cómo se cargan y muestra cómo añadir uno. Para limitar los conjuntos que ve un rol, usa un perfil del constructor; consulta [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion). ## Conjuntos de iconos incluidos Los conjuntos se registran en `dxpr_builder.dxpr_icon_sets.yml`: | Clave | Etiqueta en el selector | Prefijo de clase | Biblioteca | |---|---|---|---| | `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` | El selector no ofrece el conjunto `fa`, porque no tiene lista de iconos. Hace que los iconos guardados con la vieja clase `fa` carguen la biblioteca Font Awesome. Las páginas guardadas con los viejos nombres de biblioteca Font Awesome también reciben la hoja de estilos `dxpr_builder/elements.font_awesome_v4_shims`, así que sus iconos siguen mostrándose. Todos los conjuntos Font Awesome cargan Font Awesome Free 7. La biblioteca conserva su nombre de máquina de la versión 6, porque páginas guardadas y código personalizado la referencian. [Font Awesome 7 en DXPR Builder](/es/hc/documentation/learn-dxpr-builder/getting-started/font-awesome-7) enumera lo que cambió. ## Cómo el selector y las páginas cargan iconos El desplegable de conjuntos empieza con **All icon sets**, y luego enumera cada conjunto registrado que tiene lista de iconos. Los 13 conjuntos incluidos salvo `fa` tienen listas integradas, así que un sitio solo con DXPR Builder muestra 14 entradas. Un conjunto de otro módulo o tema necesita una lista `icons` en su YAML para aparecer. Cuando una persona que edita escoge un icono, el elemento guarda las clases del icono, como `bi bi-star`, y el nombre de su biblioteca. Las visitas descargan entonces solo las fuentes de iconos que su página usa. En el editor, ET Line, Pixeden y Glyphicon se cargan con el propio editor; el selector carga las hojas de estilo de los demás conjuntos cuando se abre. Cómo escogen y dan estilo a un icono las personas que editan está en [Añadir un icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono). ## Limita conjuntos de iconos por rol Cada perfil del constructor tiene un grupo **Icon sets** con una casilla por conjunto y una casilla **Check/Uncheck all Icon sets**. Configúralo en **DXPR Studio** > **DXPR Builder** > **User Profiles**; [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion) tiene los pasos. Cómo se comporta el grupo: - Con **Check/Uncheck all Icon sets** marcado, el rol ve cada conjunto, incluidos los añadidos después. - Sin marcar, el rol ve solo los conjuntos marcados. Un perfil nuevo empieza así, con cada conjunto marcado, así que un conjunto añadido después queda oculto hasta que lo marcas. - Sin marcar y sin ningún conjunto marcado, el selector está vacío. - Los iconos ya puestos en una página siguen mostrándose. El perfil solo cambia lo que ofrece el selector. ## Añade un conjunto de iconos Un conjunto de iconos es una entrada YAML más una biblioteca Drupal. DXPR Builder lee `*.dxpr_icon_sets.yml` de cada módulo y tema instalado. La referencia de propiedades y el hook de alteración están en [Conjuntos de iconos personalizados](/es/hc/documentacion/aprender-dxpr-builder/desarrollo/conjuntos-iconos). 1. Crea `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` es relativo a la carpeta del módulo y se carga en el editor. Cada icono es el prefijo más una clase que empieza con el prefijo y un guion. 2. Declara la biblioteca en `mymodule.libraries.yml`. Las páginas de visitas la cargan: ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Limpia cachés con `drush cr`. 4. Marca el conjunto nuevo en cada perfil del constructor que no tiene **Check/Uncheck all Icon sets** marcado. 5. Abre los ajustes de un elemento **Icon** y elige **Brand icons** en el desplegable de conjuntos. Un módulo personalizado también puede quitar un conjunto del selector con un hook de alteración; el código está en [Referencia de la API de hooks](/es/hc/documentacion/aprender-dxpr-builder/desarrollo/api-hooks#hook_dxpr_builder_icon_sets_alter). Los iconos de un conjunto incluido siguen cargándose en páginas guardadas. Los iconos de un conjunto personalizado quitado dejan de cargar su CSS, porque DXPR Builder solo adjunta una biblioteca que nombra un conjunto registrado. ## Si falta un conjunto de iconos - **Un conjunto nuevo no está en el desplegable.** Su YAML no tiene lista `icons`, o la caché aún guarda el registro viejo. Añade la lista y ejecuta `drush cr`. - **Falta un conjunto solo para algunas personas que editan.** Su perfil del constructor no lo marca. Márcalo en **Icon sets** desde `/admin/dxpr_studio/dxpr_builder/profile`. - **Los iconos se ven en el editor, pero no para las visitas.** El editor carga el archivo `css` del conjunto, pero las páginas de visitas cargan su `library`. Asegúrate de que `library` nombra una biblioteca en `mymodule.libraries.yml` que contiene el archivo CSS. ## ¿Qué sigue? - [Conjuntos de iconos personalizados](/es/hc/documentacion/aprender-dxpr-builder/desarrollo/conjuntos-iconos): la referencia de propiedades YAML y el hook de alteración. - [Añadir un icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono): los ajustes del elemento Icon.