¿Dónde descargar iconos SVG?

Iconos Svg gratis

¿Busca iconos para animar su presentación de diapositivas? ¿O para su tarjeta de visita? ¿Algún artículo de papelería que necesite ser mejorado con iconos? Estás de suerte porque en Internet no faltan activos de imagen gratuitos. Los necesitas sobre todo si eres diseñador de páginas web o de aplicaciones, o si eres desarrollador.

Sin duda, es una tarea dolorosa diseñar algunos elementos desde cero. Así que puedes considerar aprovechar los enormes recursos disponibles gratuitamente en Internet. A continuación, hemos elaborado una lista con los 20 mejores sitios web para descargar iconos gratis para facilitarte las cosas.

Una advertencia: La mayoría de estos iconos gratuitos que se pueden descargar de los siguientes sitios web requieren la atribución al creador y se distribuyen bajo varios tipos de licencia. Así que asegúrate de comprobarlas primero.1. Flaticon

Flaticon tiene la mayor base de datos de iconos vectoriales gratuitos de Internet, con más de 70.000 iconos en su sitio. Los iconos en Flaticon vienen en formatos SVG, EPS, PSD y PNG en diferentes tamaños de su gusto.

Paquete de iconos

A menos que te esté entendiendo mal, esto podría ser tan fácil como inspeccionar (F12) el icono en la página para revelar su ruta de archivo fuente .svg, ir a esa ruta directamente (Ejemplo), y luego ver el código fuente de la página con Control+u. Luego sólo hay que guardar ese código.

<svg><path xmlns=”http://www.w3.org/2000/svg” d=”M18.6 6.8l-4.3-2.2a.8.8 0 0-.6 0l-4 2-4.1-2a.7.7 0 0-.7.1.7.7 0 0-.3.6v10.8a.7.7 0 0 .4.6l4.3 2.1a.8.8 0 0 .6 0l4-2 4 2a.6 .6 0 0 .3.1.7.7 0 0 .4-.1.7.7 0 0 .4-.6V7.4a.7.7 0 0-.4-.6zm-1.1 1.4v5.7a.4.4 0 0 1-.6.4c-1.2-.4-.3-2.3-1.1-3.3-.7-.9-1.7 0-2.6-1.4-.9-1.4.3-2.5 1.4-3a.5 .5 0 0 1 .4 0l2.2 1.1a.5.5 0 1 .3.5zm-6.1 8.3a.5.5 0 0 1-.5-.1 1.6 1.6 0 0 1-.6-1.1c0-.7-1.2-.4-1.2-1.9 0-1.2-1.3-1.5-2.5-1.3a.5.5 0 0 1-.5-.5V7.2a.4.4 0 0 1 .6-.4l2.6 1.3a.1 .1 0 0 1 .1 0l.1.1c1.1.6.8 1.1.4 1.9-.5.9-.7 0-1.4-.3s-1.5.3-1.2.8.9 0 1.4.4.5 1.2 1.9.8 1.7-.3 2.2.2a1.5 1.5 0 1 0 2.2c-.4.4-.6 1.3-.8 1.9a.5.5 0 0 1-.2.3z”/></svg>

Una vez que esté en una página web, haga clic en el icono de la extensión junto a la barra de URL y se abrirá una nueva pestaña que le mostrará todos los archivos SVG que haya encontrado en la página. Puede copiar un archivo SVG en el portapapeles, descargar sólo los que necesite o hacer clic en el botón “Descargar todos los SVG” para añadirlos todos a un archivo comprimido y descargarlos.

Iconos vectoriales

Aquí vamos a enumerar los sitios donde puedes descargar iconos SVG gratis. Usted puede utilizar los iconos SVG en su sitio web de WordPress y cualquier otro proyecto como los archivos SVG son de peso ligero y fácil de integrar en su entorno.

Normalmente, usted puede haber utilizado FontAwesome libre para utilizar diferentes iconos en sus proyectos donde se llega a navegar por los iconos limitados. Además, tienen una versión pro en la que tienes que pagar para acceder a iconos premium con casi 8000+ iconos.

No estoy en contra de FontAwesome, puede utilizarlo en su sitio de WordPress. Pero el escenario es diferente aquí ya que necesitas implementar FontAwesome en tu sitio web, es decir, necesitas cargar los archivos de FontAwesome en tu sitio vía CDN. También puedes alojar FontAwesome localmente.

Básicamente, las solicitudes externas ralentizar su sitio web, ya que necesita para cargar las fuentes. por lo tanto, para minimizar la búsqueda de DNS puede eliminar alternativamente FontAwesome y utilizar iconos SVG. Los iconos SVG son fáciles de integrar con WordPress, donde puedes subir y usar directamente los iconos o puedes copiar y pegar el código SVG en línea.

Font awesome icons

La forma más fácil de descargar SVGs de un sitio web23 de marzo de 2021Por lo general, al añadir iconos a un sitio web, voy a utilizar React-icons. Sin embargo, hay veces que prefiero copiar un SVG exacto de un sitio web. Descargar un SVG no es tan fácil como descargar una imagen de un sitio web. Afortunadamente, SVG Export los extrae por mí.

¿Has utilizado alguna vez el elemento inspector para descargar imágenes que no puedes guardar o abrir con el botón derecho del ratón? Seguramente habrás notado que con los SVG no es fácil descargarlos de un sitio web. – O al menos a mí me pasó cuando intenté “clonar” una página web para mi último proyecto.

Por ejemplo, el logotipo de Dev.to que está visible en todas las páginas de Dev.to. Hacer clic con el botón derecho del ratón sobre él no te da la opción de abrirlo en una nueva pestaña o guardarlo. Además, al utilizar el elemento de inspección sólo se obtienen las etiquetas SVG, potencialmente enormes, lo que te obliga a averiguar dónde empieza y termina el SVG en el HTML de la página.

Después de instalar la extensión, al hacer clic en el icono de la extensión, se activará la función de exportación de SVG para extraer todos los SVG disponibles en la página web actual, garantizando que se mantengan sus estilos en línea. Se abrirá una nueva pestaña con todos los SVG. A partir de ahí, localiza los SVG que buscas y descárgalos como archivo, cópialos como código o pégalos en tus herramientas de diseño favoritas, como Sketch, Figma o Framer.

Santiago Paez