design/system/icons.html

Set de Iconos — Lucide

Todos los iconos del sitio provienen de Lucide. En React se importan individualmente desde lucide-react. En los mockups se usan via CDN con data-lucide="nombre".

← Tokens · Componentes →

Importación en React


        import { Home, Calendar, Users, BookOpen, Mail, ... } from 'lucide-react';

        // Uso: <Home className="w-5 h-5" />

Navegación y UI

home

chevron-down

chevron-right

arrow-right

arrow-left

filter

settings

more-horizontal

more-vertical

external-link

log-out

log-in

bell

Contenido institucional

calendar

calendar-range

calendar-check

map-pin

users

user

landmark

graduation-cap

book-open

heart-handshake

shield-check

award

mail

phone

clipboard-list

file-text

Admin y backoffice

layout-dashboard

layout-panel-left

list-tree

image

upload-cloud

scroll-text

edit-3

trash-2

save

eye

globe

lock

history

undo-2

check

check-circle

alert-triangle

info

grip-vertical

user-plus

Mapeo: icono → contexto de uso

Nombre Lucide	Componente React	Dónde se usa
home	Home	Nav principal, breadcrumb
calendar-range	CalendarRange	Nav Congresos, hub
graduation-cap	GraduationCap	Aula Virtual, cursos
landmark	Landmark	Fundación, institucional
map-pin	MapPin	Ubicación del evento, contacto
heart-handshake	HeartHandshake	Tejiendo Lazos, corresponsabilidad
clipboard-list	ClipboardList	Formulario inscripción, programa
award	Award	Certificados, acreditación
layout-panel-left	LayoutPanelLeft	Admin: editor de páginas
grip-vertical	GripVertical	Admin: drag handle de bloques