---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/icone'
title: 'Adicionar um ícone | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:11:05+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Obtém um ícone nítido em qualquer tamanho, sozinho ou dentro de uma forma colorida. Utilize-o para assinalar um título, construir uma grelha de funcionalidades ou adicionar uma pequena ligação clicável.'
tags:
  - 'Data and motion'
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: 'Adicionar um ícone'
      description: 'Obtém um ícone nítido em qualquer tamanho, sozinho ou dentro de uma forma colorida. Utilize-o para assinalar um título, construir uma grelha de funcionalidades ou adicionar uma pequena ligação clicável.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:11:05+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/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/icone'
      articleSection: 'Dados e movimento'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/icone'
      description: 'Obtém um ícone nítido em qualquer tamanho, sozinho ou dentro de uma forma colorida. Utilize-o para assinalar um título, construir uma grelha de funcionalidades ou adicionar uma pequena ligação clicável.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Adicionar conteúdos](/pt-pt/hc/documentation/learn-dxpr-builder/elements) /[Dados e movimento](/pt-pt/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adicionar um ícone.

 Aprender DXPR BuilderCriar páginasAdicionar conteúdosDados e movimento

   ## Neste guia

 Guias relacionados

- [Altere o aspeto de um elemento no painel Style](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/separador-de-estilo)

Obtém um ícone nítido em qualquer tamanho, sozinho ou dentro de uma forma colorida. Utilize-o para assinalar um título, construir uma grelha de funcionalidades ou adicionar uma pequena ligação clicável.

## Adicionar um ícone

Abra a sua página com sessão iniciada: os controlos do construtor aparecem quando paira o cursor sobre a área de conteúdo. [Crie a sua primeira página](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina) mostra o essencial.

1. Paire o cursor sobre a coluna e clique em **+** na barra de controlos, ou clique em **Add Elements** numa página vazia. Abra o separador **Content** e clique em **Icon**. O elemento é colocado no topo da coluna e o diálogo de definições abre.
2. No campo **Icon** no topo do diálogo, escolha um conjunto de ícones, escreva em **Search** e clique num ícone. Fica destacado e o nome da classe aparece por baixo da grelha.
3. Escolha um **Size**, por exemplo **Very Large (3x)**.
4. Clique no título **Icon utilities** para expandir e defina **Style** como **Circle**.
5. Clique em **Save** no diálogo. Depois clique em **Save** na barra de ferramentas no topo da área de conteúdo para guardar a página.

  ## O que vê

O ícone que escolheu aparece no tamanho que escolheu, branco dentro de um círculo cinzento-escuro por predefinição. No vídeo, um foguetão aparece em Very Large (3x), três vezes o tamanho normal. Os visitantes veem-no depois de guardar a página e de esta ser publicada.

## Configurar o ícone

Paire o cursor sobre o elemento e abra **More > Settings** na barra de controlos. Opções:

- **Icon:** um seletor com caixa **Search**, lista de conjuntos de ícones e grelha de ícones.
- **Size:** Normal, Large, Extra Large (2x), Very Large (3x), Huge (4x) ou Gigantic (5x).
- **Link:** torna o ícone clicável.
- **Link target:** Same window ou New window. Aparece depois de adicionar uma ligação.
- **Style:** uma forma atrás do ícone: None, Rounded, Circle ou Square. Está em **Icon utilities**.
- **Icon animation:** No, Spin ou Pulse.
- **Icon orientation:** Normal, Rotate 90, Rotate 180, Rotate 270, Flip horizontal ou Flip vertical.

## Se não o vir

- **O Icon não está no separador Content.** O seu perfil de utilizador oculta-o. Peça a um administrador para o ativar em [User Profiles](/pt-pt/hc/documentacao/aprender-dxpr-builder/administracao/administracao-de-perfis-de-utilizador).
- **Desapareceu depois de recarregar.** A página não foi guardada. Adicione-o novamente e clique em **Save** na barra de ferramentas no topo da área de conteúdo.
- **O ícone que quer não está no seletor.** O seu perfil de utilizador limita os conjuntos de ícones. Peça a um administrador para adicionar o conjunto em [User Profiles](/pt-pt/hc/documentacao/aprender-dxpr-builder/administracao/administracao-de-perfis-de-utilizador).
- **O ícone é demasiado pequeno para se notar.** **Size** é Normal ou Large. Paire o cursor sobre o elemento e abra **More > Settings**, depois escolha Extra Large (2x) ou maior.
- **O círculo tem a cor errada.** A forma é cinzento-escura por predefinição. Paire o cursor sobre o elemento e abra **More > Settings**, clique no título **Style** perto do fundo e defina **Background**. **Font color** muda o próprio ícone.

## E a seguir?

[Separador Style](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/separador-de-estilo) para alterar as cores e o espaçamento do seu ícone.