My experience of creating custom material design icons
A couple of days ago I received a new requirement from one of the clients for customizing icon design which are not available in the google material design library. The requirement was to create icons following material design principles.
One should always try to create icons with less complexity and with a single object if possible as its more easy to understand for end-users. That’s almost all you need to know if you have to use icons in your application or website. But to create icons based on material design principles you should know few basic key points before you start designing.
The shapes of the icon should be geometric and bold. They should be aligned in symmetry and be consistent in how they look to ensure readability and clarity even when the size is small.
Grid and key-line shapes: The aim should be to to create icons for viewing at 100% scale for pixel-perfect accuracy. Icons are displayed as minimum 24 x 24 dp and maximum can be as per a specific requirement.
Layout: Your graphic should remain within the premises of the live area, No parts of the graphic should extend beyond the trim area. Your graphic is limited to the 20 dp x 20 dp live area, with 2 dp of padding around the corners.
Clean and Pixel perfection: To avoid distorting an icon, position icons “on pixel” by making the X and Y coordinates into integers, without decimals.
Corners: Corner radius is 2 dp by default. Interior corners should be square, not rounded. For shapes 2 dp wide or less, stroke corners shouldn’t be rounded.
Stroke: System icons use a consistent stroke width of 2 dp, including curves, angles, and both interior and exterior strokes.
Icon themes: Three attributes of system icons can be customize in order to create custom system icons: stroke, fill, and color.
Stroke and fill: When system icons are unfilled, they are defined by their stroke. A thicker stroke adds a sense of heaviness and mass, making filled icons feel heavier. A thinner stroke implies lightness, giving unfilled icons a lighter style.
Outlined icons: Outlined icons customize stroke and fill attributes for a light, clean style that works well in dense UIs. The stroke weight of outlined icons can… be adjusted to complement or contrast the weight of your typography.
After I finished my design I created the .svg version of the icon and a png version that I’m going to share with the client.
This is my process. You might have a different process to approach the problem please share your feedback here or feel free to comment on the solution provided by me.
