---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/elements/icon'
title: 'Añadir un icono | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:13:21+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Obtienes un icono nítido en cualquier tamaño, solo o dentro de una forma de color. Úsalo para señalar un encabezado, construir una cuadrícula de funciones o añadir un pequeño enlace clicable.'
tags:
  - 'Data en beweging'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Añadir un icono'
      description: 'Obtienes un icono nítido en cualquier tamaño, solo o dentro de una forma de color. Úsalo para señalar un encabezado, construir una cuadrícula de funciones o añadir un pequeño enlace clicable.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:13:21+0000'
      dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/elements/icon'
      articleSection: 'Data en beweging'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/elements/icon'
      description: 'Obtienes un icono nítido en cualquier tamaño, solo o dentro de una forma de color. Úsalo para señalar un encabezado, construir una cuadrícula de funciones o añadir un pequeño enlace clicable.'
      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
---
[Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data en beweging](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Añadir un icono.

 Learn DXPR BuilderBuild pagesAdd contentData en beweging

   ## In this guide

 Related guides

- [Cambia el aspecto de un elemento en el panel Style](/es/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

Obtienes un icono nítido en cualquier tamaño, solo o dentro de una forma de color. Úsalo para señalar un encabezado, construir una cuadrícula de funciones o añadir un pequeño enlace clicable.

## Añade un icono

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. [Crea tu primera página](/es/hc/documentation/learn-dxpr-builder/getting-started/first-page) muestra lo básico.

1. Pasa el cursor sobre la columna y haz clic en **+** en su barra de controles, o haz clic en **Add Elements** en una página vacía. Abre la pestaña **Content** y haz clic en **Icon**. Queda arriba de la columna y su diálogo de ajustes se abre.
2. En el campo **Icon** arriba del diálogo, elige un conjunto de iconos, escribe en **Search** y haz clic en un icono. Queda resaltado y su nombre de clase se muestra bajo la cuadrícula.
3. Elige un **Size**, por ejemplo **Very Large (3x)**.
4. Haz clic en el encabezado **Icon utilities** para expandirlo y pon **Style** en **Circle**.
5. Haz clic en **Save** en el diálogo. Luego haz clic en **Save** en la barra de herramientas arriba de la zona de contenido para guardar la página.

  ## Lo que ves

El icono que elegiste se muestra en el tamaño que elegiste, blanco dentro de un círculo gris oscuro por defecto. En el vídeo, un cohete aparece en Very Large (3x), tres veces el tamaño normal. Las visitas lo ven cuando guardas la página y está publicada.

## Configura tu icono

Pasa el cursor sobre el elemento y abre **More > Settings** en su barra de controles. Opciones:

- **Icon:** un selector con un cuadro **Search**, una lista de conjuntos de iconos y una cuadrícula de iconos.
- **Size:** Normal, Large, Extra Large (2x), Very Large (3x), Huge (4x) o Gigantic (5x).
- **Link:** vuelve el icono clicable.
- **Link target:** Same window o New window. Se muestra cuando añades un enlace.
- **Style:** una forma tras el icono: None, Rounded, Circle o Square. Está bajo **Icon utilities**.
- **Icon animation:** No, Spin o Pulse.
- **Icon orientation:** Normal, Rotate 90, Rotate 180, Rotate 270, Flip horizontal o Flip vertical.

## Si no lo ves

- **Icon no está en la pestaña Content.** Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en [User profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Ya no está tras recargar.** La página no se guardó. Añádelo de nuevo y haz clic en **Save** en la barra de herramientas arriba de la zona de contenido.
- **El icono que quieres no está en el selector.** Tu perfil de usuario limita los conjuntos de iconos. Pide a una cuenta administradora que añada el conjunto en [User profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **El icono es muy pequeño para notarlo.** **Size** está en Normal o Large. Pasa el cursor sobre el elemento y abre **More > Settings**, y elige Extra Large (2x) o mayor.
- **El círculo tiene el color equivocado.** La forma es gris oscuro por defecto. Pasa el cursor sobre el elemento y abre **More > Settings**, haz clic en el encabezado **Style** cerca del final y define **Background**. **Font color** cambia el icono mismo.

## ¿Qué sigue?

[Panel Style](/es/hc/documentation/learn-dxpr-builder/element-settings/style-tab) para cambiar colores y espaciado de tu icono.