Icons, glyphs, images. All can be used to help convey messages and ideas, or to act as indicators or signifiers in a user interface. I’ll be going over tips to create a set of icons specifically for use on screens.

Simplicity and Clarity

Icons are meant to be immediately understood by the user, ideally without the use of supporting text. They’re meant to be language agnostic, simple and clear to the user. These will often be displayed at small sizes to users, so keeping them readable when scaled down is a must — simplicity in your design will aid in readability.

This truck is an example of something that is not really an icon because it’s too busy and detailed. It’s more of an illustration. Avoid making icons too detailed, because as they get smaller, you’ll lose all that detail and the image will become less readable.

Let’s take that first truck I made and look at a few ways we can simplify it into a usable icon.

In the first one we keep the overall silhouette but fill it in completely and separate the wheels from the main body. The second one takes a similar shape but turns it into more of a line drawing. The last one is the most minimal of all the versions. The wheel wells are gone and traded instead for gaps in the lines to separate the different parts of the whole. All these options can be resized to be very small and still remain readable. When creating icons, play with iterations like this to hone-in on a style that you like and one that would also stay understandable to the user.

Use Exact Pixels (When You Can)

Be sure you are fitting your design into exact pixels whenever possible — this will ensure each icon you design looks crisp and clean across many devices. Most current design apps support some version of pixel-snapping, so try this out for the best possible display to the end user. This becomes a little more important when dealing with older devices like tablets and phones that do not offer high density screens. Lining things up as close to pixel perfect will provide the sharpest looking result.

Use your best judgement because this might not be possible with all shapes. For instance, diagonal lines and rounded shapes won’t fit precisely on a pixel. Use exact or snapped pixels where you can.

Develop a Consistent Style

This is one of the best tips I can provide for making a good icon kit. Find a style that fits the project and run with it. Find and develop through-lines in your icons. Repetition, in this case, is a good thing. It can be the same uniform corner roundness, line weight, colors, anything. All the shapes should be consistent and look like they belong next to each other. This can also tie into the branding of the project and help build brand awareness when the main logo is not present.

You can start with a few of the simpler shapes and work your way out from there. I like to start with arrow icons to kind of set the tone for the overall lines of the icons. Many projects need these kinds of icons so it’s usually a safe place to start.

Be sure to make everything at a uniform size. They don’t have to be the same size, but they should look like they belong together.

Draw Inspiration From Real Life Objects

People will better understand your icons if they represent known shapes or objects found in the real world. These are metaphors. Metaphors can be incredibly useful to help communicate an action or function of a tool in a quick and easy way. We see this in the form of a bell icon to represent a notification, or a bit of chain to represent a link on the web. If you need a specific icon, check around the web for images of a possible real-world counterpart and see if you can draw inspiration from those shapes.

Include Padding In Your Icons

Icons are all going to be different shapes and sizes. Make sure that you are creating them with the export in mind. Always include the padding in the final cuts to make sure they can be interchangeable without any distortion. In my example, you will see all of the icons have been placed on a 60-pixel grid, then their center mass was placed visually toward the middle of the artboard. In this case, you would export the whole artboard or frame, making the final result a uniform, square image for every icon. This means that they can be sent to development or off to a client knowing that they can all be used interchangeably without any headaches.

Make sure your icons look centered to the human eye. Some images, when placed in the exact center of the grid will not always look correct to a viewer. Make sure you are placing the center mass of your icon nearest the center of your grid so that it looks the best to you. Eyeball it and try exporting different versions to make sure you’re getting the best visual result.

Resources to Get You Started

Most of the icons used in this article, plus many more, are included in my Sketch starter kit. Can’t use Sketch? This link also contains folders where you can find the whole icon set as separate .png and .svg files. Ready to be used in your preferred design tool.

https://drive.google.com/drive/folders/11OGucrwMVXUynK0zeieZJZ9XqeVGXbsl

Take this project that I’ve started in Sketch and use it to create your own icons or use it as inspiration to start a completely new icon project. Inside you’ll find vector line drawings for all included icons, as well as all icons converted to outlines and ready to be exported.

Other great resources:

These are some of my favorite icon libraries, and all offer great starter icon packages.

FontAwesome — fontawesome.com
Google Fonts Icons (Formerly Material Design) — https://fonts.google.com/icons
Apple SF Symbols — https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
The Noun Project — https://thenounproject.com/
Feather Icons — https://feathericons.com/
Streamline Icons — https://streamlineicons.com/

Last, check out my post about Signifiers and Affordance to see some ways you can use the icons you’ve made.

-Jensen Laatsch, UX/UI Designer

When designing digital user interfaces, we’ve got to make sure that a user can easily intuit what they can do and how to do it — all through visual cues. Digital spaces are limited to just two dimensions and can get tricky when trying to communicate actions to users.

I’d bet that all of us have used a piece of software, a mobile app, or website that left us confused about where to go or what to do next. A lot of the time this is caused by interface elements that are not apparent to the user as being interactions at all. We need to show that there is an interaction through a signifier, and how the user might complete that interaction — this is known as affordance. Special care also needs to be given toward making sure a user can easily find all features and interactions available to them — this part is called discoverability.

A good illustration for affordance and discoverability through signifiers would be a freeway exit. You can see that there is a ramp leading off the freeway coming up, so you must be able to go somewhere or do something different than what you are doing now. That part is the affordance. I know that I can perform an action, complete a task, or navigate somewhere, and I know how to do it.

Where does it go? This is where signifiers come in. With the help of a road sign, the driver, or user of the freeway, is able to understand where this ramp will take them. In this case it’s a big sign that reads “Rest Area”. Signifiers aiding in discoverability can even begin well before the ramp is visible. You might see road signs a few miles in advance to indicate that attractions, lodging, dining, or other activities or locations are ahead.

Don’t confuse signifiers for affordance. I want to take a minute to say that there is some confusion about what is affordance and what is a signifier of affordance. Affordance is specifically the action. A door affords opening, a sign on the door that says “Push” signifies the action and allows someone to discover how to complete the action. There are nuances to this as well. People understand that a knob allows someone to open a door, so this could act as its own form of pattern affordance. Pattern affordances are behaviors that people learn over time and become common knowledge out of historical conventions. I’ll detail more about pattern affordance and the other main types of affordance in design later on.

Here we have a list of names, but we want to show a user that they can select one to see more information. Initially people might assume that there are interactions hidden here and try to tap a name to see what happens, but we’d like the interaction to be more apparent. We could start by separating the names, so they appear as their own sections. This shows that they are more than just a vertical list, but still isn’t quite as concrete as we want to be. It still lacks a good signifier to show that each name affords tapping.

An easy way to show people there is definitely something beyond each of these names is to add a graphic or icon. Something subtle, but still easily readable. This is a pretty common way to show that adding subtle signifiers can lead to better discoverability and show users where the interactions are.

Obvious or Explicit Affordance.

This comes in the form of a button that is designed to look the way a physical button might look in the non-digital world, or through more direct signifiers like text that reads “click here”. Recently, digital design has moved away from this a bit and in more of a direction that guides the user into important interactions without being so blunt or holding their hand every step of the way. Some use of explicit affordance can be a good thing, like in a call to action, but it might be best to use this sparingly.

Hidden or Implicit Affordance.

This is almost the opposite of explicit affordance. Interactions that use hidden or implicit affordance are usually not immediately visible to the user but become apparent after some initial exploration or interaction. They use fewer signifiers and come in the form of things like an action sheet on a mobile device, or maybe hover states on a button.

Hidden affordance can be effective in truncating content to simplify a design. An example might be a slide-out menu in a mobile app, or a list of actions that appears on a right-click with your mouse cursor. I wouldn’t say to avoid these types of actions, but maybe use them sparingly, or stick to instances where they might be expected.

Pattern Affordance.

This one comes is a lot of forms and has many signifiers. We’ve all probably seen a floppy disk icon to represent a save action, or a paper airplane icon to send an email. These are learned affordances and are kind of remnants of real-world items that have become conventions in digital design. A settings menu has never involved a physical gear as far as I know, but it’s the go-to icon to represent settings or tools in the digital world.

Another common pattern affordance signifier that we’ve all come to recognize is the notification badge. On icons and menu items everywhere. Usually accompanied by a number our other icon, but anymore, everyone is so familiar with this convention that just seeing a contrasting dot next to an icon is enough to drive users to click to see more.

Metaphorical Affordance.

A lot of pattern affordance blends into metaphorical affordance. These often use icons as signifiers like a paint bucket to represent a color picker, or a trash bin for a delete action, a shopping cart, gear, chain-link, cloud, or printer. We use signifiers rooted in real world objects or devices to help users understand what an action might be at a glance.

A lot of early smartphone interface design involved skeuomorphism to imitate real world object and textures to help teach users about interactions or functions. As users have become more familiar with common patterns and conventions in digital design, we’ve moved away from those styles and into flatter, simpler aesthetics.

Negative Affordance.

This is one that can be pretty powerful in directing a user to perform specific, intended tasks. One of the best ways to do this is using faded buttons to signify that there is an action, but maybe not yet. This one comes up a lot in places where a user might next to fill out information fields. A button at the bottom of their screen might read “Next” or “Save” but be faded out until they complete all of the intended actions elsewhere before the button pops into full color to communicate that they may move on.

This can be powerful in driving conversion. If you have a free and a premium version of a web app you might want to show users that other features or tools exist, but that they need to upgrade to use them. You can do this with negative affordance in the same way a faded-out button might work. You might show all of the tools in the same menu, but some are a more muted color than the rest, indicating to the user that they do not have access to this yet. You could still make them clickable, but direct the user to an upgrade screen where they might unlock more features within the app.

This can get tricky and drift into false affordance if not used carefully.

False Affordance.

Avoid false affordance. We don’t want to show a user something that looks like an interaction when it is not. This could come in the form of underlining words in a body of text. Many users will intuit this to mean that the underlined text is clickable as a link and might get confused when it is not. Try not to use common signifiers for things that are not meant to be interactions.

Other examples of this could be associating the wrong icon to a specific action, or a logo that doesn’t link to anything, or displaying text that looks like a button but has no user interaction.

The best designs keep things easy to find, easy to use, easy to understand, and enjoyable to the user.