Illustrations and iconography

Content

Illustrations and iconography are great tools to visually represent complex ideas. However, they require some thought and strategy when using them. Illustrations should not be used solely for decoration.

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

SBA staff and contractors can download illustrations and icons that SBA developed and approved.

Aesthetic guidelines

  • Outlines and perspective

    Illustration showing outlines and strokes

    Outlines are 3pt in #002e6d (SBA blue).

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

  • Fills

    Illustration showing fill color

    Fills are #007dbc (secondary blue).

    Try to use as much white fill as possible unless the illustration becomes boring, then start filling with secondary blue to add interest.

  • Highlights

    Illustration showing highlights

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

  • Tertiary details

    Illustration showing 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.

  • Action lines

    Illustration demonstrating 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.

  • Style exception - SBA red

    Illustration demonstrating SBA red usage

    SBA red (#cc0000) should be reserved for website “call-to-action” CTA buttons on SBA.gov, the red stripes on the American Flag, and illustrations or iconography that feature hearts or alerts.

  • Style exception - SBA green

    Illustration demonstrating SBA green usage

    Secondary green (#197e4e) and secondary tinted green (#a8c4b1) should be reserved for objects that are naturally green, including trees and money.

Tints of secondary colors in illustration and iconography

Tints of secondary colors are permitted only in illustrations and iconography on SBA.gov to add depth and dimension. Color palette combinations should be used sparingly and must be color contrast accessible. Primary colors should be predominant.

Tints:

  • Hex #a5c6e0
  • Hex #a8c4b1
  • Hex #fbedb2
  • Hex #c5c4c4
Example of tinted secondary colors within illustrations

Example of tinted secondary colors within illustrations

Last updated May 2, 2024