---
title: "Icon"
slug: "custom-icon"
category: "Mini Widgets"
reactComponent: "ArcWidgetIcon"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "icon.tsx"
locale: "es"
hosts: "vue"
---

# Icon

## AI Defaults (read first)

- **Function name**: `arcCustomIcon`.
- **iconSet**: `"phosphor"` (default if unset), `"openmoji"`, `"material_symbols"` (alias `"material"`).
- **name**: Glyph name (e.g. `"user"`, `"trash"`). Phosphor legacy: style in name (`"trash-bold"`) still works and overrides explicit **style**.
- **style**: Phosphor: `regular` | `bold` | `duotone` | `light` | `thin` | `fill`. Material: `outlined` | `rounded` | `sharp` | `rounded-fill` | … (default Phosphor `regular`, Material `outlined`).
- **iconSize**, **color**: Icon size and fill color (e.g. `"24px"`, `"#818599"`).
- **containerSize**, **backgroundColor**, **borderRadius**, **borderSize**, **borderColor**: Built-in container – do NOT wrap in `arcCustomLayout` for styling.
- **No uniqueId needed** for display-only icons.

# Custom Icon

Cada cliente recibe al inicio de su licencia un conjunto de iconos estándar. Si necesitas más iconos, contáctanos en [support@arc-rider.com](mailto:support@arc-rider.com) o en nuestro [canal de Discord.](https://discord.com/invite/Fg67f8qX3K)

💡** Nota**: Custom Icon admite [Phosphor Icons](https://phosphoricons.com/), [Material Symbols](https://fonts.google.com/icons) (`iconSet: "material"` o `"material_symbols"`) y [OpenMoji](https://openmoji.org/). Tras la primera carga, los iconos de Phosphor y Material se almacenan en caché en el navegador — las llamadas repetidas son más rápidas y funcionan sin conexión una vez que el conjunto se ha cargado por completo (sin configuración adicional necesaria).

Para añadir iconos a tu proyecto, ve en tu User Cockpit a la sección Icons y simplemente selecciónalos (ver la explicación más abajo).

![](https://framerusercontent.com/images/BQHL1tv8vsJu3xvmoxcMkFDA.png)

![](https://framerusercontent.com/images/hfUtTFBevtvrRjhCZgPJeyouqY.png)

![](https://framerusercontent.com/images/yHkFmJcBcApLpAZQeVoujOs6c.png)

##

Código de aplicación

![](https://framerusercontent.com/images/6vH4hAeFxzFpJt5B4RKfjE4bRZ8.png)


```javascript
arcCustomIcon({
        iconSet: "phosphor",
        name: "trash",
        containerSize: "40px",
        borderSize: "",
        borderColor: "",
        borderRadius: "7px",
        iconSize: "30px",
        color: "#FF2222",
        backgroundColor: "#fcdfde"
    })
```

![](https://framerusercontent.com/images/6F2gYfjUBFLwVTpV4t7gEDcVsMo.png)


```javascript
arcCustomIcon({
    iconSet: "openmoji",
    name: "envelope-with-arrow-color",
    containerSize: "50px",
    borderSize: "1px",
    borderColor: "",
    iconSize: "50px",
    borderRadius: "50px",
    color: "#C637E4",
    backgroundColor: "#FAE6FF"
}),
```

<em><strong>

iconSet</strong></em> define el conjunto de iconos.


```javascript
iconSet: "phosphor",     // Standard-Fallback
iconSet: "material",     // Alias für material_symbols
iconSet: "material_symbols",
iconSet: "openmoji",
```

Si **no** indicas `iconSet`, el widget usa el primer conjunto totalmente preinstalado (orden: Phosphor → Material → OpenMoji); en caso contrario, Phosphor.

<em><strong>style</strong></em> (opcional) elige la variante dentro del conjunto.

**Phosphor** — `regular` (estándar), `bold`, `duotone`, `light`, `thin`, `fill`:

```javascript
arcCustomIcon({ iconSet: "phosphor", name: "trash", style: "bold", color: "#c00" })
```

**Legacy:** el estilo en el nombre (`name: "trash-bold"`) sigue funcionando y tiene prioridad sobre un `style` establecido.

**Material Symbols** — `outlined` (estándar), `rounded`, `sharp`, variantes rellenas con sufijo `-fill` (p. ej. `rounded-fill`):

```javascript
arcCustomIcon({ iconSet: "material", name: "home", style: "rounded-fill", iconSize: "24px" })
```

<em><strong>
name</strong></em> define el nombre del glifo (sin sufijo de estilo si estableces `style` por separado). Encuentras los nombres en el Cockpit o en los catálogos de iconos correspondientes.


```javascript
name: "trash", // Titel immer in " schreiben
```

containerSize define si y en qué tamaño quieres mostrar el contenedor/fondo del icono.


```javascript
containerSize: "30px", // Pixel-Wert in " angeben
containerSize: "" // Kein Fallback-Wert
```

***borderSize*** define el grosor de tu borde.


```javascript
borderSize: "1px", // Pixel-Wert in " angeben
borderSize: "", // Kein Fallback-Wert
```

***borderColor*** indica el color de tu borde.


```javascript
borderColor: "#000", // HEX Code in " angeben
borderColor: "", // Kein Fallback-Wert
```

***borderRadius*** indica el redondeo de las esquinas de tu borde.


```javascript
borderRadius: "7px", // Pixel-Wert in " angeben
borderRadius: "", // Kein Fallback
```

***iconSize*** indica el tamaño de tu icono.


```javascript
iconSize: "20px", // Pixel-Wert in " angeben
iconSize: "", // Fallback: "15px"
```

***color*** indica el color de tu icono.


```javascript
color: "#FF2222", // Hex-Wert in " angeben
color: "", // Kein Fallback-Wert
```

***backgroundColor*** indica el color de fondo del contenedor.


```javascript
backgroundColor: "#fcdfde", //
backgroundColor: "", // Kein Fallbackwert
```

##
Añadir iconos desde tu Cockpit

Puedes ver tu colección actual y los conjuntos de iconos disponibles. Encuentras filtros para estilos de icono o grupos de icono en el lado derecho.

Para seleccionar o deseleccionar un icono, simplemente haz clic en él.

Luego copia el código del widget y pégalo en tu código global. Ya puedes usarlo en el código de aplicación.

![](https://framerusercontent.com/images/Gd2H3UKMxrORUpsAvOzylXWDAM.png)