Secure your business while working remote
Secure your business while working remote
 

7 expert tips on Web icon sets usage and benefits

Are you wondering about using an icon set for your web site and which one to choose? These expert tips might just convince you about what many professional web developer already know: it is much easier to search icons from an included icon set, than to find icons one by one and find a way to make them somehow consistent together.

We asked the community for their best tips on using icon sets, and a lot of them agree on using the popular font awesome icon‌ set, but however that's not the only icon set available on the market.

Which icon set are you using? Let us know in comments!

 Are you using a specific icon set for your website? Are you using Font Awesome for a specific usage (i.e. with Shopify, for a newsletter, ...)? If so, why are you using it, and what is your experience with the icon set? Have you used their CDN, have you noticed any improvement for your usage?

Jeff Roscher: it adds nice simple styling that customers find modern and appealing

We use Font Awesome at eWorkOrders.com. It is part of both our marketing site and our software as a service (SAAS) offering, a computerized maintenance management system (CMMS). On our marketing site, it adds nice simple styling that prospective customers find modern and appealing. We have added interesting borders and mouseover events to make them more interactive and exciting. For our customers, Font Awesome icons‌ are used as visual cue inside of input fields to help identify what type of data should be entered, like a calendar icon in a date field, an envelope in an email address field, or a phone icon in a field for a phone number. They are used on functional buttons, like edit, copy, and print.

The icons are used to give quick visual information about the data like a red exclamation icon next to an overdue work order or when something needs attention. They are in a few other places as well just to make the program look nicer..

Font Awesome has been awesome! Their CDN is fast and there are many options for every different kind of icon we have needed. We have never been disappointed.

Jeff is the president of eWorkOrders.com. eWorkOrders is an easy to use web-based CMMS that helps customers manage service requests, work orders, assets, preventive maintenance, and more.
Jeff is the president of eWorkOrders.com. eWorkOrders is an easy to use web-based CMMS that helps customers manage service requests, work orders, assets, preventive maintenance, and more.
  eWorkOrders.com

Rachel Foley: an affordable way to access a massive icon library with ease

At Map My Customers, we fully rely on Font Awesome for our iconography across all marketing channels and our product including our:

  • Website
  • Emails
  • Social Media
  • Custom Graphics
  • Mobile App
  • Web App

We use Font Awesome because it's an affordable way to access a massive icon library with ease. The style is more on the playful side which aligns with our brand; plus, the ability for us to utilize different weights and styles of icons gives us freedom.

We use the CDN for our applications which allows for a very consistent feel across the product user experience. Plus — it's super simple to upgrade when we need to. With marketing materials, we're a bit more flexible and use a mixture of CDN, our local install and vector versions.

FA has always been reliable for us since we fully adopted in January.

Rachel is a NYC-based web designer and content marketing professional with a drive to enhance growing B2B brands and build long-term marketing success through SEO strategy. She is currently at Map My Customers, a B2B sales software company creating solutions for field sales teams.
Rachel is a NYC-based web designer and content marketing professional with a drive to enhance growing B2B brands and build long-term marketing success through SEO strategy. She is currently at Map My Customers, a B2B sales software company creating solutions for field sales teams.
  Map My Customers

Andrew Ruditser: as Font Awesome upgraded, so did we

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their Social Media Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Font Awesome now offers a wide range of icons to choose from. We find this flexibility to be helpful for us from the Design phase to our Development phase. For Font Awesome, their platform offers two options for their users. The First Options is a Free service, which offers 1,588 free icons to choose from. The second option is a Pro membership, which offers 7,842 icons. This company also has what we call an Icon cheat sheet. This list displays all of their icons that Font Awesome offers, which informs us if they are part of the free package or the pro package.

To add, Font Awesome also offers an option to pull their code from their CDN. We highly recommend going their route. Their CDN has a fast response time, and we have little to no “Lag” between our site and their platform.

Andrew Ruditser, Lead Technology Coordinator
Andrew Ruditser, Lead Technology Coordinator
  MAXBURST, Inc.

Jeff Romero: it makes the speed of the page much faster

We develop custom websites on Wordpress for small-to-midsize business clients. We have historically used images to represent various icons on our websites ranging from social media profiles to telephone and email icons. The process to use an image for icons requires finding a consistent set of icons, uploading them and then resizing them to ensure they fit the site.

Although it's a small image file, it's a bit of a process to get a consistent set of icons and have them match the site's template. Now, using Font Awesome and its Wordpress plugin, we can replace icons with a consistent set of media that simply requires copying/pasting a line of HTML. Even better, the icons can be resized with a small amount of CSS (using the font-size property). The icons display better than an image-based icon and they are clearly visible on mobile devices. Finally, since it is a line of HTML rather than an image file, it makes the speed of the page much faster.

Jeff Romero is the co-founder of Octiv Digital, a digital marketing agency that specializes in local and enterprise SEO strategy, pay-per-click advertising management, web design / development and marketing analytics services.
Jeff Romero is the co-founder of Octiv Digital, a digital marketing agency that specializes in local and enterprise SEO strategy, pay-per-click advertising management, web design / development and marketing analytics services.
  Octiv Digital

Vance: especially good when you don't have a designer in your team

As a web developer, I use Font Awesome as a quick solution for plenty of nice icons. That being said, Font Awesome is especially good when you don't have a designer in your development team. It's handy for developing Wordpress plugins because developers could embed them into their plugins using Font Awesome's CDNs in no time.

My experience with Font Awesome is good so far. But that doesn't mean that it doesn't have any drawbacks. One of the obvious drawbacks is the page loading speed (performance). Since it's a quick solution, you have to embed a whole set of icons even though you just use a few icons. That could decrease the website loading speed and Google Page Speed (PSI) scores.

Vance, a web developer and a web owner.
Vance, a web developer and a web owner.
  Pointer Clicker

Sunny Ashley: simple, clean, and instantly recognizable for new visitors

We utilize Font Awesome icons‌ in our website footer. Specifically, we use the Facebook, Twitter, and LinkedIn icons to reference our social media channels. They're simple, clean, and instantly recognizable for new visitors. As other users of Font Awesome know, they were also very quick and easy to configure.

Sunny Ashley, founder and CEO of Autoshopinvoice. Autoshopinvoice provides shop management software for independent auto repair shops and garages.
Sunny Ashley, founder and CEO of Autoshopinvoice. Autoshopinvoice provides shop management software for independent auto repair shops and garages.
  Autoshopinvoice

Burak Özdemir: Feather Icons don't cause an excessive DOM size

Feather Icons is a collection of readable, visually pleasing open-source icons designed and maintained by Cole Bemis. As of June 2020, there are more than 280 icons available. All of the icons provided by the Feather Icons are MIT licensed, and downloadable separately as SVG files. You can customize the icon size, icon's stroke color, and stroke width on the Feather Icon's website before downloading them.

Feather Icons can be a great choice for your website or project if you are a developer or know how to handle some basic front-end tasks. As these lightweight icons can also be rendered with a modular JavaScript library, they don't cause an excessive DOM size, a metric that can harm your web page performance. Thus, with using Feather Icons, you can lower the page-loading speed more compared to other packages available on the market. The only downside of using this icon set is that you can't find most of the brand icons.

Feather Icons
Burak Özdemir is a web developer from Turkey. He specializes in creating web-based applications.
Burak Özdemir is a web developer from Turkey. He specializes in creating web-based applications.
  Burak Özdemir

Secure your business while working remote
Secure your business while working remote
 

Similar articles



Secure your business while working remote
Secure your business while working remote
 

Comments (0)

Leave a comment


Secure your business while working remote
Secure your business while working remote
 
Secure your business while working remote
Secure your business while working remote