Style Guide
Search…
Expressive Icons
Expressive icons are multi-colored icons that we created for spaces on the site and app that need an artistic and colorful indicator. They can supplement photography or denote services.
Two-Tone Icons
These icons have a bit more pop and personality than our standard line icons. Textures can be added to create more depth. These icons can be found in areas that need more visuals like on the home page or booking cards. These icons can also be used for marketing purposes.
These icons follow a formula and use a primary and secondary color. Shades of the primary color are used for stroke and fill while secondary colors are used for minor details like a smaller fill area or texture.
Examples of two tone icons.
Usage of Two Tone Icons
Two tone icons can be used to represent services, or add color interest. See below for examples from the My Services page on native and web.
Creating Two Tone Icons
1. Reference the Simple Line Icon Set in the shared folder
See if you can find what you're looking for. To ensure consistency of shape, please start here before starting from scratch or purchasing on iStock
2. Recolor the line icon accordingly
Strokes use the medium-dark shade of a primary Handy color. Fills use the medium-light shade of that primary color. If multiple fill areas, textures, or strokes are needed, the light shade of the secondary color can also to be used.
Secondary color use is at the discretion of the creator.
Here are the recommended color combinations:
Primary Color: Handy Blue
Secondary Color: Teal
Primary Color: Green
Secondary Color: Yellow
Primary Color: Purple
Secondary Color: Re
Examples of two tone graphics in suggested color combinations
3. Expand the shape
After creating the new icon (as a stroke), copy and paste it over to the corresponding "expanded" artboard and Expand the shape
4. Transfer icon from Illustrator to Sketch Master file
Copy paste your icon from Illustrator to a 64px by 64px artboard into the Master Symbols sketch file. Icons do not all have be square, but must not exceed 64px in any way.
5. Name and create a new symbol
Name your icon so it matches the other two tone symbols:
icon/two_tone/name of new icon
Hit "Create Symbol" on Sketch to turn the icons into a symbol.
Full Color Graphics
Product marketing, emails, and ad campaigns can take a more creative approach. As long as the color palette is used and the stroke width and radius are kept consistent, our graphic style can be taken in any direction. Here are some ideas or ways you can use our icons and color palette. These types of graphics should be used for customer-facing interfaces where there is enough space to show details, such as Web and Email.
Examples of Pros
Example of Lawn Mowing full color graphic.
Example of Interior Painting full color graphic.
General Rules for Full Color Graphics
There is no exact formula for creating these graphics, but we have created a list of rules around how to build them so they stay consistent from designer to designer.
1. Scenes should be self-contained. People and objects should be anchored to the same base, and not "floating" in the space. Placement of people and objects should create a sense of foreground and depth.
2. For the most part, all individual pieces of the scene should have a monochrome fill and be outlined in the same stroke style (stroke should stay the same color and weight regardless of fill color)
3. Strive for a sense of fun by using whimsical color combinations and avoiding overly detailed or realistic renderings. Colors should be playful and light.
4) Blue-Medium (#0BB8E3) should feature prominently in order to add a sense of consistency and branding to all graphics. If there is a professional in the scene, they should be wearing Handy Blue.
Creating New Graphics
All graphics should be created in Illustrator on an 1000px (width can be variable) by 1000px artboard.
All corners should be rounded (no sharp edges). Depending on the level of detail - stroke widths should be 4px or 6px.
It is most efficient to buy some basic ESP files and then recolor and edit them to fit the Handy aesthetic. See our board on iStock
If you are able to use parts of previously created scenes, you should integrate them into your graphic (in the long run this will help us create a Handy "world" where the same plants or objects appear again and again).
Once finished, add the graphic to the Master Icons File and re-upload the most recent file to Gitbook so it can be used by other designers in the future.
After creating a new icon, it's important to follow these steps so that we can keep our iconography consistent between designers and we can easily proliferate any updates to the design team.
Downloads
Simple Line Icon Set.ai
858KB
Binary
Master Icon Library
Handy Icon Library.ai
2MB
Binary
Master Icon Library
Last modified 2yr ago