NorfiPC
NorfiPC » Redes sociales » Iconos SVG y PNG

Iconos vectoriales SVG y PNG de las redes sociales de internet


Actualizado: 16 de enero del 2023
Por: Norfi Carrodeguas
Código de los logos de Facebook, Twitter, Instagram, Pinterest y otros sitios, para crear botones de compartir, usando imágenes SVG. Como hacer los enlaces.
Iconos vectoriales SVG y PNG de las redes sociales de internet
Si usamos HTML5 ya podemos sustituir las imágenes de las redes sociales que usamos en los botones de compartir en nuestras páginas, por imágenes SVG que cargan a toda velocidad en el navegador web.
Las imágenes SVG no necesitamos usarlas como archivos externos, porque constan de solo código impregnado en la página, que el navegador renderiza y muestra a toda velocidad.
Son escalables y no pierden la calidad, lo que se puede comprobar al hacer zoom en esta página.
Esto hace nuestro sitio mucho más rápido y las páginas más fáciles de cargar.
Nosotros usamos iconos vectoriales en la página índice del sitio, para enlazar las redes sociales donde participamos y facilitar a los visitantes seguirnos.
También más abajo en esta misma página.
El propósito de este artículo es compartir los iconos vectoriales en formato SVG y PNG, de las principales redes sociales de internet y mostrar cómo crear con ellos botones de compartir.
Para usar los iconos SVG solo es necesario copiar el código y las imágenes PNG se pueden descargar en un paquete.


Iconos y logos de las principales redes sociales de internet


Los iconos que mostramos a continuación están en formato SVG.
Para usarlos solo es necesario copiar el código y pegarlo en el código HTM de una página, en el lugar exacto donde se desean mostrar.
Se muestran a 256 pixeles, pero su tamaño se puede modificar cambiando el valor de las etiquetas "width" y "height".

Imagen SVG del logo de Facebook


Logo de Facebook en formato SVG
Código:
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><path fill="#3B5998" d="M0 0h32v32H0z"/><path fill="#FFF" d="M22.08 32V19.607h4.16l.62-4.83h-4.78v-3.083c0-1.398.388-2.352 2.393-2.352h2.56V5.02c-.443-.058-1.962-.19-3.728-.19-3.688 0-6.213 2.25-6.213 6.385v3.562h-4.17v4.83h4.17V32h4.987z"/></svg>    


Imagen SVG del logo de Twitter


Logo de Twitter en formato SVG
Código:
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><path fill="#55ACEE" d="M0 0h32v32H0z"/><path fill="#FFF" d="M28 8.557c-.884.39-1.833.656-2.828.775 1.017-.608 1.798-1.573 2.166-2.725-.953.567-2.006.976-3.13 1.194-.896-.956-2.176-1.554-3.593-1.554-2.72 0-4.924 2.206-4.924 4.925 0 .387.045.763.13 1.125-4.094-.208-7.724-2.168-10.15-5.147-.423.726-.667 1.573-.667 2.476 0 1.71.87 3.214 2.19 4.1-.806-.027-1.564-.25-2.23-.616v.06c0 2.39 1.7 4.378 3.952 4.83-.414.113-.85.172-1.297.172-.317 0-.625-.03-.927-.086.63 1.956 2.447 3.38 4.6 3.42-1.685 1.318-3.808 2.107-6.114 2.107-.398 0-.79-.023-1.175-.068 2.18 1.396 4.768 2.213 7.55 2.213 9.056 0 14.01-7.506 14.01-14.012 0-.213-.005-.426-.015-.637.96-.694 1.795-1.56 2.455-2.55z"/></svg>    


Imagen SVG del logo de Instagram


Logo de Instagram en formato SVG
Código:
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 136 136" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Logo de Instagram en formato SVG</title><defs><linearGradient id="b"><stop offset="0" stop-color="#3771c8"/><stop stop-color="#3771c8" offset=".128"/><stop offset="1" stop-color="#60f" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fd5"/><stop offset=".1" stop-color="#fd5"/><stop offset=".5" stop-color="#ff543e"/><stop offset="1" stop-color="#c837ab"/></linearGradient><radialGradient id="c" cx="158.429" cy="578.088" r="65" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.98198 1.8439 0 -1031.402 454.004)" fx="158.429" fy="578.088"/><radialGradient id="d" cx="147.694" cy="473.455" r="65" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.17394 .86872 -3.5818 .71718 1648.348 -458.493)" fx="147.694" fy="473.455"/></defs><path fill="url(#c)" d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z" transform="translate(1.004 1)"/><path fill="url(#d)" d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z" transform="translate(1.004 1)"/><path fill="#fff" d="M66.004 18c-13.036 0-14.672.057-19.792.29-5.11.234-8.598 1.043-11.65 2.23-3.157 1.226-5.835 2.866-8.503 5.535-2.67 2.668-4.31 5.346-5.54 8.502-1.19 3.053-2 6.542-2.23 11.65C18.06 51.327 18 52.964 18 66s.058 14.667.29 19.787c.235 5.11 1.044 8.598 2.23 11.65 1.227 3.157 2.867 5.835 5.536 8.503 2.667 2.67 5.345 4.314 8.5 5.54 3.054 1.187 6.543 1.996 11.652 2.23 5.12.233 6.755.29 19.79.29 13.037 0 14.668-.057 19.788-.29 5.11-.234 8.602-1.043 11.656-2.23 3.156-1.226 5.83-2.87 8.497-5.54 2.67-2.668 4.31-5.346 5.54-8.502 1.18-3.053 1.99-6.542 2.23-11.65.23-5.12.29-6.752.29-19.788 0-13.036-.06-14.672-.29-19.792-.24-5.11-1.05-8.598-2.23-11.65-1.23-3.157-2.87-5.835-5.54-8.503-2.67-2.67-5.34-4.31-8.5-5.535-3.06-1.187-6.55-1.996-11.66-2.23-5.12-.233-6.75-.29-19.79-.29zm-4.306 8.65c1.278-.002 2.704 0 4.306 0 12.816 0 14.335.046 19.396.276 4.68.214 7.22.996 8.912 1.653 2.24.87 3.837 1.91 5.516 3.59 1.68 1.68 2.72 3.28 3.592 5.52.657 1.69 1.44 4.23 1.653 8.91.23 5.06.28 6.58.28 19.39s-.05 14.33-.28 19.39c-.214 4.68-.996 7.22-1.653 8.91-.87 2.24-1.912 3.835-3.592 5.514-1.68 1.68-3.275 2.72-5.516 3.59-1.69.66-4.232 1.44-8.912 1.654-5.06.23-6.58.28-19.396.28-12.817 0-14.336-.05-19.396-.28-4.68-.216-7.22-.998-8.913-1.655-2.24-.87-3.84-1.91-5.52-3.59-1.68-1.68-2.72-3.276-3.592-5.517-.657-1.69-1.44-4.23-1.653-8.91-.23-5.06-.276-6.58-.276-19.398s.046-14.33.276-19.39c.214-4.68.996-7.22 1.653-8.912.87-2.24 1.912-3.84 3.592-5.52 1.68-1.68 3.28-2.72 5.52-3.592 1.692-.66 4.233-1.44 8.913-1.655 4.428-.2 6.144-.26 15.09-.27zm29.928 7.97c-3.18 0-5.76 2.577-5.76 5.758 0 3.18 2.58 5.76 5.76 5.76 3.18 0 5.76-2.58 5.76-5.76 0-3.18-2.58-5.76-5.76-5.76zm-25.622 6.73c-13.613 0-24.65 11.037-24.65 24.65 0 13.613 11.037 24.645 24.65 24.645C79.617 90.645 90.65 79.613 90.65 66S79.616 41.35 66.003 41.35zm0 8.65c8.836 0 16 7.163 16 16 0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16 0-8.837 7.163-16 16-16z"/></svg>    


Imagen SVG del logo de Pinterest


Logo de Pinterest en formato SVG
Código:
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><path fill="#cb2027" d="M0 0h32v32H0z"/><path fill="#FFF" d="M10.046 30.548l-.016-.15c-.13-1.288-.226-3.115.082-4.44.296-1.272 1.913-8.106 1.913-8.106s-.488-.977-.488-2.422c0-2.268 1.314-3.96 2.95-3.96 1.392 0 2.065 1.044 2.065 2.296 0 1.4-.89 3.492-1.35 5.43-.385 1.624.813 2.948 2.414 2.948 2.9 0 5.127-3.057 5.127-7.47 0-3.904-2.806-6.635-6.813-6.635-4.64 0-7.365 3.48-7.365 7.077 0 1.402.54 2.905 1.214 3.722.132.16.152.302.112.467-.124.515-.4 1.623-.453 1.85-.072.3-.237.362-.546.218-2.037-.948-3.31-3.926-3.31-6.32 0-5.144 3.737-9.87 10.776-9.87 5.658 0 10.055 4.033 10.055 9.42 0 5.622-3.544 10.146-8.464 10.146-1.652 0-3.205-.858-3.737-1.872 0 0-.818 3.114-1.016 3.877-.365 1.403-1.342 3.157-2.007 4.243-.002.003-.454.833-.568 1h-.457c-.058 0-.118-1.445-.12-1.45z"/></svg>    


Imagen SVG del logo de Linkedin


Logo de Linkedin en formato SVG
Código:
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><path fill="#007BB5" d="M0 0h32v32H0z"/><g fill="#FFF"><path d="M6.227 12.61h4.19v13.48h-4.19V12.61zm2.095-6.7c1.34 0 2.428 1.09 2.428 2.43s-1.09 2.43-2.428 2.43c-1.344 0-2.428-1.09-2.428-2.43s1.084-2.43 2.428-2.43M13.043 12.61h4.02v1.84h.057c.56-1.058 1.927-2.176 3.965-2.176 4.238 0 5.02 2.792 5.02 6.42v7.395h-4.183V19.53c0-1.562-.03-3.572-2.178-3.572-2.18 0-2.514 1.7-2.514 3.46v6.668h-4.187V12.61z"/></g></svg>    

Imagen SVG del logo de Mastodon


Código:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="IconChangeColor" height="256" width="256"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z" id="mainIconPathAttribute" fill="#6364FF"></path></svg>   

Trucos para redimensionar o guardar las imágenes SVG

Para cambiar el tamaño de cualquiera de las imágenes anteriores, solo se requiere cambiar el valor en las propiedades width (ancho) y height (altura).
Al tratar de guardar las imágenes, los navegadores Google Chrome y Firefox las guardan en formato SVG.
Para guardarlas en formato PNG, solo necesitamos cargar la página con el navegador Microsoft Edge.


Iconos y logos de otras redes sociales en formato SVG


Los iconos de todas las redes sociales se pueden representar usando imágenes SVG.
A continuación mostramos algunos de ellos que hemos creado.
El código para insertar las imágenes puedes obtenerlo viendo el código fuente de esta página o en el archivo de descarga que brindamos más abajo.
Logo de Instagram en formato SVG Logo de YouTube en formato SVG Logo de Tumblr en formato SVG Logo de Reddit en formato SVG Logo de Whatsapp en formato SVG Logo de MySpace en formato SVG Logo de Viadeo en formato SVG Logo de Xing en formato SVG Logo de Delicious en formato SVG Logo de Stumbleupon en formato SVG Logo de hi5 en formato SVG Logo de Foursquare en formato SVG Icono y logotipo de la red social Care2 Icono y logotipo de la red social LiveJournal Icono de la red social SoundCloud Logo de Periscope Logo de Tinder


Como crear botones de compartir con los iconos SVG


Existen varios servicios de internet como AddToAny, donde obtener el código para mostrar botones de compartir en las páginas, pero con los iconos vectoriales que mostramos en esta página podemos crear los botones manualmente, que funcionan mucho más rápido que usando los métodos que mencionamos.
Para eso solo es necesario crear enlaces con las imágenes SVG.
Cada una de las redes sociales de internet admiten direcciones especiales para compartir contenido desde el navegador.
En otra página de nuestro sitio puedes obtener información detallada sobre cada una de ellas, pero en este artículo mostramos un ejemplo práctico.


Código de un botón para compartir en Facebook


Para crear un botón que permita a los lectores compartir la página en Facebook, usa el siguiente código.
<a href="javascript:var dir=window.document.URL;bb=window.open('https://www.facebook.com/share.php?u='+dir,'','width=600,height=400,left=50,top=50');location.bb;" title="Compartir en Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 32 32" style="border-radius:6px;"><path fill="#3B5998" d="M0 0h32v32H0z"/><path fill="#FFF" d="M22.08 32V19.607h4.16l.62-4.83h-4.78v-3.083c0-1.398.388-2.352 2.393-2.352h2.56V5.02c-.443-.058-1.962-.19-3.728-.19-3.688 0-6.213 2.25-6.213 6.385v3.562h-4.17v4.83h4.17V32h4.987z"/></svg></a>    
El código anterior crea un botón similar al siguiente.

La imagen SVG creada mide 60 pixeles, para usar una de mayor o mayor tamaño modifica el valor del ancho y la altura en el código.
El código usa JavaScript para obtener la dirección de la página.
De forma similar se pueden crear otros botones usando los códigos que facilitamos para cada icono para compartir en diferentes redes sociales.


Iconos de otras redes sociales


A continuación compartimos otros iconos de redes sociales y sitios de participación populares de internet como YouTube, Flickr, Snapchat, Medium, Blogger, Vimeo y Vine.
Están en formato PNG, por lo que pueden guardarse como otras imágenes tradicionales.
Abren en una nueva pestaña a mayor tamaño.

Síguenos en las redes sociales



Otras páginas relacionadas



 
 
Inicio | Mapa del sitio | Buscar | Sobre mí