← Volver al index v6

Iconografía

Sistema de íconos cohesivo basado en Lucide subset (lucide.dev). Stroke 1.5, viewBox 24×24, currentColor, linecap/linejoin round. Cada brand tiene su propio sprite en /v6/brands/<slug>/symbols.svg; el master cis contiene 45 íconos base + 2 brand marks legacy.

01·Master sprite (cis)

45 íconos Lucide en el master sprite. Cada celda muestra el ícono renderizado via <cis-icon name="…"> y su nombre canónico debajo.

arrow-left
arrow-right
arrow-up
arrow-down
chevron-left
chevron-right
chevron-up
chevron-down
x
menu
more-horizontal
more-vertical
search
plus
minus
edit
trash
copy
check
share
download
upload
external-link
alert-circle
alert-triangle
info
check-circle
x-circle
help-circle
loader
mail
message-square
bell
user
users
log-in
log-out
file
folder
image
link
calendar
clock
tag
settings
<!-- Web component: resuelve sprite via body[data-brand] -->
<cis-icon name="search"></cis-icon>
<cis-icon name="user" size="24" label="Mi cuenta"></cis-icon>

<!-- Inline equivalente -->
<svg class="cis-icon"><use href="/v6/brands/cis/symbols.svg#cis-search"/></svg>

02·Tamaños canónicos

Los íconos heredan font-size del padre via 1em por defecto. Para tamaños fijos hay data-size (xs/sm/md/lg/xl) o el atributo size en pixels.

xs · 14px
sm · 16px
md · 20px
lg · 24px
xl · 32px 
<cis-icon name="search" data-size="xs"></cis-icon>  <!-- 14px -->
<cis-icon name="search" data-size="sm"></cis-icon>  <!-- 16px -->
<cis-icon name="search" data-size="md"></cis-icon>  <!-- 20px -->
<cis-icon name="search" data-size="lg"></cis-icon>  <!-- 24px -->
<cis-icon name="search" data-size="xl"></cis-icon>  <!-- 32px -->
<cis-icon name="search" size="48"></cis-icon>        <!-- arbitrary px -->

03·Color contextual

El stroke usa currentColor: el ícono toma el color del texto del padre. Esto es lo que permite componer con pills, alerts y badges sin cargar variantes coloreadas del SVG.

Operación OK Falló SII Cuota al 90% Versión nueva disponible

04·Sprites por brand

Cada brand tiene su propio symbols.svg con íconos de dominio adicionales. El web component <cis-icon> resuelve el sprite via body[data-brand]; si querés forzar uno específico, pasá sprite="…". Abajo, el ícono search renderizado desde 3 sprites distintos (cada brand tiene su propio glyph en el mismo nombre).

cis

usaia

portal

<!-- Resolución automática (recomendado): -->
<body data-brand="usaia">
  <cis-icon name="brain"></cis-icon>
  <!-- → /v6/brands/usaia/symbols.svg#cis-brain -->
</body>

<!-- Override explícito: -->
<cis-icon name="search" sprite="/v6/brands/cis/symbols.svg"></cis-icon>

Notas