Icons: The Resources You Didn't Know You Need

by Verblio Optimize -
hand-holding-pencil-to-drawing-of-lightbulb-icon-on-sketchpad

From the cryptographs on the ancient Egyptian pyramids to the RSS icons now gracing so many mobile apps and websites, icons have served as key points of varied information throughout history. These tiny graphic elements have been utilized in design since, well, since humans started designing.

Role of Icons in the Digital Age

Long before the word "emoji" took over the digital space and gave avid texters even more shortcuts than they needed, tiny graphic images had taken over their screens and devices. We refer to these visual cues as icons. 

When viewing a website, the majority of visitors will first scan the webpage for visually appealing content. It's only after something captures their attention that they'll start reading. Whether used in print or in web design, these small design elements serve the same purpose – to draw the eye quickly to crucial parts of a document or web page. 

First things first:

What are Icons?

In computing and digital design, icons are simple images, pictograms, or ideograms used in the web or mobile interface as a graphical representation of a specific entity, concept, functionality, or the application itself. The shopping carts you see on eCommerce sites, the home image that marks a clear path back to the home page of a website, and the envelop image that shows up on each image, are all part of the family called icons. 

Due to the limited screen space on iOS and Android devices, text labels are normally substituted by icons. The good thing about icons is that they don't take much space, don't require translation, and are easily recognizable by most people. They are found in maps, schemes, signs, manuals, and many other sources of information.

What are the Different Types of Icons?

Icons come in different shapes and styles. Nevertheless, they are categorized under three groups, including:

  • Universal icons

These are easily recognizable icons, and they are arguably, universally clear on their functions. Examples of universal icons would be the home icon, the envelope for mail, the printer icon for printing, and the magnifying glass for search.

  • Conflicting icons

Also referred to as ambiguous icons, conflicting icons are types of icons that are confusing or have more than one meaning. A good example is the 3-line hamburger icon that is mostly used to represent a menu but can also be used to represent a list. Another example of conflicting icons is the star icon, which can be used to represent ratings, featured items, favorites, and bookmarks.

  • Unique icons

These are types of icons that function beyond standard actions such as printing and sharing. They are typically hard to recognize and are usually used by companies to purvey their brand identity further. 

The above three main types of icons are further broken down into different sub-categories based on functions, visual performance, and applied image metaphor. They are as follows:

  • Clarifying icons

These are visual markers that are used to explain particular features. Using text along with these types of icons eliminates the risk of misunderstanding or wrong interactions for users who can possibly misinterpret the icons' meaning.

  • Interactive icons

These types of icons are directly involved in the interaction process and are the core supporters of navigation. They are tap-able or clickable and act in response to the user's request doing the action represented by them. 

  • Decorative icons

These types of icons serve an aesthetic purpose rather than a functional one. They are usually used to present special offers and seasonal features. 

  • Favicon

Also known as bookmark or URL icons, these are the icons representing a brand or product in the URL-line of the browser and the bookmark tab. They are used for quick recognizability as they give a brand a unique visual identity. 

  • Resemblance icons

These are types of icons that directly depict the physical item they represent. These include the battery alert icon, SD storage icon, alarm clock icon, etc.

  • Glyph icons

These are types of icons that use universal and simplified images and shapes to be flexible and easily recognizable in responsive design. They serve a key purpose in navigation for a digital product. They are in the form of line icons and filled icons. 

Difference Between Line Icons vs. Filled Icons

A line icon is a shape vector of a symbolic glyph outline that consists of fonts styled in CSS.  A filled icon, also referred to as a solid icon, is a type of icon that has its background filled with color. 

Whether you're using the line or filled icons, what holds importance is giving characteristic cues so that users can recognize their function at a single glance. Knowing when to use line or filled icons makes it easy for users to navigate your website or web app. They'll be able to recognize your icons faster and choose the right options. 

young-woman-sitting-at-desk-working-on-graphic-design-logo-project-with-monitor-and-digital-drawing-pad

So, when should you use line icons, and when should you use filled icons? You should use line icons if the characteristic cues of your icon are on shape edges or are too subtle to notice. For instance, the characteristic cue of the lock icon is the keyhole. 

If you fill the background of the lock icon with color, the keyhole becomes invisible. Without it, the lock icon looks like a purse or bag, making it confusing. Another great example is the search icon. If you fill the background, users may confuse the icon with a frying pan, table tennis paddle, or tennis racquet. Therefore, it's best to use line icons to increase the visibility of subtle characteristic cues. 

As for the filled icons, it's best to use them to represent physical objects. Some of the icons that are easier to recognize when using solid styling include those that represent tools, phones, scissors, etc. The solid styling makes filled icons resemble the silhouette of the physical object, which seems more realistic to users. 

Why Icons are Important for Successful UI Design

From the text-heavy websites of the 90s to the modern, responsive websites of today, icons have been an essential tool for communicating content messaging to the user.  Besides serving as a visual element that complements the copy and overall look of a website, icons also serve other important roles, including:

  • They make the user interface more visually appealing.
  • They describe functions and features easily.
  • They grab users' visual attention quickly.
  • They communicate ideas quickly.
  • They make the content more readable.
  • They help optimize navigation.

Each element that you place on your website can affect the overall user experience. Icons are some of the elements that have a huge impact on the user experience. 

Buy Inventive Icons For All and Skip the Creation Process

Nevertheless, the creation of icons can be a complicated process, not because they require a lot of work to create, but because it's difficult to represent the exact message you want to express with a tiny image. Luckily, there's a way to make the creation process easier – buy icons and skip the creation process. 

If you want to craft unique icons that easily stand out, you should consider the Inventive Icons For All, which are an array of thoughtfully-made icons that are good for a plethora of projects. The icons in this batch are ideal for social media banners, web computer graphics, mocking up client projects, and more. 

Contact us to find out about our daily deals for graphic designers and creative professionals.