Your logos folder is already out of date

Description and use

A project’s logos folder drifts, leading to outdated icons. Switching to theSVG catalog provides consistent naming, licensing, and automatic updates via npm.

Problem

A project’s local logos folder drifts over time, leading to outdated, inconsistent, and unlicensed brand icons in the UI.

Outcome

Switching to theSVG reduced manual maintenance, ensured consistent icon quality, and enabled automatic updates via package releases, adding 27 new icons and unlocking 34 more template tiles without adding files.

Workflow

• 1. Inspect the logos folder for file origin, cleanliness, and current brand mark.
• 2. Add the appropriate theSVG package (e.g., @thesvg/react) to the project via npm or npx.
• 3. Replace local imports with theSVG component imports, specifying variant props for dark/light/mono/wordmark.
• 4. Remove the old SVG files from the repository.
• 5. Configure Dependabot or Renovate to monitor theSVG package for new releases.
• 6. Update the mapping script to read icons from the package instead of the folder.

Evidence

Our template catalog showed a logo for 63 of 442 apps, because someone copied 63 files by hand and nobody wanted to copy the rest.

Source

The first reason is the one that matters most. The other six are what keep it that way.

Source

We did this on our own product. The dashboard used a hand‑kept list that matched each of 442 app templates to a logo file. We replaced it with a small script that reads the template ids, checks which marks exist in the installed package and writes the mapping.

Source