Hace unos meses lanzamos discretamente Heroicons, un conjunto de íconos SVG gratuitos que diseñamos inicialmente para soportar los componentes en Tailwind UI. Hoy lanzamos la experiencia web oficial de Heroicons, que hace más fácil que nunca buscar íconos y copiarlos rápidamente a tu portapapeles como HTML o JSX listos para Tailwind.
Actualmente hay más de 220 íconos disponibles en tamaños mediano y pequeño, con cada tamaño diseñado para servir a un caso de uso diferente:
- Los íconos medianos están diseñados para ser renderizados a 24x24, y funcionan bien para cosas como la navegación principal y las secciones de marketing.
- Los íconos pequeños están diseñados para ser renderizados a 20x20, y funcionan bien para botones, elementos de formulario y para complementar texto.
Todos los íconos están listos para Tailwind y son fáciles de estilizar con las utilidades de tamaño y color integradas de Tailwind.
<svg class="h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>Para obtener los mejores resultados, usa h-6 w-6 para los íconos medianos y h-5 w-5 para los íconos pequeños.
Solo el comienzo
Tenemos muchas ideas tanto para nuevos íconos como para nuevos estilos de íconos (¿alguien dijo duotono?) que estamos emocionados de diseñar y lanzar en los próximos meses.
Diseñar este sitio también me dio ganas de renovar el sitio de Hero Patterns, así que probablemente verás algo como esto aparecer en heropatterns.com muy pronto:
Tenemos un montón de otros dominios “Hero” esperando ser utilizados también, y estoy emocionado de revelar en qué estamos trabajando para ellos pronto.
¿Tienes alguna sugerencia?
Si tienes alguna idea para nuevos íconos, ¡nos encantaría escucharlas! Dirígete al repositorio de GitHub de Heroicons y abre un issue para hacer una sugerencia.
¿Quieres hablar sobre esta publicación? Discútelo en GitHub →