Designing Icons and Other Graphics

Creating icons and other engaging visuals is an important skill for any designer. Whether you're creating stunning graphics for a website, designing icons for a mobile app, or producing illustrations to make complex ideas more understandable, design elements can improve user interaction and elevate your message.

Understanding the basics of crafting effective visuals—from selecting the right colors and shapes to understanding how to use them together—will help ensure that your designs strike just the right balance between aesthetic beauty and usability.

In this post, we'll dive into key considerations when designing icons and other small visuals as well as learn best practices in organizing assets so projects run smoothly. Ready? Let's get started!

‍

Icon Libraries in Design Systems

If you're just starting out with iconography on Design Systems, here are a few suggestions:

1. Consistency: Use icons that are consistent with each other. Avoid using icons that look dissimilar, as this can make the interface look unprofessional and the experience feel disjointed.
2. Size: Define a few sizes and stick to them. It's ideal to keep a base size of 16px/24px and use variations of 8px, especially when working with 8px grid designs.
3. Strokes: The aesthetics of a product can change depending on the type of stroke used in icons. Thick strokes signify a different meaning compared to thin strokes, and icons with sharper lines convey a different feeling than those with rounded lines. Choose the type of stroke that fits your design!

If you're working with a client, we don't recommend creating icons unless there is budget or time for it. Instead, license an icon pack from online marketplaces that provides ample options to fit multiple use cases while adhering to the above guidelines.

‍

Fonts vs. SVGs

There is always a debate among designers and developers as to whether to use icons as fonts or as SVG versions.

Icons as fonts have been popular for a long time, as they can be scaled easily without losing resolution. A great example is FontAwesome, they can also be styled using CSS, which provides designers with more control over their appearance. However, they also have some limitations. For example, icons as fonts can’t have multiple colors, and they can’t be animated. A couple of other challenges that you can face with Font Icons is the difference between creating the design system that focusses on it’s size or quantity of icons. But this can also be an advantage, as

On the other hand, SVG icons such as FeatherIcons are vector-based, which means they can be scaled without losing quality. They can also have multiple colors and can be animated using CSS or JavaScript.

‍

‍

Ultimately, the decision between using icons as fonts or as SVG versions depends on the specific needs of the project. If you need simple, scalable icons that can be styled easily with CSS, then icons as fonts might be the best choice. If you need more complex icons with multiple colors, animation, and scalability, then SVG icons might be the better choice.

Regardless of which option you choose, it’s important to keep your design system consistent. This means choosing a set of icons and sticking with them throughout your design. By doing so, you can ensure that your design is cohesive and easy to navigate, which will help improve the user experience.

‍

Understand Iconography

Designing icons and other graphics can often be tricky. No matter the type of graphic you're trying to design, there are certain steps you must take in order to ensure a successful outcome. A well-crafted visual element should not only look great but also have its intended purpose - whether that’s navigation, communication or branding.

Before we dive into the specifics of designing icons and other graphics, let’s discuss the three main components of visual design: shapes, colors, and text. These elements work together to convey meaning and create a cohesive look and feel. Consider an icon for a smartphone app. Its shape may be simple and abstract; its color could be bright and cheerful; its text words or acronyms that help convey the purpose of the app. All three elements work together to make the icon memorable and functional.

‍

Icon, 3D or Illustration

When it comes to designing icons, you want to focus on creating something simple yet distinct so that it’s easy for users to identify at a glance. It should communicate  a message, and be versatile enough to work with different devices, sizes, and contexts. Iconography also plays an important role in user interface (UI) elements such as buttons and menus, so it's important to consider how they’ll look when combined together.

In addition to icons, illustrations can help you communicate complex ideas in a the intended message quickly and efficiently. Additionally, icons should adhere to the your overall design system, which ensures a consistent look across all platforms or products.

‍

‍

Illustrations are another important type of graphics used in design systems. They can help tell stories or demonstrate complex ideas in an easy-to-understand way. When purpose of the creating illustrations, be sure to create or use it without being too complex or detailed. Use basic shapes and colors to create an iconic symbol that stands out from the crowd. Additionally, consider adding subtle touches like shadows, gradients, and textures to give your icons a unique look.

Overall, icons and illustrations are an important part of any design system. When designing these visual elements, it’s important to keep them simple, cohesive, and relevant to their intended purpose. By taking the time to craft a well-crafted set of visuals, you can create a memorable experience for users while also helping your products stand out from the competition.

‍

In conclusion

In summary, designing icons and graphics can be one of the most exciting (and sometimes time-consuming) elements of your design system. But with well-rimed planning, thoughtful execution, and an understanding of effective iconography -- you’ll make sure your visuals won’t demand attention for the wrong reasons. As visual elements become increasingly popular and asked for in digital products, designers must recognize they play a vital role in how consumers perceive their product.

When designing graphics for websites and apps, it’s important to ensure that they visually appealing way. They can be used to add context, depth, and personality to your design system. Just like with icons, the key is to keep them simple and relevant to your topic or service. When creating illustrations, consider how they’ll look when combined with other visual elements on the page such as text or other graphics.

By taking into account color psychology, layout grids, font choices and security considerations -- you can start to build a successful design system that will last; one that appeals to users across different platforms. From conventional symbols to custom-made icons: design is in the details! With that said, go ahead and get creative: unlock data stories with meaningful visuals that surprise and delight your audience as much as it informs them. Best of luck!

‍

Resources:

Interested in reading more? Deep dive into more topics here.

Maintaining icon libraries in Design Systems, Sepeda Rafael.

Icons as part of a great user experience, Nick Babich

Icons, Carbon Design System

UI Icons, IBM Design Language

Designing tiny and balanced interface icons, Slava Shestopalov

A complete guide to iconography, Bonnie Kate Wolf

Icons, Polaris Shopify