Iconografía
El set oficial es Lucide — stroke 2, en chips de color translúcido. Los 35 SVG del sitio listos para copiar, con las recetas exactas de contenedores.
El único set de iconos de la marca es Lucide — el mismo que usa el sitio
en producción (lucide-react). Trazo limpio, geométrico, profesional. Nunca emojis como iconos,
nunca clipart, nunca mezclar sets (Font Awesome, Material, Heroicons…): un solo icono ajeno rompe
el aire premium.
La regla
| Parámetro | Valor |
|---|---|
| Set | Lucide (lucide-react / lucide-static) |
| Stroke | 2 (default) · 3–3.5 solo en checks pequeños dentro de píldoras |
| Tamaños | 16px en línea · 20px listas · 24px dentro de chips · 28px destacados |
| Color sobre navy | amarillo #FFF100 · cyan #02B0BB · blanco (según jerarquía) |
| Color sobre claro | navy #003C72 · cyan #02B0BB |
| Esquinas | stroke-linecap="round" stroke-linejoin="round" (viene así en Lucide) |
Chips contenedores (las recetas del sitio, exactas)
El icono casi nunca va "suelto": va dentro de un chip translúcido con ring. Recetas de producción:
<!-- Chip amarillo (patrón firma) — Tailwind del sitio -->
<span class="inline-flex size-12 items-center justify-center rounded-xl
bg-brand-yellow/15 text-brand-yellow ring-1 ring-brand-yellow/30">
<Icon class="size-6" />
</span>
<!-- CSS puro equivalente (para documentos/PDF standalone) -->
.ichip { display:inline-flex; align-items:center; justify-content:center;
width:48px; height:48px; border-radius:14px;
background:rgba(255,241,0,.15); color:#FFF100;
box-shadow:inset 0 0 0 1px rgba(255,241,0,.3); }Variantes: cyan bg-brand-cyan/15 text-brand-cyan ring-brand-cyan/30 · sello redondo
(garantías) size-9 rounded-full + icono 16px · check en lista size-5 rounded-full bg-brand-cyan text-brand-blue + <Check size={12} strokeWidth={3.5}/> · social del footer rounded-full bg-white/10 p-2 con hover a amarillo.
Los 35 iconos oficiales, descargables
Todos en /brand/iconos/ui/
(SVG 24×24, stroke 2, currentColor — píntalos con CSS). Patrón de URL:
https://brandbook.prouniversitas.cl/brand/iconos/ui/<nombre>.svg
| Uso | Iconos |
|---|---|
| UI / navegación | check x chevron-down chevron-up chevron-right arrow-right arrow-left menu |
| Valor / método | gauge compass target crosshair trending-up rotate-cw sparkles brain |
| Personas / académico | users user-check graduation-cap heart-handshake monitor-play school |
| Confianza / becas | shield-check award medal lock clock star |
| Contacto / contenido | mail map-pin message-circle quote newspaper file-text calendar-clock |
Para usarlos inline en un documento (recomendado en PDF — sin dependencias de red), copia el
contenido del SVG y pinta con color:
<span class="ichip" style="color:#FFF100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24">
<path d="M20 6 9 17l-5-5"/> <!-- check -->
</svg>
</span>Redes sociales
Los iconos de RRSS (Facebook, Instagram, YouTube, TikTok) son SVG custom fill="currentColor"
(no Lucide, que no trae marcas). En el footer del sitio van en círculos bg-white/10 con hover
amarillo. No uses los logos de color oficiales de cada red sobre navy — siempre monocromo.