---
title: Ícones
description: O Jamdesk inclui o Font Awesome Pro. Use ícones em cards, avisos, navegação da barra lateral e texto embutido com vários estilos.
---

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

O Jamdesk inclui o **Font Awesome Pro**: milhares de ícones gratuitos e profissionais, prontos para uso.

## Usar ícones em componentes

A maioria dos componentes aceita uma propriedade `icon` com o nome de um ícone do Font Awesome:

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

<Card title="Início rápido" icon="rocket" href="/pt/quickstart">
  Saiba como configurar seu site de documentação.
</Card>

Os ícones funcionam em Cards, Accordions, Tabs e itens de navegação.

## O componente de ícone

Use o componente `<Icon>` para exibir ícones em linha com o texto:

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

<Icon icon="check" color="green" /> Tarefa concluída

### Propriedades de ícones

| Propriedade | Tipo | Padrão | Descrição |
|------|------|---------|-------------|
| `icon` | string | required | Nome do ícone do Font Awesome |
| `color` | string | - | Cor nomeada (red, blue, green) ou hexadecimal (#FF5733) |
| `size` | number | 16 | Tamanho em pixels |

### Exemplos

```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} />

## Encontrar ícones

Explore a biblioteca completa de ícones em [fontawesome.com/icons](https://fontawesome.com/icons). Pesquise o que você precisa e use o nome do ícone na sua documentação.

<Tip>
Ao pesquisar no site do Font Awesome, procure o nome do ícone exibido abaixo dele, por exemplo, "circle-check" ou "arrow-right". Use esse nome exato na sua documentação.
</Tip>

## Ícones de marcas

Logotipos de tecnologias e empresas são detectados e renderizados automaticamente de forma correta:

```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} />

Os ícones de marcas mais comuns incluem:

| Categoria | Ícones |
|----------|-------|
| Redes sociais | github, discord, twitter, linkedin, youtube, slack |
| Linguagens | python, react, vuejs, angular, node-js, php, java |
| Serviços | aws, docker, google, microsoft, stripe, shopify |

## Variantes de ícones

Os ícones do Font Awesome têm várias variantes de estilo que controlam o peso visual. Especifique a variante adicionando um prefixo ao nome do ícone.

### Variantes disponíveis

| Variante | Prefixo | Exemplo | Descrição |
|---------|--------|---------|-------------|
| Sólida | `solid/` | `solid/star` | Ícones preenchidos, com o maior peso |
| Regular | `regular/` | `regular/star` | Ícones contornados, com peso médio |
| Leve | `light/` | `light/star` | Ícones contornados mais finos |
| Fina | `thin/` | `thin/star` | Ícones contornados mais finos possíveis |
| Duotônica | `duotone/` | `duotone/star` | Ícones de dois tons com cores em camadas |

A família **Sharp** do Font Awesome também está disponível, com cantos quadrados: `sharp-solid/`, `sharp-regular/`, `sharp-light/`, `sharp-thin/` e `sharp-duotone-solid/` (por exemplo, `sharp-duotone-solid/star`).

### Exemplos

```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} />

### Usar variantes em componentes

As variantes funcionam em qualquer lugar onde os ícones são usados: componentes, navegação e 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"]
}
```

### Formato de objeto de ícone

Em `docs.json`, sempre que um ícone for aceito — grupos de navegação, tabs, âncoras, ícones de páginas e `popularPages` de pesquisa — você pode escrevê-lo como um objeto em vez de uma string. Esse é o formato gerado pelo seletor de ícones do dashboard:

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

| Campo | Tipo | Descrição |
|-------|------|-------------|
| `name` | string | Nome do ícone do Font Awesome (obrigatório) |
| `style` | string | Uma das variantes acima: `solid`, `regular`, `light`, `thin`, `duotone` ou uma variante `sharp-*` |
| `library` | string | `fontawesome` ou `lucide`, aceito para compatibilidade; os ícones são renderizados pelo Font Awesome |

`{ "name": "shield", "style": "duotone" }` equivale à string `"duotone/shield"`. Use o formato que preferir. O `icon` do frontmatter (ícones de páginas) aceita somente o formato de string.

### Variante padrão

Quando nenhuma variante é especificada, os ícones são renderizados na variante **Sólida**. Substitua-a por ícone usando um prefixo de estilo (`light/gear`) ou, em `docs.json`, o campo `style` do formato de objeto.

### Comparar variantes

Veja o mesmo ícone em todas as variantes para ajudar na escolha:

| Variante | Ícone | Ideal para |
|---------|--------|----------|
| Sólida | <Icon icon="solid/folder" size={20} /> | Ações principais, destaque |
| Regular | <Icon icon="regular/folder" size={20} /> | Elementos secundários da interface |
| Leve | <Icon icon="light/folder" size={20} /> | Designs minimalistas, navegação |
| Fina | <Icon icon="thin/folder" size={20} /> | Estéticas ultraminimalistas |
| Duotônica | <Icon icon="duotone/folder" size={20} /> | Interesse visual, identidade da marca |

<Note>
Os ícones duotônicos usam duas cores: uma tonalidade primária e outra secundária. A camada secundária recebe automaticamente uma opacidade mais clara da cor primária.
</Note>

## Ícones de navegação

Os ícones podem aparecer na navegação da barra lateral em três níveis: âncoras, grupos e páginas individuais.

### Ícones de páginas

Adicione um ícone a qualquer página usando o frontmatter:

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

O ícone aparece na barra lateral ao lado do título da página.

### Ícones de grupos

Adicione ícones aos grupos de navegação em `docs.json`:

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

### Ícones de âncoras

Adicione ícones às âncoras de nível superior em `docs.json`:

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

## Ícones gratuitos e profissionais

O Jamdesk inclui o Font Awesome Pro, o que significa:

- **Mais de 7.000 ícones** disponíveis (em comparação com cerca de 2.000 na versão gratuita)
- Todos os ícones gratuitos funcionam sem alterações
- Ícones exclusivos do Pro, como as variantes duotônicas, estão incluídos
- Ícones com peso leve e fino estão disponíveis

Se você estiver migrando de outra plataforma de documentação que usava o Font Awesome Free, todos os seus ícones existentes continuarão funcionando.

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Otimização de SEO" icon="magnifying-glass-chart" href="/pt/content/seo">
    Melhore a descoberta e os metadados
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/pt/content/frontmatter">
    Defina títulos, descrições e campos de SEO
  </Card>
</Columns>