Icons allow you to clearly and quickly convey information to a busy audience, adding some visual flair to your communications in the process.

Using Icons

When to use: These icons can assist you in bringing attention to specific information or in distinguishing different sections or ideas in your messaging. We hope they provide you the flexibility you need in a style that aligns with the university’s overall branding.

How to use: The WashU icons folder system includes a print and web folder so you have the right file types for each use. You can easily take the icons and drop them into your designs.


Clear Space

Using clear space:
It’s important to keep the area around the icons free of type or imagery so other elements aren’t competing with your icons. To ensure this, we recommend that each icon never appear closer than ten percent of the icon’s total height or width to any other typography or artwork (see example at left). This clear space may be adjusted in certain circumstances, but designers should still take care to separate the icon from other page elements.

icon with 10% margin of space marked out

Altering Icon Color

You can alter the colors of these WashU icons to fit within your design. We have provided a color palette to use when changing the colors within each icon. The editable files (or EPS files) can be manipulated in this way so that the icons will work with whatever WashU branded materials you are creating. If you’re designing for print, please make sure you’re using CMYK colors; for web design please use RGB or Hex values.

Primary icon colors and tints

This set of colors is used through most of the icon library. These colors are also used within the secondary palette of the overall WashU branding, so they should fit in well with any branded materials you are producing.

Print:
PMS 325
CMYK 56, 0, 25, 0

Web:
rgb(103, 200, 199)
#67c8c7
$turquoise-light

Print:
PMS 7408
CMYK 2, 26, 100, 0

Web:
rgb(255, 204, 0)
#ffcc00
$yellow

Print:
PMS Black 7 C
CMYK 68, 61, 60, 49

Web:
rgb(61, 61, 61)
#3d3d3d
$black

Secondary icon colors and tints

This secondary color pallet uses the WashU red alongside the purple from the secondary WashU pallet. These colors, used in tandem with the primary icon colors above, can offer depth to your design.

Print:
PMS 2623
CMYK 70, 100, 28, 16

Web:
rgb(98, 36, 102)
#622466
$purple

Print:
PMS 200
CMYK 0, 100, 59, 24

Web:
rgb(165, 20, 23)
#a51417
$red


1-3 Color Icons

We have created one-, two-, and three-color options that allow the icon library to remain consistent with the WashU brand.

One color

Using a one-color icon allows you to add a simple graphic to an already complex design. Not all of the icons may work as a simple one-color graphic, but the ones that do can really stand out. One color graphic should only use the primary icon color palette.

Two or three color

Two- and three-color options add brighter elements to your design and can be used when a mixture of WashU’s colors have been implemented, helping to pull it all together.


Key Attributes

WashU icons all share certain attributes that make them consistent with the WashU brand and with one another.

Flat Design: The flat design of many icons, achieved through minimal shading and use of shapes instead of gradients, brings simplicity and movement to the icons.

Geometric Shapes: Many icons consist of simple shapes that come together to form an icon. Intended to be easy for you to reproduce and work with, simple elements such as squares and circles also contribute to the icon library’s overall cohesion.

Interchangeable Elements: You will notice a number of elements reappearing in different icons, such as hands and the heart. These reoccurring elements also bring consistency across the WashU icon library. Use the example below to guide you in combining elements to create icons.


Typography

Most of our icons do not use typography, but occasionally will include a numeric statistic. The following guidelines will help you include type alongside one of our icons, as well as creating a type-only icon as needed.

Using Type Within an Icon

Using type with an icon easily adds a statistic with a design. The font we use is Libre Baskerville Bold, and it can be found on the Public Affairs website.

Using Type as an Icon

Numbers, percentages, and statistics, even when used on their own, can grab attention within your design. If you would like to have a type-only icon, please use Libre Baskerville Bold (italics optional), and you may want to adjust kerning (spaces between letters) and leading (spaces between each line) to ensure that your text-only icon is balanced and not too tightly squeezed between lines or letters.


Download Icon Library

We have created a WashU icon library for you to access that is both brand-aligned and available across different platforms.

icons

We hope you find these icons useful in grabbing viewers’ attention, communicating ideas effectively, and highlighting certain sections of a piece. We encourage you to use these icons intentionally in conveying information rather than simply adding them as design elements to your work. These icons are available in various formats.