It's impossible to imagine modern web pages without icons. They're used everywhere: in product descriptions, contact details, and many other page elements. Two popular options for implementing icons are Icon Fonts and SVG Icons. What are their benefits and drawbacks? Which to choose for your own website? This post should give you all the answers.
It’s hard to imagine modern web pages without these tiny but helpful elements – icons. You are sure to find them in navigation menus, contact details, product descriptions, etc. As an integral part of UI design, icons can also represent a challenge for developers.
An intense debate about icon fonts vs SVG fonts has been taking place for a while. Now, we’ll explore what icon fonts and SVG icons are, how you can use them, and which method you should prefer in particular situations.
Icon fonts, as the name suggests, represent fonts that contain icons instead of letters and numbers. Such icons include symbols and glyphs. As a rule, a set of icon fonts is stored in a font file.
Icon fonts were the de facto method of adding vector-based icons to websites until early 2020 when the real SVG support in different browsers became stable.
First, each character in icon fonts is scalable. Mainly, you can adjust icons with the help of CSS, modifying their size, color, and shape. You only have to create relevant classes in your CSS.
Second, the possibility to point to the font file lets designers use any font they wish without worrying if it is web-safe. Browsers request the indicated file and show the icon.
Third, icon fonts are small in size, and thus they can load quite fast.
While icon fonts have several considerable advantages, we should not disregard their disadvantages.
First, we mentioned the icon fonts scalability. Indeed, it’s possible to change the font color and add a shadow to it, if necessary. Yet, remember that you can apply only one color to such icons. Being monochromous and having style limitations is one of the cons that font icons may present for designers/developers.
As for the size, icon fonts design suggests a specific grid, such as 16×16, 32×32, 48×48, etc. Changing the grid can result in losing the quality of the icon.
Although you can adjust icon fonts for different viewport sizes, you should also remember to put them in aria classes to make them accessible for browsers.
Another problem that may arise with font icons is a flash of unstyled content (FOUC). To use icon fonts, you have to apply the @font-face rule, which instructs browsers to make an HTTP request for the font file.
While processing the HTML and the files linked to it, the browser builds the Document Object Model (DOM) in real time. Depending on the font file size, network conditions, and user’s hardware, it can take time to retrieve the font.
Until the browser is able to reach the font asset, it can display the textual HTML content before fully receiving it, which results in FOUC. Thus, there is a chance that random glyphs or characters will be shown instead of icons before the font is fully loaded. Such flashes can be irritating and impact user experience negatively.
What’s more, icon font files usually contain numerous elements, many of which you’ll probably not use. Yet, the file will take up the space.
An SVG (scalable vector format) file, as the name implies, is an image format for vector graphics that features scalability. SVG files use XML-based markup language for describing vector graphics. In other words, SVG images are text-based and can function with CSS, JavaScript, DOM, etc.
There are different ways of adding SVGs to websites. You can implement SVG icons either externally, as an image with the <img /> tag, or inlined in HTML.
To display an SVG icon, you should use the <img /> HTML element, similar to loading PNG, JPG, or GIF files:
<img src="path/your-image.svg"/>Inline SVG will look like this:
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500">
<!-- SVG code here -->
</svg>This particular type of adding SVGs does not increase server requests and thus doesn’t affect the website’s performance negatively.
Let’s explore the main advantages of using SVGs on web pages.
Unlike PNG or JPEG images, SVG icons are scalable, so your webpage will not suffer from a loss in quality when visitors use various devices to browse it.
Moreover, as browsers treat SVGs as images, there are no anti-aliasing rules for SVGs. Icon fonts, on the contrary, are vulnerable to these techniques and can look blurry. You can be sure that the visual quality of SVGs will be perfect in all resolutions.
SVGs are more flexible than icon fonts. First, you can add more colors with SVGs. Unlike single-color icon fonts, SVG icons allow for gradients. Furthermore, you can animate individual strokes in SVG icons.
Positioning an SVG vs icon font is simpler with SVG. To place an icon font, you might need to adjust various properties, such as word and letter spacing, alignment, line height, or font size. With SVGs, it’s enough to specify the size.
As we have already stated, specifying an icon font in CSS with the @font-face rule, you must indicate the URL where the font can be found. So, using the @font-face rule means instructing the browser to request the font file.
With SVGs, the crawler doesn’t have to send server requests to display the icon.
Search engines can crawl and index SVG files. Built-in semantic elements, such as <title> and <desc>, make these files more accessible than icon fonts. It means that crawlers will understand better what your page is about.
Additionally, <alt> elements will be useful if some screen scanners cannot process icons properly. So, accessibility issues will be solved by displaying the alt name to visitors.
The latest versions of drawing programs, like Inkscape, Illustrator, and Sketch, produce pretty clean SVGs. Then, you can use any text editor to adjust an SVG code. Additionally, numerous online resources can help you.
Here is a list of icon services that have SVG options:
Using these services, you can search for a necessary icon.
In some cases, you can also customize the size and color free of charge. Having made the necessary adjustments, you should copy the code or download the SVG.
After copying the code, we highly recommend checking it, keeping the compulsory elements, and removing any superfluous items. This will lead to a clean code and smaller file size. Let’s look at some examples.
With the Material Design Icons, you’ll get such a code:
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
</svg>As shown in the screenshot, you can download the SVG file or simply copy the code.
The FontAwesome code looks different:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM48 128V150.1L220.5 291.7C241.1 308.7 270.9 308.7 291.5 291.7L464 150.1V127.1C464 119.2 456.8 111.1 448 111.1H64C55.16 111.1 48 119.2 48 127.1L48 128zM48 212.2V384C48 392.8 55.16 400 64 400H448C456.8 400 464 392.8 464 384V212.2L322 328.8C283.6 360.3 228.4 360.3 189.1 328.8L48 212.2z"/></svg>As you can see, this code contains credentials — a link to the FontAwesome website. There are other elements that you can find in SVG codes.
Some software, like Illustrator, adds the ID attribute. If you use CSS and JavaScript, this attribute is helpful. Otherwise, it’s possible to remove it safely.
In Illustrator codes, you can also find x=”0px” y=”0px” piece of coding. You can remove these attributes, too.
As browsers don’t support these attributes, you can leave them out.
Several online tools can assist in removing the unnecessary coding:
Icon font vs SVG comparison shows that SVGs are more reliable, scalable, and rendered faster. That is why SVGs are becoming the new standard of web icons and a W3C Recommendation.
Here are some tips on what icons to choose.
GetDevDone has been at the forefront of the web development industry for almost 17 years.
We provide CMS-based development (HubSpot, Drupal, WordPress), frontend development with cutting-edge JavaScript frameworks/libraries (Vue, React, Angular), and pixel-perfect, responsive design to HTML/CSS conversion. We also craft email templates and stunning HTML5 banners, build online stores based on popular eCommerce platforms (WooCommerce, Shopify, Magento), and offer other top-quality services.
Reach out to us to discuss your business needs!
Read this post to learn about the basics of accessing and editing the all-important WordPress .htaccess file for better performance and security.
Searching for a good hosting to put your WordPress website live on the Internet? Read this post to learn about the basic hosting types and their essential characteristics. We also present an overview of the best hosting solutions available on the market at the moment.
We are thrilled to announce the great news we have just received from Clutch. This leading B2B market research firm has included P2H in its list of top-performing outsource web development companies in the WordPress category with 10th position among 15. Being ranked so high by one of the most prominent ratings and reviews platforms […]