Skip to main content Skip to navigation Skip to search


Clarity provides design assets that help designers get started. These assets should be used in a design process that aligns with the Clarity Design System. To jump start your project and align with the Clarity Design System you should download the font resources below and have them installed on your computer. Set up a free tier Figma (opens new window) account to get started with the Clarity themes, icons and color libraries.

Primary Font

The default font intended for use with Clarity is Clarity City (opens new window). Download and install the font files on your computer to make sure it is available when using the assets below.

Clarity Angular uses Metropolis as the base font, which you can download below. Clarity City is an improved version of Metropolis, but has not been updated in Clarity Angular due to the potential for breaking changes.

Icon Assets

We provide a convenient zip of all icon files. This download includes all svg files for the icons available in the library.

Figma Libraries

Clarity uses the popular design tool Figma (opens new window) when designing and documenting components and foundations. Bookmark these resources to re-use Clarity assets in your design process.