---
title: Iconos
description: Jamdesk incluye Font Awesome Pro -- usa iconos en tarjetas, llamadas, navegación de la barra lateral y texto en línea con múltiples variantes de estilo.
---

Jamdesk incluye **Font Awesome Pro** -- miles de iconos, tanto gratuitos como pro, listos para usar.

## Usar iconos en componentes

La mayoría de los componentes aceptan una prop `icon` con un nombre de icono de Font Awesome:

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

<Card title="Inicio rápido" icon="rocket" href="/es/quickstart">
  Aprende a configurar tu sitio de documentación.
</Card>

Los iconos funcionan en Cards, Accordions, Tabs y elementos de navegación.

## El componente Icon

Usa el componente `<Icon>` para mostrar iconos en línea con texto:

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

<Icon icon="check" color="green" /> Tarea completada

### Props de Icon

| Prop | Tipo | Predeterminado | Descripción |
|------|------|----------------|-------------|
| `icon` | string | requerido | Nombre del icono de Font Awesome |
| `color` | string | - | Color nombrado (red, blue, green) o hexadecimal (#FF5733) |
| `size` | number | 16 | Tamaño en píxeles |

### Ejemplos

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

## Buscar iconos

Explora la biblioteca completa de iconos en [fontawesome.com/icons](https://fontawesome.com/icons). Busca lo que necesites y luego usa el nombre del icono en tus docs.

<Tip>
Al buscar en el sitio de Font Awesome, fíjate en el nombre del icono que aparece debajo de él (p. ej., "circle-check", "arrow-right"). Usa ese nombre exacto en tus docs.
</Tip>

## Iconos de marcas

Los logotipos de tecnologías y empresas se detectan automáticamente y se renderizan correctamente:

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

Los iconos de marcas más comunes incluyen:

| Categoría | Iconos |
|-----------|--------|
| Social | github, discord, twitter, linkedin, youtube, slack |
| Lenguajes | python, react, vuejs, angular, node-js, php, java |
| Servicios | aws, docker, google, microsoft, stripe, shopify |

## Variantes de iconos

Los iconos de Font Awesome vienen en múltiples variantes de estilo, lo que te da control sobre el peso visual y la apariencia. Especifica la variante añadiendo un prefijo al nombre del icono.

### Variantes disponibles

| Variante | Prefijo | Ejemplo | Descripción |
|----------|---------|---------|-------------|
| Solid | `solid/` | `solid/star` | Iconos rellenos, mayor peso visual |
| Regular | `regular/` | `regular/star` | Iconos con contorno, peso medio |
| Light | `light/` | `light/star` | Iconos con contorno más fino |
| Thin | `thin/` | `thin/star` | Iconos con contorno más delgado |
| Duotone | `duotone/` | `duotone/star` | Iconos bicolor con capas de colores |

### Ejemplos

```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 en componentes

Las variantes funcionan en cualquier lugar donde se usen iconos: componentes, navegación y 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"]
}
```

### Variante predeterminada

Cuando no se especifica ninguna variante, Jamdesk usa un valor predeterminado apropiado según el tema:

- **Tema Jam**: Usa la variante `light` para un aspecto limpio y minimalista
- **Otros temas**: Usa la variante `solid` para máxima visibilidad

Siempre puedes anular el valor predeterminado especificando una variante de forma explícita.

### Comparar variantes

Aquí está el mismo icono en todas las variantes para ayudarte a elegir:

| Variante | Icono | Ideal para |
|----------|-------|------------|
| Solid | <Icon icon="solid/folder" size={20} /> | Acciones principales, énfasis |
| Regular | <Icon icon="regular/folder" size={20} /> | Elementos de UI secundarios |
| Light | <Icon icon="light/folder" size={20} /> | Diseños minimalistas, navegación |
| Thin | <Icon icon="thin/folder" size={20} /> | Estética ultraminimalista |
| Duotone | <Icon icon="duotone/folder" size={20} /> | Interés visual, branding |

<Note>
Los iconos Duotone usan dos colores: uno primario y uno secundario. La capa secundaria se establece automáticamente con una opacidad más clara del color primario.
</Note>

## Iconos de navegación

Los iconos pueden aparecer en la navegación de la barra lateral en tres niveles: anclajes, grupos y páginas individuales.

### Iconos de página

Añade un icono a cualquier página mediante frontmatter:

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

El icono aparece en la barra lateral junto al título de la página.

### Iconos de grupo

Añade iconos a los grupos de navegación en `docs.json`:

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

### Iconos de anclaje

Añade iconos a los anclajes de nivel superior en `docs.json`:

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

## Iconos gratuitos vs. pro

Jamdesk incluye Font Awesome Pro, lo que significa:

- **Más de 7,000 iconos** disponibles (frente a ~2,000 en la versión gratuita)
- Todos los iconos gratuitos funcionan sin ningún cambio
- Iconos exclusivos pro, como las variantes duotone, están incluidos
- Iconos de peso light y thin disponibles

Si estás migrando desde otra plataforma de documentación que usaba Font Awesome Free, todos tus iconos existentes seguirán funcionando.

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Optimización SEO" icon="magnifying-glass-chart" href="/es/content/seo">
    Mejora el descubrimiento y los metadatos
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/es/content/frontmatter">
    Define títulos, descripciones y campos SEO
  </Card>
</Columns>