# Iconos (/es/components/icons)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 992 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

Utiliza iconos de Font Awesome, Lucide, Tabler, SVG (Scalable Vector Graphics), URLs externas o archivos de tu proyecto para mejorar tu documentación.

<Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M5.0249 21C5.04385 19.2643 5.04366 17.5541 5.0366 15.9209M5.0366 15.9209C5.01301 10.4614 4.91276 5.86186 5.19475 4.04271C5.5611 1.67939 9.39301 3.82993 13.9703 5.59842L16.0328 6.48729C17.5508 7.1415 19.7187 8.30352 18.7662 9.66084C18.3738 10.22 17.56 10.8596 16.0575 11.567L5.0366 15.9209Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" size="32" />

```mdx title="Icon example"
<Icon icon="flag" size={32} />
```

## Iconos de imagen personalizados [#iconos-de-imagen-personalizados]

Usa la prop `src` para mostrar una imagen personalizada como icono. La imagen puede ser un archivo de tu proyecto o una URL alojada externamente.

```mdx title="Custom image icon examples"
<Icon src="/images/mi-icono.svg" />

<Icon src="https://example.com/icon.png" />
```

<div id="inline-icons">
  ## Iconos en línea [#iconos-en-línea]
</div>

Los iconos se colocan en línea cuando se utilizan dentro de una oración, un párrafo o un encabezado. <Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M5.0249 21C5.04385 19.2643 5.04366 17.5541 5.0366 15.9209M5.0366 15.9209C5.01301 10.4614 4.91276 5.86186 5.19475 4.04271C5.5611 1.67939 9.39301 3.82993 13.9703 5.59842L16.0328 6.48729C17.5508 7.1415 19.7187 8.30352 18.7662 9.66084C18.3738 10.22 17.56 10.8596 16.0575 11.567L5.0366 15.9209Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" iconType="solid" /> Utiliza iconos con fines decorativos o para aportar énfasis visual.

```markdown title="Inline icon example"
Los iconos se colocan en línea cuando se usan dentro de una oración, párrafo o encabezado. <Icon icon="flag" iconType="solid" /> Usa iconos para decoración o para añadir énfasis visual.
```

<div id="properties">
  ## Propiedades [#propiedades]
</div>

<Info>
  Debes proporcionar `icon` o `src`.
</Info>

<ResponseField name="icon" type="string">
  El icono que se mostrará desde una biblioteca de iconos.

  Options:

  * [Font Awesome icon](https://fontawesome.com/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `fontawesome` in your `docs.json`
  * [Lucide icon](https://lucide.dev/icons) name, if you have the `icons.library` [property](/es/organize/settings#param-icons) set to `lucide` in your `docs.json`
  * Nombre del [icono Tabler](https://tabler.io/icons), si tienes la `icons.library` [propiedad](/es/organize/settings#param-icons) configurada como `tabler` en tu `docs.json`
</ResponseField>

<ResponseField name="src" type="string">
  Ruta o URL de una imagen para usar como icono. Usa `src` en lugar de `icon` cuando quieras utilizar una imagen personalizada en lugar de un icono de una biblioteca.

  Options:

  * Ruta a un archivo de imagen en tu proyecto (por ejemplo, `/images/mi-icono.svg`)
  * URL de una imagen alojada externamente (por ejemplo, `https://example.com/icon.png`)
</ResponseField>

<ResponseField name="iconType" type="string">
  The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons.

  Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="color" type="string">
  El color del icon como código hexadecimal (por ejemplo, `#FF5733`).
</ResponseField>

<ResponseField name="size" type="number">
  El tamaño del icon en píxeles.
</ResponseField>

<ResponseField name="className" type="string">
  Nombre de clase CSS personalizado para aplicar al icon.
</ResponseField>