---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/icon'
title: 'Adding an Icon | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:30:18+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Icon from configured icon sets'
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-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: 'Adding an Icon'
      description: 'Icon from configured icon sets'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:30:18+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/elements/icon'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/icon'
      description: 'Icon from configured icon sets'
      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) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adding an Icon.

Icon from configured icon sets

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a sharp icon at any size, alone or inside a coloured shape. Use it to mark a heading, build a feature grid or add a small clickable link.

## Add an icon

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Icon**. It lands at the top of the column and its settings dialog opens.
2. In the **Icon** field at the top of the dialog, choose an icon set, type in **Search** and click an icon. It is highlighted and its class name shows below the grid.
3. Choose a **Size**, for example **Very Large (3x)**.
4. Click the **Icon utilities** heading to expand it and set **Style** to **Circle**.
5. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

The icon you picked shows at the size you chose, white inside a dark grey circle by default. In the video, a rocket appears at Very Large (3x), three times the normal size. Visitors see it once you save the page and it is published.

## Set up your icon

Hover the element and open **More > Settings** in its control bar. Options:

- **Icon:** a picker with a **Search** box, an icon set list and a grid of icons.
- **Size:** Normal, Large, Extra Large (2x), Very Large (3x), Huge (4x) or Gigantic (5x).
- **Link:** makes the icon clickable.
- **Link target:** Same window or New window. It shows once you add a link.
- **Style:** a shape behind the icon: None, Rounded, Circle or Square. It sits under **Icon utilities**.
- **Icon animation:** No, Spin or Pulse.
- **Icon orientation:** Normal, Rotate 90, Rotate 180, Rotate 270, Flip horizontal or Flip vertical.

## If you don't see it

- **Icon is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **The icon you want is not in the picker.** Your user profile limits the icon sets. Ask an administrator to add the set in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **The icon is too small to notice.** **Size** is Normal or Large. Hover the element and open **More > Settings**, then pick Extra Large (2x) or bigger.
- **The circle is the wrong colour.** The shape is dark grey by default. Hover the element and open **More > Settings**, click the **Style** heading near the bottom and set **Background**. **Font color** changes the icon itself.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change colours and spacing for your icon.