Contenidos · Iconos

Icons (SVG escalables)

Integra iconos SVG que heredan el tamaño y el color del contexto, conservan su proporción y permanecen estables dentro de layouts flex.

v2.0

Escala con el texto

.icon usa 1em de ancho y alto para responder al font-size aplicado.

Color heredado

.icon-current conecta el relleno y el trazo del SVG con currentColor.

SVG y Material

Las utilidades también escalan y colorean iconos de fuente como Material Symbols.

Código + resultado

Ejemplos reales de iconos

Selecciona una composición para comprobar cómo responde el mismo SVG al tamaño y al color.

SVG real

Escala disponible

14 niveles recomendados para iconos

.icon mide 1em. La escala comienza en .font-size-01 (11px) y continúa con .font-size-1 hasta .font-size-13. Se eliminó el nivel 0 para evitar duplicar los 16px de .font-size-1.

1 tamaño mínimo.font-size-01 · 11px

13 principales1–13 · 16px a 100px

14 niveles en totalSin tamaños base duplicados

.font-size-01 11px

.font-size-1 16px

.font-size-2 18px

.font-size-3 20px

.font-size-4 24px

.font-size-5 30px

.font-size-6 36px

.font-size-7 48px

.font-size-8 60px

.font-size-9 72px

.font-size-10 80px

.font-size-11 88px

.font-size-12 96px

.font-size-13 100px

Opción	Clases	Niveles	Cuándo usarla
Mínimo	`.font-size-01`	1	Iconos auxiliares de 11px; evitar tamaños menores.
Fija principal	`.font-size-1–13`	13	Controles, navegación, destacados y displays entre 16px y 100px.
Fluida	`.font-size-fluid-1–6`	6	Iconos protagonistas que deben responder continuamente al viewport.
Responsive	`.font-size-{breakpoint}-{nivel}`	9 breakpoints	Usa `01` o los niveles `1–13` después del breakpoint.

Opciones de integración

SVG y Material Symbols

QuicklyCSS controla tamaño y color tanto en SVG inline como en iconos basados en fuente.

Recomendado

SVG inline

Permite controlar geometría, relleno y trazo con .icon y .icon-current.

<svg class="icon icon-current
  font-size-5 color-violet-600" ...>
  <path d="..." />
</svg>

Resultado aplicado

SVG inline

Biblioteca externa

Google Material Symbols

Al ser una fuente de iconos, usa directamente las utilidades font-size-* y color-*; no necesita .icon.

<link rel="stylesheet" href="https://fonts.googleapis.com/
css2?family=Material+Symbols+Outlined">

<span class="material-symbols-outlined
  font-size-5 color-emerald-600">
  check_circle
</span>

Resultado aplicado

Material Symbols

Elección rápidaUsa SVG inline para control total y Material Symbols para acceder a un catálogo amplio. Si el icono comunica una acción sin texto visible, agrega un nombre accesible al control.

Referencia

Clases de iconos

El módulo es deliberadamente pequeño: dos clases resuelven la geometría y la herencia de color.

Clases	Propiedad	Resultado	Uso recomendado
`.icon`	`inline-size: 1em` `block-size: 1em`	Icono proporcional al texto y estable en flex.	Clase base para SVG incorporados.
`.icon-current`	`fill: currentColor` `stroke: currentColor`	El SVG adopta el color CSS del elemento.	SVG que deban responder a utilidades `color-*`.
`.font-size-{nivel}`	`font-size`	Cambia el tamaño final porque 1em sigue la escala tipográfica.	Composición con `font-size`.
`.color-{familia}-{tono}`	`color`	Controla el color heredado por `.icon-current`.	Composición con `colors`.

Regla del sistemaEl módulo no impone una colección: normaliza SVG propios y se compone con bibliotecas externas basadas en fuentes o CSS.

Recomendaciones

Buenas prácticas con iconos

ViewBox consistente

Conserva un viewBox correcto para que el SVG pueda escalar sin deformarse.

Decorativos ocultos

Usa aria-hidden="true" cuando el texto cercano ya comunica el significado.

Acciones con nombre

Los botones que sólo contienen un icono necesitan un aria-label descriptivo.

Un solo sistema

Escala iconos con font-size-* en lugar de inventar tamaños independientes.