Icon system

Graphic designs, Brand identity

THE CONTEXT I played different roles in ServiceNow. The another major role was to create icons for their employee portal and other internal applications. It was a complete redesign of their entire range of product visuals, creating a cohesive design system ranging from small ui icons, all the way to large promotional badges.

Optical weight

Alignment of shapes

Brand inspiration

Great consistency

Visual principles

Promotional badges

THE CHALLENGE None of the existing icon has consistent look and feel, no guideline or branding used, no source files for the existing.

Optical weight

Optical weight is how human eyes perceive the size and significance of an object, and it doesn’t necessarily equal its pixel size or area. Circles have to be higher and wider to be optically balanced with squarish shapes.

Alignment of shapes.

I applied optical compensation for the lower stripe. Allowing the spikes to go 20 pixels beyond the length of the upper stripe is the way to compensate a gap between the spikes and make both shapes optically equal.

Brand inspiration

All of the materials use the same design elements, which are bold and geometric linework, mixed with a pop of their signature green color for visual interest.

I compared icons in different contexts and made changes for one another. Most importantly, inspired on each collectibles.

Principles & consistency.

Later this shape was modified by adding golden ratio proportions and a grid for guiding the designers of new icons. All of the materials use the same design elements, which are bold and geometric linework, mixed with a pop of their signature green color for visual interest..

Icons created for more than 12 internal applications of ServiceNow. Each catalog icons were designed separately for employee experience portal.

Gird and guidelines

Basically 3 shapes of icons created. Rectangle 32 x 24 px, circle 30 x 30px, square 28 x 28px. Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes. 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

All these hand crafted vector icons were converted as web-fonts. Icon fonts are text files that can be modified using CSS.