--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/icon' title: 'Ein Icon hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:54:39+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Sie erhalten ein scharfes Icon in jeder Größe, allein oder in einer farbigen Form. Nutzen Sie es, um eine Überschrift zu markieren, ein Feature-Raster zu bauen oder einen kleinen klickbaren Link zu setzen.' 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: 'Ein Icon hinzufügen' description: 'Sie erhalten ein scharfes Icon in jeder Größe, allein oder in einer farbigen Form. Nutzen Sie es, um eine Überschrift zu markieren, ein Feature-Raster zu bauen oder einen kleinen klickbaren Link zu setzen.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:54:39+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/de/hc/dokumentation/dxpr-builder-lernen/elemente/icon' articleSection: 'Daten und Animation' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/icon' description: 'Sie erhalten ein scharfes Icon in jeder Größe, allein oder in einer farbigen Form. Nutzen Sie es, um eine Überschrift zu markieren, ein Feature-Raster zu bauen oder einen kleinen klickbaren Link zu setzen.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Inhalte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements) /[Daten und Animation](/de/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Ein Icon hinzufügen. DXPR Builder lernenSeiten erstellenInhalte hinzufügenDaten und Animation ## In diesem Leitfaden Verwandte Leitfäden - [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab) Sie erhalten ein scharfes Icon in jeder Größe, allein oder in einer farbigen Form. Nutzen Sie es, um eine Überschrift zu markieren, ein Feature-Raster zu bauen oder einen kleinen klickbaren Link zu setzen. ## Ein Icon hinzufügen Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. [Ihre erste Seite](/de/hc/dokumentation/dxpr-builder-lernen/erste-schritte/erste-seite) zeigt die Grundlagen. 1. Fahren Sie mit der Maus über die Spalte und klicken Sie in ihrer Steuerleiste auf **+**; klicken Sie auf einer leeren Seite auf **Add Elements**. Öffnen Sie den **Content**-Tab und klicken Sie auf **Icon**. Das Icon landet oben in der Spalte und sein Einstellungsdialog öffnet sich. 2. Wählen Sie im Feld **Icon** oben im Dialog ein Icon-Set, geben Sie unter **Search** etwas ein und klicken Sie auf ein Icon. Es wird markiert und sein Klassenname erscheint unter dem Raster. 3. Wählen Sie eine **Size**, zum Beispiel **Very Large (3x)**. 4. Klicken Sie auf die Überschrift **Icon utilities**, um sie aufzuklappen, und stellen Sie **Style** auf **Circle**. 5. Klicken Sie im Dialog auf **Speichern**. Klicken Sie dann in der Symbolleiste oben im Inhaltsbereich auf **Speichern**, um die Seite zu speichern. ## Was Sie sehen Das von Ihnen gewählte Icon erscheint in der gewählten Größe, standardmäßig weiß in einem dunkelgrauen Kreis. Im Video erscheint eine Rakete in Very Large (3x), der dreifachen Normalgröße. Besucher sehen es, sobald Sie die Seite speichern und sie veröffentlicht ist. ## Ihr Icon einrichten Fahren Sie mit der Maus über das Element und öffnen Sie in seiner Steuerleiste **More > Settings**. Optionen: - **Icon:** eine Auswahl mit **Search**-Feld, Icon-Set-Liste und Icon-Raster. - **Size:** Normal, Large, Extra Large (2x), Very Large (3x), Huge (4x) oder Gigantic (5x). - **Link:** macht das Icon klickbar. - **Link target:** Same window oder New window. Wird angezeigt, sobald Sie einen Link hinzufügen. - **Style:** eine Form hinter dem Icon: None, Rounded, Circle oder Square. Steht unter **Icon utilities**. - **Icon animation:** No, Spin oder Pulse. - **Icon orientation:** Normal, Rotate 90, Rotate 180, Rotate 270, Flip horizontal oder Flip vertical. ## Wenn Sie es nicht sehen - **Das Icon ist nicht im Content-Tab.** Ihr Benutzerprofil blendet es aus. Bitten Sie die Administration, es unter [User Profiles](/de/hc/dokumentation/dxpr-builder-lernen/verwaltung/benutzerprofile-verwaltung) zu aktivieren. - **Es ist nach dem Neuladen verschwunden.** Die Seite wurde nicht gespeichert. Fügen Sie es erneut hinzu und klicken Sie in der Symbolleiste oben im Inhaltsbereich auf **Speichern**. - **Das gewünschte Icon ist nicht in der Auswahl.** Ihr Benutzerprofil begrenzt die Icon-Sets. Bitten Sie die Administration, das Set unter [User Profiles](/de/hc/dokumentation/dxpr-builder-lernen/verwaltung/benutzerprofile-verwaltung) hinzuzufügen. - **Das Icon ist zu klein, um aufzufallen.** **Size** steht auf Normal oder Large. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, und wählen Sie dann Extra Large (2x) oder größer. - **Der Kreis hat die falsche Farbe.** Die Form ist standardmäßig dunkelgrau. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, klicken Sie weiter unten auf die Überschrift **Style** und stellen Sie **Background** ein. **Font color** ändert das Icon selbst. ## Wie geht es weiter? [Style-Tab](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab), um Farben und Abstände Ihres Icons zu ändern.