77 Essential Icons

The Brief

77 Essential Icons is a self-initiated project that was created as a result of needing a repository of commonly used icons for personal use. The project also allowed me to expand and develop my knowledge of craft and consistency in icon design.

Rather than being an entirely exhaustive set of interface icons I wanted to look at the most popular metaphors used in current digital design. The result was a set of 77 icons that focus on covering the bare essentials.

Client
Personal

My Role
Iconography

Year
2015

[unex_ce_button id="column_content_0wll9an1y" button_text_color="#0000ff" button_font="bold" button_font_size="16px" button_width="auto" button_alignment="left" button_text_spacing="0.5px" button_bg_color="transparent" button_padding="10px 20px 10px 20px" button_border_width="3px" button_border_color="#0000ff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0.5px" button_bg_hover_color="#0000ff" button_border_hover_color="#0000ff" button_link="https://www.bit.ly/77-icons" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]FREE DOWNLOAD ➞[/ce_button]
1_77_Essential_Icons1_77_Essential_Icons

I started the process with a stage of discovery, involving metaphor ideation and words that I thought should be included in the set. This resulted in a definitive list of essential user-interface icons.

Sketching played a fundamental role in my exploration process. A pen and paper allows rapid idea generation and from this you can instantly determine the success of your chosen keywords. Where possible I tried to focus on the simplest form of each metaphor, stripping back any unnecessary levels of detail. This proved beneficial to the user’s recognition of each icon.

Various rules were defined through the physical design process and were strictly adhered to. This helped determine and push forward the visual style and personality of the set.

Things such as stroke weight, corner radius, visual weight, gap size, terminal cap and diagonal angles were all taken into consideration to ensure a consistent family of icons.

The icons were constructed on a 100x100 pixel grid ensuring that the horizontal and vertical strokes were aligned to this grid at all times. I designed and refined the icon set in Illustrator (which gave me added flexibility for SVG exports), before transferring each icon into Photoshop as an individual shape layer (ensuring that they sat 100% on-pixel).

Numerous small stages of refinement stages took place, as with icon design you really get a chance to focus on the smallest levels of detail. I laboured over each individual pixel to ensure sure that every icon was as instantly recognisable as possible.

3_77_Essential_Icons3_77_Essential_Icons
2_77_Essential_Icons2_77_Essential_Icons

The Outcome

The outcome was a cohesive set of handcrafted outline icons that can be downloaded for free, by all. 77 Essential Icons have now racked up over 10,000 downloads across various different social media and online channels, and have been published across numerous design blogs. 

4_77_Essential_Icons4_77_Essential_Icons

The Download

I thought it was vital that this resource was freely available and as accessible as possible—whatever software you may have. I have included an array of different file types inside a tidy zip file: AI, EPS, PNG, PSD, PDF, SVG and icon font.

77 Essential Icons are free to download and use for both personal and commercial use. No attribution is required. No redistribution without my consent is allowed.

[unex_ce_button id="content_ioa4g3lit" button_text_color="#0000ff" button_font="bold" button_font_size="20px" button_width="auto" button_alignment="left" button_text_spacing="0.5px" button_bg_color="transparent" button_padding="10px 20px 10px 20px" button_border_width="3px" button_border_color="#0000ff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0.5px" button_bg_hover_color="#0000ff" button_border_hover_color="#0000ff" button_link="https://www.bit.ly/77-icons" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]FREE DOWNLOAD ➞[/ce_button]