Icon Design Research
As I have never designed an icon set before I thought it would be a good idea to do some research into how these icon sets are made for user-interfaces and other digital systems and applications in modern society, due to our screens getting smaller and smaller by the decade with the emergence of the Apple Watch and wearable tech icons are becoming increasingly popular as a form of direct communication to the user – like typography but with symbols instead of words. Humans initially used symbols and icons to communicate with each other before typography was invented so this simplistic form of communication has been around for centuries. To give me a good idea on how to go about designing my own icon set I wanted to take a look at some of the key principles of icon design and what sort of rules or guidelines there are when it comes to creating an icon set that is both clean, simple and consistent. There are number of different icon grids that can be used to create an icon set, these include the iOS App Icon grid, Material Design Icon gird, Phospher Icon Design grid and the IBM Icon Design grid.
Basic Principles Of Icon Design
As mentioned before, icons are a more simplistic form of communication so they need to be extremely direct in their meaning without any misunderstanding to ensure they work effectively, some larger style icon designs have more detail due to their size but typically with system icons and icons for user-interfaces like applications and websites are often extremely basic with minimal detail. Another consideration when it comes to designing my icon set is thinking about consistency between each individual icon with the set, its important to ensure that they all have the same style and are cohesive across the board, having a line style icon with a filled icon would not be consistent although you could create two or more styles in their own individual icon sets to give yourself more options to work with when it comes to designing applications.[1]
Base Grid
Base grids are commonly used when it comes to designing icons, these are either based on a 1 pixel or 2 pixel grid to ensure a pixel perfect design. As icons are used primarily for digital applications that use screens to display the content it’s important to ensure your icons will still be readable on a lower resolution screen as they may become extremely pixelated and unreadable – Google’s Material Icon set uses a 1 pixel base grid to ensure the icons line up perfectly on the grid. The canvas size heavily depends on the output of the final design, for example if it is being design for smaller screens it will usually have a smaller canvas size, these can range from (in pixel values) 16×16, 24×24, 32×32, 48×48, 64×64, 96×96. The most commonly used canvas size for iconography and icon design for user-interfaces and system icons is 24 pixels by 24 pixels.[1]
Trim Area
The trim area is the white space around the edge of the canvas or art-board to ensure the icon design has enough breathing space, if the icon covers the whole art-board it may be less legible as humans process the whitespace within a design as well as the actual design itself – Google’s Material Design icon set use a 2 pixel trim area on a 24×24 pixel canvas which would make the overall width and/or height of the icon 20 pixels, other icon sets have a larger trim area like the Phospher Icon Design which uses a 6 pixel trim area. Having this whitespace around the icon design allows you more room to optically balance your icon set as different geometric shapes will look smaller that others to the human eye.[1]
Key Shapes
Key shapes are another element that is commonly seen throughout icon design and icon sets, these are basic geometric shapes like circles, squares and rectangles (both portrait and landscape) to help build the basic shape and form of the icon design. An example of this would be using the circle of these key shapes to create a cog style icon as a visual representation of a settings page for a mobile application. These key shapes can vary from design system to design system and some will include more shapes than others but they usually consist of an inner circle, an outer circle, an inner square, an outer square, a landscape rectangle and a portrait rectangle.[2]
Strokes & Fills
The stroke refers the the width of the line within the icon design, in Google’s Material Design icon set they use a 2 pixel stroke width to ensure consistency throughout their icon designs and ensure that their icons are pixel perfect. As we now have retina displays which have a higher screen resolution icons are beginning to be design in 0.5 pixel increments where it is common to see a stroke width of 1.5 pixels, this can be seen in the Phospher Icon set where they use a 1.5 pixel stroke on a 48 by 48 pixel art-board.[2] Filled icons are also commonly used as another style of icon design other than line icons, these will often be key shapes filled with colour and use a contrasting colour to emulate finer details within the icons image to help it communicate the intended message.
Cap/Butt
The cap, commonly referred to as the butt, is the end of each line within the icon set. This can either have straight edges like Google’s Material Icons or have rounded caps like in the Phospher Icon set, these ultimately depend on the style you’re trying to achieve with your icon designs but we are beginning to see more round cap line icons. Some of my favourite icon sets like Iconsax and Iconly use rounded caps so this. is something I want to experiment with when it comes to designing my own icon set.[1]
Sketching & Idea Generation
Design Research & Inspiration
For my design research and inspiration I wanted to consider what my icons primary use will be, for this project my icon set will be used for navigation purposes throughout my travel application. As my icons will be used for navigation I wanted to draw inspiration for other icon sets that are commonly used in UI/UX design and digital applications like Phospher Icons, Material Icons by Google and other icon sets like Iconsax and Iconly which I use regularly throughout personal projects and previous projects I have created throughout college and university. I want to consider the research I had conducted earlier on the basic principles of icon design to allow me to create a consistent set of icons for my travel application, for this project I think I will keep it simple and go with either the Material Icon grid and see what I can create with that, I may try and incorporate a more modern style like the Phospher icons where they use rounded caps and a thinner stroke width.
I have included some examples of the style of icons I want to create for my travel application and what I aim to achieve in this project.
Initial Sketches & Idea Generation
As I started to design my application using a different icon set I had a pretty good idea on what sort of icons I needed to create for my travel application, having this head start allowed me to really narrow down my ideas and try to create an icon set that is clean, consistent and suits the style of application I aim to create for this project. I aim to expand on this project after the submission deadline as I think this would be an amazing portfolio project that I can really show my design skills in a variety of areas like illustration, icon design and UI/UX design, as I want to expand on this application and create more app features I will need to develop my icon set further to use for these extra navigational elements. I really enjoyed sketching ideas for this icon set and I think this is something that I would like to look into in further detail to learn more about how icon sets are created and hopefully include a few icon sets in the shop section I plan to have on my portfolio website in the future.
I have included my initial sketches and idea generation below to give you an example of some of the ideas I came up with for my icon set.
Final Designs
Before I started to design my icon set I wanted to consider the research I had completed on different icon grid systems and some of the basic principles of icon design to create a template for me to design my icon set and get it consistent with each individual icon within the set. Creating this grid system really allowed me to see how other icon sets where made by deconstructing them in addition to seeing how they were placed on the icon grid, when I was deconstructing other icons I realised that some where offset using decimal pixel values, for example 16.76px, this went against the research I had done as icons should be pixel perfect but I also have to consider the output in which my icons are going to be displayed, as my icons are SVG’s and can be used as the same format on web and mobile applications this shouldn’t be a huge issue. SVG’s were not always available when it came to the World Wide Web in the early 2000’s and PNG or JPEG files were commonly used on websites and other web applications which would pixelate the image due to it being converted from a SVG or vector graphic to a raster graphic.
I have included a screenshot of the grid system I used below to give you an example of what my icon set was based off.
I used the Material Icon Design grid system along with a 1 pixel by 1 pixel grid, for the stroke of my icons I wanted to draw inspiration from the Phospher icon set where they use a 1.5px stroke width. Overall I wanted to keep my icons plain and simple so I chose to base the set around basic geometric shapes like squares, rectangles, circles and polygons, to make my icon set more playful to fit with the application I wanted to had rounded edges and corners along with round stroke caps.
I have included my final icon designs below to demonstrate what I created and how I drew inspiration from my research to achieve what I wanted for this project.
References & Sources
- Dima Groshev. 2022. Design principles for creating the perfect icon set | by Dima Groshev | UX Collective. [ONLINE] Available at: https://uxdesign.cc/design-principles-for-creating-the-perfect-icon-set-d12570e0bcb1. [Accessed 27 March 2022].
- Helena Zhang. 2022. Icon Grids & Keylines Demystified | by Helena Zhang | Medium. [ONLINE] Available at: https://minoraxis.medium.com/icon-grids-keylines-demystified-5a228fe08cfd. [Accessed 27 March 2022].