[ad_1]
SVG Los iconos (gráficos vectoriales escalables) son imágenes gráficas definidas en formato XML. Son escalables sin perder calidad, lo que los hace esenciales para el diseño web y de aplicaciones.
Se pueden acercar o alejar para adaptarse a cualquier tamaño o resolución de pantalla sin pixelarse, lo que garantiza una experiencia de usuario perfecta en diferentes dispositivos.
Los iconos SVG son cruciales para aumentar la productividad en el diseño web y de aplicaciones. Debido a su naturaleza escalable, eliminan la necesidad de crear múltiples versiones del mismo ícono para adaptarse a diferentes tamaños de pantalla.
También se les puede diseñar y manipular utilizando CSS y JavaScript, lo que brinda más flexibilidad a los diseñadores.
¿Por qué utilizar iconos SVG de código abierto?
Los iconos SVG con licencia de código abierto proporcionan un recurso valioso para diseñadores y desarrolladores. Ofrecen una amplia gama de gráficos prediseñados que se pueden utilizar libremente, lo que ahorra tiempo y esfuerzo en la creación de iconos desde cero.
En esta lista, recopilamos los mejores conjuntos de íconos SVG gratuitos de código abierto para usar en su aplicación web, aplicación de Android, aplicación de iOS, aplicación Flutter e incluso en proyectos de publicación web existentes.
Iconoir es una popular biblioteca de iconos SVG gratuita y de código abierto. Se puede usar directamente en React, Flutter, Figma, Framer y React Native.
Ventajas
- 1566 iconos
- Admite muchos marcos de JavaScript
- Descargar iconos individuales como SVG
- Copie el icono SVG directamente
- Los iconos están clasificados en grupos.
- Ideal para aplicaciones móviles y aplicaciones web
- Diseñado en 24×24
Licencia
Iconorio | Iconos gratis
Iconoir es la biblioteca de íconos de código abierto más grande que ofrece una enorme selección de íconos de alta calidad, disponibles para descarga gratuita. No se requieren opciones premium ni registro de correo electrónico, gratis de verdad. Íconos disponibles en las bibliotecas SVG, Font, React, React Nativ y Flutter, Figma y Framer.
Pluma es una colección de íconos de código abierto diseñados en una cuadrícula de 24×24, que enfatiza la simplicidad, la coherencia y la flexibilidad. Está listo para usar en proyectos de JavaScript que incluyen Meteor, React, ReactNative, Vue y Angular.
Ventajas
- Aplicación web para buscar y filtrar iconos.
- Descarga iconos individuales.
- Personalice el tamaño del icono, el ancho del trazo y los colores.
- Pruebe íconos en temas oscuros y claros.
Contras
Feather: iconos de código abierto simplemente hermosos
Feather es una colección de íconos de código abierto simplemente hermosos. Cada ícono está diseñado en una cuadrícula de 24×24 con énfasis en la simplicidad, coherencia y legibilidad.
GitHub – feathericons/feather: Íconos de código abierto simplemente hermosos
Íconos de código abierto simplemente hermosos. Contribuya al desarrollo de feathericons/feather creando una cuenta en GitHub.
Heroicons, un conjunto de iconos SVG hecho a mano por los creadores de Tailwind CSS, ofrece belleza y funcionalidad inigualables.
Está disponible como íconos SVG básicos y a través de bibliotecas React y Vue propias, lo que lo hace adecuado para cualquier proyecto. El conjunto incluye 288 iconos.
Ventajas
- Hermosos iconos
- Listo para usar con las bibliotecas React, React Native y Vue
- Los íconos están disponibles como íconos de contorno, sólidos, mini y micro.
- Admite Figma con un archivo Figma enriquecido.
- Descargar y copiar iconos individuales
- Descargar iconos como código JSX
- Íconos en formatos 24×24 y 16×16
Contras
Heroiconos
Heroicons es una colección de iconos de interfaz de código abierto del MIT para el desarrollo web y de aplicaciones. Los iconos son gratuitos, no se requiere atribución. Iconos de @steveschoger. Sitio web de @username_ZAYDEK.
Con más de 700 íconos de interfaz de usuario en múltiples formatos y más de 6000 glifos impresionantes, css.gg es su recurso de referencia. Incluso incluye versiones PNG tanto en blanco como en negro. Estos recursos están convenientemente disponibles para copiar y pegar inmediatamente y a través de la extensión Raycast.
Si está interesado en instalar una colección de glifos, los desarrolladores crearon otro conjunto que contiene más de 6000 glifos.
Ventajas
- Disponible en formato CSS, SVG, TSX, JSON y XML
- Archivo Figma disponible
- Más de 700 iconos
- Importación CSS sencilla
- Admite animación SVG
- Reaccionar biblioteca
- Puede ejecutarse directamente desde la CDN.
Más de 700 iconos CSS, personalizables, listos para Retina y API
Biblioteca de íconos CSS puro, personalizable y lista para Retina, construida 100% en CSS puro, SVG, SVG Sprite, componentes con estilo, Figma y Adobe XD. Fácil integración: Integrar, NPM y API
GitHub – astrit/css.gg: más de 700 iconos puros de CSS, SVG, PNG y Figma UI disponibles en SVG Sprite, componentes con estilo, NPM y API y 6000 glifos
Más de 700 íconos puros de CSS, SVG, PNG y Figma UI disponibles en SVG Sprite, componentes con estilo, NPM y API y 6000 glifos – astrit/css.gg
lucidez Se erige con confianza como una bifurcación de Feather Icons administrada por la comunidad, nacida de la necesidad de una mejor moderación del proyecto. Con Feather Icons dejado atrás, Lucide toma las riendas no solo para expandir el conjunto de íconos sino también para mantener el diseño simplista original que los usuarios han llegado a amar.
Lucide cuenta con más íconos que Feather, Lucide también se enorgullece de proporcionar bibliotecas oficiales e integraciones con marcos y herramientas de diseño populares.
Ventajas
- Más íconos que plumas, más de 1435 íconos.
- SVG es fácilmente escalable
- Conjunto de iconos limpios
- Altamente personalizable
- Personaliza el color, el ancho del trazo y el tamaño.
Plataformas y sistemas compatibles
- Web (JavaScript), CDN
- Reaccionar
- Reaccionar nativo
- Vista 2
- Vista 3
- Angular
- preact
- figura
- Laravel
- Esbelto
- Sólido
- Hyva
- once
Iconos de lucidez
Hermoso y consistente conjunto de herramientas de íconos creado por la comunidad.
GitHub – lucide-icons/lucide: kit de herramientas de íconos hermoso y consistente creado por la comunidad. Proyecto de código abierto y una bifurcación de Feather Icons.
Hermoso y consistente conjunto de herramientas de íconos creado por la comunidad. Proyecto de código abierto y una bifurcación de Feather Icons. – iconos-lucide/lucide
CoreUI Icons es un conjunto de iconos de código abierto que ofrece más de 1500 símbolos bellamente diseñados en formatos SVG, PNG y Webfonts, adecuados para acciones y elementos comunes en aplicaciones web o móviles.
Ventajas
- Soporta CDN
- Disponible como paquete NPM
- Admite símbolos y sprites SVG
- Soporte oficial para React, Vue y Angular.
Contras
- Licencia gratuita y licencia comercial.
GitHub – coreui/coreui-icons: CoreUI Free Icons – Conjunto de iconos gratuitos de diseño premium con marcas en formatos SVG, Webfont y raster
Iconos gratuitos de CoreUI: conjunto de iconos gratuitos de diseño premium con marcas en formatos SVG, Webfont y rasterizado – coreui/coreui-icons
Uniconos ofrece más de 1000 íconos vectoriales con píxeles perfectos e Iconfont para su próximo proyecto, diseñado por IconScout. Se pueden utilizar fácilmente en su sitio web insertando el CSS proporcionado.
Ventajas
- Soporte oficial para Reactjs, Vue y React Native.
- Paquete oficial de aleteo
- Soporte de estilo sólido
- Importación CSS
- Clases CSS fáciles de recordar
- Soporte CDN
- Licencia flexible para usar en proyectos personales y comerciales.
- El estilo SÓLIDO y LINEAL está disponible
- Fuente web y Iconfont listos.
GitHub – Iconscout/unicons: más de 1000 iconos vectoriales con píxeles perfectos e Iconfont para tu próximo proyecto.
Más de 1000 iconos vectoriales con píxeles perfectos e Iconfont para tu próximo proyecto. – Iconscout/unicons
Simple Icons ofrece con confianza un conjunto de íconos gratuito y de código abierto que cuenta con más de 3000 íconos SVG para marcas populares. Todos ellos se pueden ver cómodamente en una página en SimpleIcons.org.
Ventajas
- Se puede incluir fácilmente como un paquete completo o como un ícono SVG individual en CDN
- Compatibilidad con JavaScript y TypeScript
- Soporte PHP y Laravel
- Aplicación Web para elegir y descargar iconos individuales
- Descargar como íconos SVG o PDF
Extensiones
- Aleteo
- módulo angular
- Complemento de licuadora
- módulo drupal
- Componente enmarcador
- Complemento hexagonal
- Java
- Laravel
- Reaccionar
- gema rubí
- complemento de WordPress
- Paquete Vue y Vue3
- Paquete de Python
- Paquete esbelto
GitHub – iconos-simples/iconos-simples: iconos SVG para marcas populares
Iconos SVG para marcas populares. Contribuya al desarrollo de iconos simples/iconos simples creando una cuenta en GitHub.
Usar sobre 5200 con licencia MIT Iconos SVG, disponibles de forma gratuita para tus proyectos web. Instálelos fácilmente a través de npm o descárguelos directamente desde GitHub. Estos íconos SVG bien construidos se pueden usar como imagen, imagen de fondo o en línea en su código HTML.
Ventajas
- Disponible como PNG, SVG, EPS e íconos de fuente.
- Aplicación web para buscar y filtrar iconos
- Descargue íconos individuales u obtenga el código del ícono
- Descargue iconos en SVG, PNG o copie SVG
Paquetes disponibles
- figura
- Reaccionar
- Reaccionar nativo
- Esbelto
- Vue y Vue 3
- sólido.js
GitHub – tabler/tabler-icons: un conjunto de más de 5200 iconos SVG gratuitos de alta calidad con licencia MIT para que los utilices en tus proyectos web.
Un conjunto de más de 5200 iconos SVG gratuitos de alta calidad con licencia MIT para que los utilices en tus proyectos web. – tabler/tabler-iconos
10- Iconos súper pequeños
Iconos súper pequeños Son versiones SVG minúsculas de logotipos populares, cada una de menos de 1 KB de tamaño. Con un viewbox de 512×512, pueden caber en un círculo con un radio de 256 y pueden ampliarse para adaptarse a diversas necesidades.
GitHub – edent/SuperTinyIcons: ¡Menos de 1 KB cada uno! Los iconos Super Tiny son versiones SVG minúsculas de los logotipos de tus sitios web y aplicaciones favoritos.
¡Menos de 1 KB cada uno! Los Super Tiny Icons son minúsculas versiones SVG de los logotipos de tus sitios web y aplicaciones favoritos – edent/SuperTinyIcons
11- Cajas
Cajas es un conjunto de iconos de código abierto con más de 1500 iconos cuidadosamente diseñados para mejorar las experiencias web y de aplicaciones. La última versión, Boxicons v2.1.3, corrige errores con algunos SVG y agrega 34 íconos nuevos.
Ventajas
- Docenas de iconos
- Listo para proyectos JS
- Más de 150 logotipos disponibles
Instalar y usar
$ npm install boxicons --saveImportar en su proyecto JS
import 'boxicons';La biblioteca admite elementos personalizados y permite decenas de personalizaciones y animaciones.
<box-icon
type = "regular|solid|logo"
name="adjust|alarms|etc...."
color="blue|red|etc..."
size="xs|sm|md|lg|cssSize"
rotate="90|180|270"
flip="horizontal|vertical"
border="square|circle"
animation="spin|tada|etc..."
pull = "left|right"
></box-icon>GitHub – atisawd/boxicons: Íconos web de alta calidad
Iconos web de alta calidad. Contribuya al desarrollo de atisawd/boxicons creando una cuenta en GitHub.
12- Icono de silueta
Este proyecto recopila docenas de bibliotecas para agregarlas directamente en cualquier proyecto JS. Lo recomendamos sólo en grandes proyectos.
icono-svg
svg-icon: Una colección definitiva de iconos SVG HECHO BIEN.
La biblioteca presenta una colección de más de 400 banderas SVG circulares mínimas que representan diferentes países, estados e idiomas.
¿Cómo utilizar?
https://hatscripts.github.io/circle-flags/flags/xx.svg
(Dónde xx es el Código ISO 3166-1 alfa-2 de un país).
Por ejemplo, el siguiente código:
<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/cn.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/gb.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/id.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/in.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ng.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ru.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">
…produce esto:
GitHub – HatScripts/circle-flags: una colección de más de 400 banderas SVG circulares mínimas de país, estado e idioma
Una colección de más de 400 banderas circulares mínimas de países, estados e idiomas en formato SVG – HatScripts/circle-flags
[ad_2]
Source link
