Checkmark and attention icons are some of the most commonly used design elements of my design career so far, and it’s still amazing to me that they are as relevant today as they were 10 years ago. Back then, I created them mostly for websites and desktop applications. Nowadays, it seems that every mobile UI that I work on needs a set of these icons as well. I wonder if we’ll ever move past the simple checkmark and exclamation mark to indicate success and failure in our UX design? I can’t imagine what could possibly replace them, unless sound or feeling (vibration?) come into play.
Anyway, here is a set of icons that I created about 7 years ago for a Windows-based desktop app that I was working on. These icons needed to be displayed in various resolutions (from 256×256 all the way down to 16×16), so it was important to keep them relatively simple and void of detail. It’s a lot more difficult than it sounds to design an icon for such a wide range of display sizes! They tend to look worst at either extreme – too plain at it’s largest size, and too difficult to see at it’s smallest. The trick, I’ve found, is to identify the edge case size and design for the most common way they will be rendered on the screen. In this case, 32×32 was the size of the majority of uses for these icons, so I made sure that they worked best at this resolution. Other sizes mattered too, of course, but it was less of a priority.
This is a completely vector icon set. All lines and strokes are fully editable (they haven’t been expanded), so you can easily change the thickness and shape to your exact needs. And you’ll probably need to make a few adjustments to get these things looking a bit more modern and up to date with today’s current design trends.