Design System / Components

Icons

All icons are SVG assets. Use the masked-icon mixin in Sass to render them in a single color (e.g. Pitt Gold or Pitt Royal). The mixin uses CSS mask so the icon shape is filled with your chosen background-color.

Using the masked-icon mixin

In any component that @use '../icons' as *; (or the project’s icons module), call the mixin on a block or inline element. The icon will take the size and color you pass.

@include masked-icon($size, $icon-path, $color);

Parameters:

$size – width and height (e.g. 1.5rem, 2rem)
$icon – path to the SVG file (relative to the compiled CSS, often ../../src/assets/img/icon/name.svg from a component in src/sass/components/)
$color – fill color (e.g. $color-pitt-gold, $color-pitt-royal, $color-light)

Changing colors: Use any Sass color variable or value as the third argument. The SVG is used as a mask, so the visible color is always the element’s background-color. Example for gold on dark backgrounds:

@include masked-icon(2rem, '../../src/assets/img/icon/chevron-right.svg', $color-pitt-gold);

Example for white (e.g. social icons in footer):

@include masked-icon(1.5rem, '../../src/assets/img/social/meta.svg', $color-light);

UI Icons

Icons in src/assets/img/icon/ — chevrons, menu, search, calendar, etc.

chevron-right

chevron-left

chevron-down

chevron-up

plus

circle

calendar

calendar-detail

briefcase

router

Block decorators

Decorative block SVGs in src/assets/img/blocks/ — used in secondary callout, general content, footer, etc.

block-3

block-4

block-5

block-6

block-plus

square

block-h-3

block-h-4

block-v-4

Social icons

Social platform icons in src/assets/img/social/ — use with masked-icon and $color-light on dark backgrounds, or Pitt Gold/Royal on light.