---
title: Icons
description: Jamdesk wird mit Font Awesome Pro geliefert. Verwende Icons in Karten, Hinweisen, der Seitenleisten-Navigation und Inline-Text mit mehreren Stilvarianten.
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Jamdesk wird mit **Font Awesome Pro** geliefert: Tausende kostenlose und Pro-Icons stehen zur Verwendung bereit.

## Icons in Komponenten verwenden

Die meisten Komponenten akzeptieren eine `icon`-Prop mit dem Namen eines Font Awesome-Icons:

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Learn how to set up your documentation site.
</Card>
```

<Card title="Quickstart" icon="rocket" href="/de/quickstart">
  Erfahre, wie du deine Dokumentationsseite einrichtest.
</Card>

Icons funktionieren in Cards, Accordions, Tabs und Navigationselementen.

## Die Icon-Komponente

Verwende die `<Icon>`-Komponente, um Icons inline mit Text anzuzeigen:

```mdx
<Icon icon="check" color="green" /> Task completed
```

<Icon icon="check" color="green" /> Aufgabe abgeschlossen

### Icon-Props

| Prop | Typ | Standardwert | Beschreibung |
|------|------|-------------|-------------|
| `icon` | string | erforderlich | Name des Font Awesome-Icons |
| `color` | string | - | Benannte Farbe (red, blue, green) oder Hexadezimalwert (#FF5733) |
| `size` | number | 16 | Größe in Pixeln |

### Beispiele

```mdx
<Icon icon="star" color="yellow" size={24} />
<Icon icon="circle-check" color="green" />
<Icon icon="triangle-exclamation" color="orange" />
<Icon icon="heart" color="#E91E63" size={20} />
```

<Icon icon="star" color="yellow" size={24} /> <Icon icon="circle-check" color="green" /> <Icon icon="triangle-exclamation" color="orange" /> <Icon icon="heart" color="#E91E63" size={20} />

## Icons finden

Durchsuche die vollständige Icon-Bibliothek unter [fontawesome.com/icons](https://fontawesome.com/icons). Suche nach dem gewünschten Icon und verwende anschließend dessen Namen in deiner Dokumentation.

<Tip>
Wenn du auf der Website von Font Awesome suchst, achte auf den Namen, der unter dem Icon angezeigt wird (z. B. „circle-check“ oder „arrow-right“). Verwende diesen Namen exakt in deiner Dokumentation.
</Tip>

## Marken-Icons

Technologie- und Unternehmenslogos werden automatisch erkannt und korrekt dargestellt:

```mdx
<Icon icon="github" size={24} />
<Icon icon="discord" size={24} />
<Icon icon="react" size={24} />
<Icon icon="python" size={24} />
```

<Icon icon="github" size={24} /> <Icon icon="discord" size={24} /> <Icon icon="react" size={24} /> <Icon icon="python" size={24} />

Zu den häufig verwendeten Marken-Icons gehören:

| Kategorie | Icons |
|----------|-------|
| Soziale Netzwerke | github, discord, twitter, linkedin, youtube, slack |
| Programmiersprachen | python, react, vuejs, angular, node-js, php, java |
| Dienste | aws, docker, google, microsoft, stripe, shopify |

## Icon-Varianten

Font Awesome-Icons sind in mehreren Stilvarianten verfügbar, die die visuelle Stärke bestimmen. Gib die Variante an, indem du dem Icon-Namen ein Präfix voranstellst.

### Verfügbare Varianten

| Variante | Präfix | Beispiel | Beschreibung |
|---------|--------|----------|-------------|
| Solid | `solid/` | `solid/star` | Ausgefüllte Icons mit der stärksten Strichstärke |
| Regular | `regular/` | `regular/star` | Umriss-Icons mit mittlerer Strichstärke |
| Light | `light/` | `light/star` | Dünnere Umriss-Icons |
| Thin | `thin/` | `thin/star` | Die dünnsten Umriss-Icons |
| Duotone | `duotone/` | `duotone/star` | Zweifarbige Icons mit überlagerten Farben |

Die **Sharp**-Familie von Font Awesome ist ebenfalls verfügbar und hat eckige Ecken: `sharp-solid/`, `sharp-regular/`, `sharp-light/`, `sharp-thin/` und `sharp-duotone-solid/` (z. B. `sharp-duotone-solid/star`).

### Beispiele

```mdx
<Icon icon="solid/bell" size={24} />
<Icon icon="regular/bell" size={24} />
<Icon icon="light/bell" size={24} />
<Icon icon="thin/bell" size={24} />
<Icon icon="duotone/bell" size={24} />
```

<Icon icon="solid/bell" size={24} /> <Icon icon="regular/bell" size={24} /> <Icon icon="light/bell" size={24} /> <Icon icon="thin/bell" size={24} /> <Icon icon="duotone/bell" size={24} />

### Varianten in Komponenten verwenden

Varianten funktionieren überall dort, wo Icons verwendet werden: in Komponenten, der Navigation und im Frontmatter.

```mdx
<Card title="Callouts" icon="light/bell" href="/components/callouts">
  Add important notices to your documentation.
</Card>
```

```yaml page.mdx
---
title: Settings
icon: light/gear
---
```

```json docs.json
{
  "group": "Account",
  "icon": "regular/user",
  "pages": ["profile", "settings"]
}
```

### Objektform für Icons

In `docs.json` kannst du überall dort, wo ein Icon akzeptiert wird (Navigationsgruppen, Tabs, Anker, Seiten-Icons und `popularPages` für die Suche), das Icon anstelle eines Strings als Objekt angeben. Diese Form erzeugt die Icon-Auswahl des Dashboards:

```json docs.json
{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}
```

| Feld | Typ | Beschreibung |
|-------|------|-------------|
| `name` | string | Name des Font Awesome-Icons (erforderlich) |
| `style` | string | Eine der oben genannten Varianten: `solid`, `regular`, `light`, `thin`, `duotone` oder eine `sharp-*`-Variante |
| `library` | string | `fontawesome` oder `lucide`, aus Kompatibilitätsgründen akzeptiert; Icons werden über Font Awesome dargestellt |

`{ "name": "shield", "style": "duotone" }` entspricht dem String `"duotone/shield"`. Verwende die Form, die du bevorzugst. Das Frontmatter-`icon` für Seiten-Icons akzeptiert nur die String-Form.

### Standardvariante

Wenn keine Variante angegeben ist, werden Icons in der Variante **Solid** dargestellt. Überschreibe sie pro Icon mit einem Stilpräfix (`light/gear`) oder in `docs.json` über das Feld `style` der Objektform.

### Varianten vergleichen

Hier siehst du dasselbe Icon in allen Varianten, um dir die Auswahl zu erleichtern:

| Variante | Icon | Geeignet für |
|---------|------|----------|
| Solid | <Icon icon="solid/folder" size={20} /> | Primäre Aktionen, Hervorhebungen |
| Regular | <Icon icon="regular/folder" size={20} /> | Sekundäre UI-Elemente |
| Light | <Icon icon="light/folder" size={20} /> | Minimalistische Designs, Navigation |
| Thin | <Icon icon="thin/folder" size={20} /> | Besonders minimalistische Ästhetik |
| Duotone | <Icon icon="duotone/folder" size={20} /> | Visuelles Interesse, Branding |

<Note>
Duotone-Icons verwenden zwei Farben: einen primären und einen sekundären Farbton. Die sekundäre Ebene erhält automatisch eine hellere Transparenz als die Primärfarbe.
</Note>

## Navigations-Icons

Icons können in der Seitenleisten-Navigation auf drei Ebenen erscheinen: bei Ankern, Gruppen und einzelnen Seiten.

### Seiten-Icons

Füge einer beliebigen Seite über das Frontmatter ein Icon hinzu:

```yaml authentication.mdx
---
title: Authentication
icon: lock
---
```

Das Icon erscheint in der Seitenleiste neben dem Seitentitel.

### Gruppen-Icons

Füge Navigationsgruppen in `docs.json` Icons hinzu:

```json docs.json
{
  "group": "Security",
  "icon": "shield",
  "pages": ["authentication", "api-keys"]
}
```

### Anker-Icons

Füge übergeordneten Ankern in `docs.json` Icons hinzu:

```json docs.json
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Docs",
        "icon": "book-open",
        "groups": [...]
      },
      {
        "anchor": "API",
        "icon": "code",
        "groups": [...]
      }
    ]
  }
}
```

## Kostenlose und Pro-Icons

Jamdesk enthält Font Awesome Pro. Das bedeutet:

- **7.000+ Icons** verfügbar (gegenüber etwa 2.000 in der kostenlosen Version)
- Alle kostenlosen Icons funktionieren ohne Änderungen
- Exklusive Pro-Icons wie Duotone-Varianten sind enthalten
- Icons mit leichter und dünner Strichstärke sind verfügbar

Wenn du von einer anderen Dokumentationsplattform migrierst, die Font Awesome Free verwendet hat, funktionieren alle deine vorhandenen Icons weiterhin.

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="SEO-Optimierung" icon="magnifying-glass-chart" href="/de/content/seo">
    Verbessere Auffindbarkeit und Metadaten
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/de/content/frontmatter">
    Definiere Titel, Beschreibungen und SEO-Felder
  </Card>
</Columns>