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

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.

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.

Corner Radius

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

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

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.

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.

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.

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

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