Logos

Official Civic Design System logo files for use in your projects.

Logo files

Download the official Civic logo files below. All logos are provided in SVG format for optimal scalability and quality.

Wordmark

The full Civic wordmark logo. Use this as the primary logo representation.

Download SVG

Filename	`civic-wordmark.svg`
Format	SVG (Scalable Vector Graphics)
Recommended use	Headers, footers, identifiers, print materials

Favicon

The standard favicon for light backgrounds and light mode displays.

Download SVG

Filename	`civic-favicon.svg`
Format	SVG
Use case	Browser tabs, bookmarks, light mode

Favicon (White)

White favicon for dark backgrounds and dark mode displays.

Download SVG

Filename	`civic-favicon-white.svg`
Format	SVG
Use case	Dark backgrounds, dark mode

Usage guidelines

Clear space

Maintain adequate clear space around the logo to ensure visibility and impact. The minimum clear space should be equal to the height of the "C" in the wordmark on all sides.

Minimum size

To ensure legibility, do not display the logo smaller than the following minimum sizes:

Wordmark: 100px wide (digital) or 1 inch wide (print)
Favicon: 16px x 16px (browser favicon), 32px x 32px (standard display)

Background colors

Choose the appropriate logo variant based on the background:

Light backgrounds: Use the standard favicon and wordmark
Dark backgrounds: Use the white favicon variant

Do's and don'ts

Do

Use the provided SVG files for best quality
Maintain the logo's aspect ratio when scaling
Use the white variant on dark backgrounds
Ensure adequate contrast with the background

Don't

Stretch or distort the logo
Change the logo colors
Add effects like shadows or gradients
Place the logo on busy backgrounds
Rotate or flip the logo

Implementation

Favicon implementation

Add the following code to your HTML <head> section to implement favicons with automatic light/dark mode support:

<!-- Light mode favicon -->
<link rel="icon" href="/civic-guide/site/images/civic-logo/civic-favicon.svg"
      type="image/x-icon"
      media="(prefers-color-scheme: light)">

<!-- Dark mode favicon -->
<link rel="icon" href="/civic-guide/site/images/civic-logo/civic-favicon-white.svg"
      type="image/x-icon"
      media="(prefers-color-scheme: dark)">

Logo in header

Example of using the favicon as a header logo:

<div class="usa-logo">
  <a href="/civic-guide/" title="Home">
    <img src="/civic-guide/site/images/civic-logo/civic-favicon.svg"
         alt="Civic Logo"
         style="width: 50px;">
  </a>
</div>

Logo in identifier

Example of using the wordmark in the site identifier/footer:

<section class="usa-identifier__section usa-identifier__section--masthead">
  <div class="usa-identifier__container">
    <div class="usa-identifier__logos">
      <a href="/civic-guide/" class="usa-identifier__logo">
        <img class="usa-identifier__logo-img"
             src="/civic-guide/site/images/civic-logo/civic-wordmark.svg"
             alt="Civic logo">
      </a>
    </div>
  </div>
</section>