---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/icone'
title: 'Ajouter une icône | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:41:38+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Vous obtenez une icône nette à toute taille, seule ou dans une forme colorée. Utilisez-la pour marquer un titre, construire une grille de fonctionnalités ou ajouter un petit lien cliquable.'
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: 'Ajouter une icône'
      description: 'Vous obtenez une icône nette à toute taille, seule ou dans une forme colorée. Utilisez-la pour marquer un titre, construire une grille de fonctionnalités ou ajouter un petit lien cliquable.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:41:38+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/fr/hc/documentation/apprendre-dxpr-builder/elements/icone'
      articleSection: 'Données et animation'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/icone'
      description: 'Vous obtenez une icône nette à toute taille, seule ou dans une forme colorée. Utilisez-la pour marquer un titre, construire une grille de fonctionnalités ou ajouter un petit lien cliquable.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Ajouter du contenu](/fr/hc/documentation/learn-dxpr-builder/elements) /[Données et animation](/fr/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Ajouter une icône.

 Apprendre DXPR BuilderCréer des pagesAjouter du contenuDonnées et animation

   ## Dans ce guide

 Guides associés

- [Modifier l’aspect d’un élément dans le panneau Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style)

Vous obtenez une icône nette à toute taille, seule ou dans une forme colorée. Utilisez-la pour marquer un titre, construire une grille de fonctionnalités ou ajouter un petit lien cliquable.

## Ajouter une icône

Ouvrez votre page une fois la session ouverte : les commandes du constructeur apparaissent au survol de la zone de contenu. [Votre première page](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page) présente les bases.

1. Survolez la colonne et cliquez sur **+** dans sa barre de contrôle, ou cliquez sur **Ajouter des éléments** sur une page vide. Ouvrez l’onglet **Contenu** et cliquez sur **Icône**. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
2. Dans le champ **Icon** en haut de la boîte de dialogue, choisissez un jeu d’icônes, saisissez dans **Search** et cliquez sur une icône. Elle est mise en surbrillance et son nom de classe s’affiche sous la grille.
3. Choisissez une **Size**, par exemple **Very Large (3x)**.
4. Cliquez sur le titre **Icon utilities** pour le déplier et réglez **Style** sur **Circle**.
5. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu pour stocker la page.

  ## Ce que vous voyez

L’icône choisie s’affiche à la taille choisie, blanche dans un cercle gris foncé par défaut. Dans la vidéo, une fusée apparaît en Very Large (3x), trois fois la taille normale. Les visiteurs la voient une fois la page enregistrée et publiée.

## Configurer votre icône

Survolez l’élément et ouvrez **Plus > Paramètres** dans sa barre de contrôle. Options :

- **Icon :** un sélecteur avec une case **Search**, une liste de jeux d’icônes et une grille d’icônes.
- **Size :** Normal, Large, Extra Large (2x), Very Large (3x), Huge (4x) ou Gigantic (5x).
- **Link :** rend l’icône cliquable.
- **Link target :** Same window ou New window. N’apparaît qu’une fois le lien ajouté.
- **Style :** une forme derrière l’icône : None, Rounded, Circle ou Square. Elle se trouve sous **Icon utilities**.
- **Icon animation :** No, Spin ou Pulse.
- **Icon orientation :** Normal, Rotate 90, Rotate 180, Rotate 270, Flip horizontal ou Flip vertical.

## Si rien ne s’affiche

- **L’icône ne figure pas dans l’onglet Contenu.** Votre profil d’utilisateur la masque. Demandez à un administrateur de l’activer dans [Profils d’utilisateurs](/fr/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Elle a disparu après rechargement.** La page n’a pas été enregistrée. Ajoutez-la de nouveau et cliquez sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu.
- **L’icône voulue ne figure pas dans le sélecteur.** Votre profil d’utilisateur limite les jeux d’icônes. Demandez à un administrateur d’ajouter le jeu dans [Profils d’utilisateurs](/fr/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **L’icône est trop petite pour être remarquée.** **Size** est sur Normal ou Large. Survolez l’élément et ouvrez **Plus > Paramètres**, puis choisissez Extra Large (2x) ou plus grand.
- **Le cercle n’a pas la bonne couleur.** La forme est gris foncé par défaut. Survolez l’élément et ouvrez **Plus > Paramètres**, cliquez sur le titre **Style** près du bas et définissez **Background**. **Font color** change l’icône elle-même.

## Et ensuite ?

[Onglet Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style) pour modifier les couleurs et l’espacement de votre icône.