update logo with SVG version

[flacoman91]

Update logo with svg

Changes

• Added correct SVG generated from Illustrator
• Swapped out the logos used in Header and in the theme
• Deleted unused PNGs and logos
• Added README.md file in assets folder so future devs will know where the file came from and not copy random files off of wikimedia from a web search.

To test:

• go to preview link
• Compare the logo in storybook on top left sidebar with production Storybook
• Go to Header component and compare with production Storybook
• Both should look better

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://cfpb.github.io/design-system-react/pr-previews/pr-588/
Built to branch gh-pages at 2026-05-18 17:17 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[natalia-fitzgerald]

@flacoman91
What is the source of the SVG version of the logo? The "Consumer Financial Protection Bureau" text is definitely too light in color (and possibly in weight). Assuming we can make the text match the correct gray (darkness), what are the benefits to using an SVG logo?

[flacoman91]

Found it off wikimedia. We can probably get a better one if you know someone who has access to the originals

[natalia-fitzgerald]

@flacoman91
I have access to the originals, including the source vector/illustrator files. I just need to make sure that I track down the latest version (we have a lot of logo files in our archives). I can export in the size and format that you think would work best. Let me know what file format and size you need ideally.

[flacoman91]

I took a try at using Figma to modify the SVG. I selected the text path, added a Stroke property and edited the path weight to 1.

If you play around with editing the logo, you should just export it as an svg. I think it's better than providing a bunch of different pngs for the various breakpoints.

vector graphics should scale to any size without distortion.

The header should be updated with the modified svg logo:

https://cfpb.github.io/design-system-react/pr-previews/pr-588/?path=/story/components-draft-header--default

actually you can take a look at the two svgs in the git file changes here:
https://github.com/cfpb/design-system-react/pull/588/changes

[natalia-fitzgerald]

@flacoman91
Can you confirm that the SVG logo is using these colors?

[natalia-fitzgerald]

For documentation purposes, the logo I provided to @flacoman91 for this update was based on the official illustrator source file for the CFPB website logo. I downloaded the illustrator logo file, opened the file in illustrator, and exported it as an SVG.

This logo reflects a change that we made years ago (on the CFPB design team) to improve legibility and increase the contrast ratio by changing the gray from Gray 80 to Gray. This gray is also documented in the CFPB Design System here: https://cfpb.github.io/design-system/foundation/logo#lockups-1

[natalia-fitzgerald]

@flacoman91
Can you update the logo name to: cfpb_logo.svg

With that, this is approved.