PNG, SVG, or HTML? Here’s how to choose the right format for your social media icons and insert them into anything from apps to emails.
Social media icons are a crucial part of web and app design. Whether it’s a blog, a marketing email, or a company website, links to a company’s socials are often added via icons. This looks more neat, convenient, and easy to read than having your socials listed by their names.
However, for every case, you might need a slightly different approach to inserting these icons. Keep reading our guide to find out which icon formats you can find and how to integrate icons into your designs.
Most icon libraries out there have social media icons available as a separate category. They often come in various styles, including plain monochromatic, animated, 3D, and many others.
While most of the time, you will only be able to download icons in image formats, in the Icons8 library, most of them are available in at least 7 different formats. These are PNG, SVG, PDF, Favicon, Link (CDN), and two coding formats — Base64 and SVG Embed. Some icons are also available as Apple’s SF symbols. Plus, you can compile your favorite icons into collections and download those as fonts.
Now let’s go over each of these formats one by one to see their pros, cons, and use cases.
PNG is an unproblematic format that is compatible with nearly every platform you can imagine. It’s an open format that uses lossless image compression and stores transparency data, making it a perfect choice for graphics.
The biggest downsides of a PNG file are bigger sizes and lower editability compared to SVGs. Because PNG is a raster format, you can’t scale it up without losing image quality. It also means you can’t edit PNG files element by element, unlike SVGs which consist of easily editable vector paths.
SVG a.k.a. Scalable Vector Graphics is a popular format in graphic design. Because SVGs are vector files, you can zoom in and out and scale them as much as you want without losing image quality. That is because instead of treating an image as a set of discrete pixels, it treats them as a set of points and paths between them. For this very reason, SVG is perfect for icons and illustrations but not great for detailed digital artworks where each pixel has a different color and opacity level.
SVGs are easily editable since vector paths allow you to tweak the image element by element. Not only can you recolor an SVG image — you can also alter the shapes that make it up by editing vector paths. With PNG, changing the shape of an image without losing quality would be impossible, since it’s a solid composition of pixels.
SVGs also tend to take less space than PNGs. Plus, they are written in XML, which means the shapes, colors, and text that make up an image are specified in the code. This makes it an SEO gem, as it helps search engines recognize keywords and index an image easier. The major disadvantage of SVGs is that it’s not compatible with older browsers. Only the newest web browsers allow users to open and view SVGs.
Though PDFs are commonly used for text documents, they can be a convenient format for graphics. PDFs are vector files by default, and they can store both vector and raster images. A PDF will preserve all the vector paths within an image and make it possible to scale it without harming the resolution.
PDF is a popular format of choice for those who create apps for iOS and macOS. It is arguably the best format for inserting icons into iOS apps in Xcode. That is because Apple’s Core Graphics framework is based on the Quartz advanced drawing engine that uses a drawing model based on PDF specification 1.4.
A favicon is a web browser icon that represents a brand online. In most browsers, you will see favicons next to the webpage titles in search results, browser tabs, browser history, and bookmarks. These are not the same as logos, since favicons need to be small and readable and fit within a 16×16 px square. ICO, PNG, and GIF are the three universally supported favicon formats. SVG and JPEG are compatible with every browser except Internet Explorer. Animated GIF and PNG favicons are only supported in Firefox and Opera.
Though 16×16 pixels is the standard favicon size across all browsers, they also come in bigger sizes. 32×32 px favicons are used for taskbar shortcut icons, 96×96 px favicons are used for desktop shortcut icons, and 180×180 px is the go-to favicon size for Apple touch icons.
CDNs a.k.a. content delivery networks are connections of servers distributed across the globe to ensure more efficient content distribution. In short, they are designed to take the load off the main servers so that they don’t crash or take forever to load content when experiencing high demand. They also ensure reasonable loading times for users from all countries, no matter where the main server is located. CDNs cache content from the main server and deliver it to end users when needed.
When you save an image as a CDN link, you essentially get a link to a cached copy of a media file stored by a CDN. It is especially useful for detailed images and videos that can be too bulky to keep on your server.
Saving an image as a code is the best option for web developers. Code essentially allows you to write an image with all its attributes into the HTML code of your page. Base64 is a binary-to-text encoder that can transform binary data into a chain of text symbols. 64 here stands for the number of unique characters used by the encoder. Base64 can be a foolproof way to store media data, since encoded files are way less likely to load incorrectly when presented in a text form. Plus, it helps pages load faster than if you were to insert a raw media file.
With embedded SVGs, you can also reduce loading times and ensure faultless representation of the media files. However, SVG embeds will increase the size of your HTML file. On top of that, with inline SVGs, your images won’t be cached by the browser and will load again each time when viewed.
Icon fonts are exactly what they sound like — these are fonts that only contain icon glyphs instead of letters and numbers. Storing icons as fonts is a preferred option for many web developers. Icon fonts are vector-based, meaning they are infinitely scalable like SVGs. Though, unlike SVGs, they take up less space and can be easily tweaked using CSS. Since technically these icons are treated as fonts, they load faster than image files.
However, font icons are normally monochromatic and have style limitations. Moreover, you won’t be able to apply complex animations to font icons. Finally, since they are treated as fonts, some screen readers might read them as individual characters rather than solid images.
SF stands for San Francisco — Apple’s signature system font. Apple already has its own library of more than 5,000 symbols — SF Symbols 5. The biggest perks of using the SF symbols library are that the icons are stored as vector data and are automatically aligned with text. This ensures visual clarity and consistency.
Unlike icon fonts, SF symbols can be multicolored and you can apply animations to them. SF symbol icons are irreplaceable for developers who make apps for Apple products.
In some cases, inserting icons can be as easy as ABC thanks to ready-made icon libraries or handy plugins. In other cases, you might need a bit of coding.
Below we are going to discuss a few solutions that we hand-picked while developing Icons8 and that have worked great for us. These include snippets, JavaScript libraries, plugins, etc. When choosing each solution, we decided to go for
Here is how you can add social media icons to your blog, emails, macOS app, and iOS app.
If you use WordPress for writing your blog articles, you’re done in 5 minutes or less. Luckily, WordPress has several social media plugins where you can find any icon you need. There is no need to bother with coding, image adjustment, resizing, and other details.
The one we’ve been using for a long time is called Ultimate Social Media Icons. It has all the social media icons you might need available in different styles. All you need to do is pick the set you like the most and it will appear on your WordPress blog posts.
If these are not enough or you want to add custom social buttons, use these instructions from WordPress on how to add social media widgets.
Marketing emails, whether you write them on your own or with the help of an AI email writer, always look more professional with visually appealing signatures. A tiny detail that can make your signature look complete is a set of icons leading the users to your socials.
It doesn’t matter what your email hosting service of choice is, the approach is the same. To add social media icons to the email signature, you need to do the following:
1. Find the icon you need. For example, Twitter icon.
2. Pick the one you like and in the download options, choose Link (CDN).
3. Choose the desired size, click Copy HTML, and save the code somewhere — you’ll need it in just a couple of steps. We chose 48×48 as it is one of the most frequently used ones.
4. Find and open signature configuration in your mailing program or service and paste this:
<a href="https://twitter.com/YourTwitterAdress" target="_blank"> <img width="48" height="48" src="https://img.icons8.com/material-rounded/48/twitterx--v1.png" alt="twitterx--v1"/> </a>Keep in mind that you have to change 2 things in this code:
Here you need to paste a link your users should be redirected to when pressing this Twitter icon button in your signature.
Here you should use the HTML code for the icon you copied earlier.
To insert an icon into your macOS app, you should use NSSharingService classes:
NSArray* array = @[ @”myText”, [NSImage imageNamed:@”myImageFile”] ]; NSSharingService* sharingServiceFB = [NSSharingService sharingServiceNamed:NSSharingServiceNamePostOnFacebook]; [sharingServiceFB performWithItems:array];
For any item or group of items, the NSSharingService will display a sharing sheet to allow the user to pre-visualize what will be shared to the service.
A sharing service can
Here’s a video tutorial to help you with NSSharingService:
Starting with iOS 6, Apple introduced Social Framework. Basically, what it means is that each iOS developer has access to pre-built sharing options for various social media platforms. Social Framework handles the technicalities behind designing and programming the Share buttons for you. From social media icon design to the actual connection to third-party services, Social Framework manages this part of UX design so you don’t have to. It is immensely helpful for developers as there is no need to tweak the social media icons and test the Share tool for hours on end.
Also, check out this all-in-one open source library.
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
Each design has its own scale. It applies to elements size and like thickness. Now,…
This website uses cookies.