Design

In order to assure consistency across the Workleap platform, icon creators should follow the guidelines below.

Contribution Guidelines

New icons are often needed as we create new experiences within Workleap. The following guide will help you contribute to the Workleap icon library.

Process

Before proposing a new icon, look through the current icon set to see if an existing icon could fit your needs or if the concept you have in mind already exists.

All designers are encouraged to design their own icons and should do so.

Designing icons

Design Guide

The Workleap icon library has a set and specific design language. It’s important to follow this design language when contributing a new icon to ensure a common understanding across all verticals and make any new addition feel at home within Workleap.

Anatomy

Definitions

• Frame Size - The frame size is the size of the artboard that the icon is designed in.
• Stroke Alignment - The stroke alignment is the position of the stroke in relation to the shape. The stroke can be aligned to the inside, center, or outside of the shape. You should use center except if the shape is closed. In that case use inside.
• Corner Radius - Refer to the radius in the table unless using a different radius makes the icon more legible.
• Terminal - The terminal is the end of a stroke. The terminal can be round, square, or flat.
• Inner spacing - The inner spacing is the space between the shape and the stroke.
• Fill - The fill is the color of the shape. Icons using a fill are also known as solid icons. Any shapes on a filled icon should follow the stroke guidelines.
• Keylines - Keylines are the lines that define the shape of the icon. They are used to define the shape of the icon and the stroke alignment. You can toggle them in Figma by pressing ⌘G(Mac) or Ctrl+G(PC).

Values