Los íconos en Seim Seim cumplen dos roles: utilitario (UI funcional, neutra, legible) y de marca (decorativo, vibrante, con personalidad propia). Para cada rol usamos un sistema distinto, sin mezclar — así la app se siente limpia donde tiene que serlo y caliente donde la marca aparece.
Estrategia
Cuándo usar qué set, con qué peso y qué color.
| Contexto | Set | Peso | Color |
|---|---|---|---|
| UI funcional (botones, navegación, kitchen, formularios) | Phosphor | regular | currentColor |
| CTAs y badges importantes | Phosphor | fill | --ss-color-brand (Ají 500) |
| Status de pedidos (pending, ready, etc.) | Phosphor | fill | color del estado |
| Hero, callouts, marketing, packaging | Custom | — | paleta vibrante |
Una sola regla: un set por jerarquía. Si usas Phosphor regular en una pantalla, no mezcles otro peso en el mismo bloque. Si usas un ícono custom de marca, no metas un Phosphor al lado.
Set libre — Phosphor
Phosphor Icons es una librería open-source (MIT) con ~1.500 íconos en 6 pesos: thin, light, regular, bold, fill, duotone. La elegimos porque tiene catálogo amplio sin caer en clichés exóticos, conversa bien con tipografías editoriales como Rainier o PicNic, y los pesos fill y duotone permiten momentos de color fuerte sin perder coherencia.
Instalación
npm install @phosphor-icons/webUso
Importa los pesos que vas a usar (uno por archivo CSS) y luego usa la clase en cualquier <i>.
---
import "@phosphor-icons/web/regular";
import "@phosphor-icons/web/fill";
---
<i class="ph ph-fire"></i>
<i class="ph-fill ph-fire" style="color: var(--ss-color-brand);"></i>El tamaño se controla con font-size, el color con color. Como cualquier texto.
<i class="ph ph-shopping-cart" style="font-size: 24px; color: var(--ss-color-text-primary);"></i>ph ph-fire ph-bold ph-fire ph-fill ph-fire ph-duotone ph-fire fire pepper cooking-pot fork-knife wine beer-stein list shopping-cart house user-circle gear-six magnifying-glass caret-right check x plus minus bell Catálogo completo y buscador: phosphoricons.com.
Set custom — íconos de marca
Iconos hechos a mano que solo Seim Seim tiene. Están pensados para los momentos donde una librería genérica no alcanza — tigres, chiles, hierbas, manos sirviendo, sombrillas tropicales. El lenguaje gráfico sigue al logo: trazo casi pictórico, formas planas con personalidad, paleta vibrante.
tigre próximo chile próximo mano-tagine próximo sombrilla próximo olla-vapor próximo limonaria próximo El set arranca vacío — todos los íconos están en pipeline. A medida que cada uno se diseña, se añade a IconGrid.astro con su <svg> inline (o referencia al archivo en /icons) y queda documentado aquí.
Cuándo crear un ícono custom
- Cuando Phosphor no tiene una metáfora suficientemente seimseimera (ej. el tigre de la marca, no un tigre stock).
- Cuando se necesita un acento decorativo en hero, callout, packaging — no UI funcional.
- Cuando un ícono viene en pareja con copy de marca y ambos cargan tono (“frutica fresca a media tarde”, “el calor de las calles”).
Si lo que necesitas es genérico (cuchillo, fuego, casa, carrito), usa Phosphor.
Lineamientos
Aplican a ambos sets.
- Stroke consistente — 2px para 24×24, 1.5px para 20×20.
- Redondeo —
stroke-linecap="round",stroke-linejoin="round"siempre. - Sin relleno por defecto —
fill="none"salvo que el ícono lo requiera (lo cual aplica a varios custom de marca). - Color heredado —
currentColorpara que se adapten al texto donde están. - Tamaños canónicos — 16, 20, 24, 32, 48 px. Otros valores requieren razón.