Iconography

Iconography

Iconography can help simplify complex ideas or translate messages quickly. From science to conceptual needs, every icon should share a similar style and structure to unify our communications and contribute to a consistent brand experience that is unique to UCSF.

iconography overview

Sample icons demonstrate UCSF's iconography. The following guidelines help define icon style and demonstrate best-practice use cases. Designers can download a template to create icons following the guidelines below. If you have questions about development or formatting of icons, please contact the Office of Communications at [email protected].

Style Cues

Style Cues Line Weight

Consistent Line Weight

UCSF icons should be built with a consistent line weight to unify our family of icons. When developing icons, follow our template guidance below.

style cues flat terminals

Flat Terminals

Consistent details like flat terminals define the unique style of UCSF icons. Flat terminals create crisp edges that unifies iconography with our graphic language and identity.

Style cues radius

Corner Radius

Maintain a limited range of corner radii to balance with clean geometry, flat terminals and overall style of iconography.

Style cues outlines

Outline and Fills

UCSF iconography is defined by outlined forms with consistent line weights and terminals. If introducing filled areas, scale filled areas to family with overall line weights.

Standardized Grid

style grid

Grid

All UCSF icons should be based on a foundational grid of 192 x 192 pixels. Whether you are reformatting past icons or creating new icons, scale to this grid to establish consistency in size.

style padding

Padding

When building or scaling icons for consistency, add a 4 pixel pad around your icon within the grid to ensure all edges of the icon are rendered with ample clear space.

Style keyline shapes

Key Line

Keyline shapes within the grid serve as general guides for building and approximating scale. For icons that are circular, rectangular or square, keyline guides will help you quickly scale to fit.

Stroke Width

Consistent Stroke Weight

The primary purpose of following a 192 x 192 pixel grid is to establish universal consistency in scale and line weight. Once you have scaled an icon consistently within this grid, set all line weights to 6 pixels.

Iconography Palette

Palette 1
palette 2

In some use cases, UCSF icons may appear in two colors to add contrast and dynamism to the palette. When applying two colors, always use UCSF Navy and UCSF Blue with White to reinforce our core brand colors. Two-color icons may be reversed out of UCSF Navy or appear on white. Using two-color icons will immediately elevate the proprietary look and feel of our icons.

Applications

Sample website using iconography with scientific and medical symbols in navy, blue and white
application 4
application 5
Application 3
Application 2
application 6 and 7