Heroicons: biblioteca de iconos open source de alta calidad 92

Heroicons es una biblioteca de iconos de código abierto de alta calidad, con diferentes versiones mantenidas por el equipo de Tailwind CSS y el equipo de Refactoring UI.

Heroicons es adecuado para el desarrollo web y de aplicaciones. Todos los iconos se distribuyen bajo la licencia MIT, lo que permite a cualquier persona descargarlos y usarlos de forma gratuita, tanto en proyectos personales como comerciales.

Características de Heroicons

• Iconos SVG de alta calidad: Heroicons ofrece un diseño de iconos claro y consistente, ideal para el desarrollo de interfaces de usuario, compatible con diseño web y de aplicaciones.

• Dos estilos: incluye estilos Outline (contorno) y Solid (relleno), satisfaciendo diferentes necesidades de diseño.

• Amplia aplicación: los iconos cubren elementos comunes de UI y escenarios de negocio, siendo adecuados para navegación, acciones, indicadores de estado, etc.

• Fácil integración: admite el uso directo de código SVG en HTML, así como su uso como componentes en frameworks modernos de frontend como React y Vue tras la instalación mediante npm.

• Actualizaciones de versión: con las iteraciones de versión, el número de iconos sigue creciendo; por ejemplo, hay versiones que incluyen más de 1200 iconos.

Cómo usar Heroicons

1. Instalación:

• Para proyectos frontend, puedes instalar la biblioteca de Heroicons para React o Vue a través de npm o Yarn.

npm install @heroicons/react

# o usando Yarn

yarn add @heroicons/react

2. Importar iconos:

• En el código, puedes importar y usar los iconos directamente, por ejemplo:

import { BellIcon } from '@heroicons/react/24/outline';

function App() {

  return

}

3. Uso directo de SVG:

• También puedes copiar directamente el código SVG desde el sitio web de Heroicons para usarlo en HTML.

4. Integración con Figma:

• Los diseñadores pueden aprovechar el plugin de Figma o descargar directamente los archivos SVG para su trabajo de diseño.

Heroicons no solo ofrece iconos en múltiples estilos, sino que también admite iconos en distintos tamaños para adaptarse a diferentes necesidades de diseño. Los usuarios pueden elegir entre diferentes tamaños como 24x24, 20x20, según los requisitos específicos del proyecto. Además, el estilo de diseño de los iconos de Heroicons es sencillo y moderno, adecuado para todo tipo de aplicaciones y sitios web, especialmente cuando se combinan con Tailwind CSS, logrando mejores efectos visuales y experiencia de usuario.

La biblioteca de iconos de Heroicons se actualiza constantemente; los desarrolladores pueden seguir su página de GitHub para obtener los últimos iconos y actualizaciones de funciones.

Github: https://github.com/tailwindlabs/heroicons