Icon Terminology

There are a lot of different kinds of icons out there, and understanding what each type is and what they’re suitable for is the first step in using them in your designs.

Filled icons are graphical symbols and are usually solid. They can be scaled to whatever size you need and can be customized with different colors and shadow effects. Because they’re generally a solid color, filled icons can work really well at small sizes, but may not hold much visual interest at larger sizes.

Colored icons are just that—colored. They can either have a solid color or gradient color scheme and can make icons appear less formal and more playful. The downside to colored icons is that they can be more challenging to integrate into a product’s aesthetic and can even distract users from meaningful content. Because of that, their overuse is generally detrimental to the overall user experience.

Duotone icons contain two similar colors that are distinctly separated.

To create a duotone icon:

• Take an icon
• Split its elements into two layers such as an outline and fill space
• Select a starting hue
• Experiment with layer opacity

Duotone icons can add some extra visual interest to your designs without overpowering them. Just beware that at very small sizes, they can be hard to decipher from the accessibility standpoint.

Outlined icons are created by vector strokes, and are empty inside. On the upside, they’re clean, minimalist, and can look very polished. On the downside, they can take users more time to process and recognize.^[1]

An icon container is a designated area, often a square or a circle, that houses an icon. It helps visually separate the icon from other elements on the screen and can improve the touch-target size, making it easier for users to interact with the icon. Using containers also helps maintain a uniform appearance across different icons.

In design software like Adobe XD or Figma, an icon container is typically created by drawing a shape (such as a square or circle) in the color of your design and then placing the icon in the center of that shape. This approach helps organize and separate the icon from other elements on the screen without the container itself being visible.

Icon grids usually maintain consistent spacing between icons, aligning them both horizontally and vertically to create a visually balanced and harmonious layout. This kind of design is especially useful for maintaining a clean and organized look while providing easy access to different features or content.

Icon padding refers to the space surrounding an icon within a designated area or container. It establishes a buffer zone between the edges of the icon and the border of its enclosing container. This padding has a significant impact on the overall visual aesthetics and usability of an interface.

The primary purpose of icon padding is to enhance the user experience by making it easier for users to interact with the icon. Adequate padding ensures that users can tap or click on the icon accurately, even on touch devices where precision can be challenging. It helps prevent accidental taps by creating a margin of space that separates the icon from other user interface elements. Icon padding also contributes to the overall balance and spacing within the layout, promoting a harmonious and visually pleasing design.

The minimum recommended icon padding is generally around 8 to 10px on each side. However, this padding value may vary based on design guidelines, platform requirements, and the specific context of the user interface.

While the grid gives a basic structure to start from when designing an icon, keylines provide a more nuanced guide. The keylines are like a starter kit for creating your icons and include a few basic shapes—usually a square, rectangle, and circle. They help you maintain consistent visual proportions in your icon designs without restricting your creativity.

Icon border radius is a parameter that indicates how rounded or pointed the corners are. This parameter helps designers create visually consistent icons and establish personality. If one icon has crisp, sharp corners, you’ll want to make sure all of your other icons also include them.

Universal icons are immediately recognizable, and usually represent repetitive actions like home, print, or search. Universal actions in your product should be represented with universal icons to avoid confusion.

For example, the search icon is traditionally a magnifying glass. Getting creative by using binoculars instead is only going to confuse users. While you can adjust the exact style of the icon to fit your design, the basic shape and idea behind it should be the same.

Unique icons represent unique functions or features. The downside to using them is that they can be hard for first-time users to figure out. If you use them, make sure that you include text labels so users don’t have to decipher their meanings.

Logo icons would be one example of unique icons. The Sketch logo is a stylized diamond. For someone unfamiliar with the program, the diamond will be meaningless. But for those who have used the product, it’s immediately recognizable. Keep that kind of impact in mind when using unique icons.

Conflicting icons are multiple icons that commonly represent a single concept. For example, to like a post on Facebook you’d use a thumbs up, but on Instagram it’s a heart, and on other sites, it’s a star. While you can use any of those icons in your design, the key is to be consistent and only choose one for your interface.

Conflicting icons can sometimes have different meanings on different sites. Going back to the heart icon, on Instagram it likes a post, but on Facebook it loves a post, and on sites like Etsy it will add a product to your favorites list. That doesn’t mean you shouldn’t use a heart icon. Just be aware of the different meanings users may attribute to it and make sure your usage is clear and consistent.

Nowadays, users can access your content via various devices, and the icons must be optimized and crisp regardless of the device. Vector-based SVG icons are the perfect candidates for delivering high-quality results.

There are several advantages to using SVGs:

• Easily scaled without quality loss
• Optimized for search engines
• Can be edited (like color or size) directly in CSS
• Can be easily animated

SVGs can be made accessible by adding labels and descriptions that help screen readers understand the content. This makes them a good choice for users with disabilities. However, some older browsers don’t fully support SVGs, which can limit access for people using those browsers. In addition, SVGs aren't suitable for complex, detailed images as they overload the code, causing the page to load slowly.

Icon fonts are also vector-based and even smaller in size. However, browsers treat icon fonts as text and apply text anti-aliasing rules to them. This practice of smoothing the edges of fonts makes fonts more readable but may affect icons. If you want to avoid it, SVGs should be your choice.^[2]