Skip to main content

Illustrations and iconography

Illustrations and iconography are great tools to visually represent complex ideas thereby making them more accessible. They should not be used as just decoration and require some thought and strategy when using them.

Our illustration and iconography style is clean, modern, playful but still professional, and a touch dynamic. They should work well on a white or very light gray background.

You can download the icons which SBA has developed and approved here.

Guidelines for illustration and iconography aesthetics

Perspective

Illustrations and icons should be portrayed from one perspective, either the front or the top, giving it a flat appearance.


Outlines and strokes

Strokes are 3pt in #002e6d (SBA Blue).

illustration

Fills

Fills are #007dbc (Secondary Blue).

Try to utilize as much white fills as possible unless the illustration gets too boring, then start filling with Secondary Blue to add interest.

illustration

Highlights

If an object is solid and filled in with Secondary Blue, leave a 3pt-ish white highlight along left edge of it to convey a highlight.

illustration

Tertiary details

This includes glass effect, lines on paper, etc.

Use #c5c5c5 (SBA Gray Light) if SBA Blue and Secondary Blue are already in use.

illustration

Action lines

This includes blinging effects and movement lines.

Use 2pt in #002e6d (SBA Blue).

Use #007dbc (Secondary Blue) if it provides more visual balance to the overall image.

illustration

Style exceptions

US flag imagery: Follow the above style rules but also use #cc0000 (SBA Red) for the red stripes.

illustration