Consolidate and cleanup media - icons, SVGs and others

Check with Chagpt
Here is a plan.
The cleanest migration plan I’d use for default_admin, borrowing the strongest lessons from Heroicons, Font Awesome, and modern design-system icon libraries.

1) Adopt one canonical icon library

Make this the only long-term source of theme icons:

images/icons/

2) Move the good work currently under:

migration/media/icons/

into that location.

3) Stop organizing icons by color

Remove the Claro-style structure:

images/icons/000f33/
images/icons/003ecc/
images/icons/ffffff/
...

Color is presentation, not icon identity.

Heroicons and Font Awesome essentially treat:

chevron-down

as the icon, while color is supplied separately.

3) Keep icons color-neutral

Prefer SVGs using:

fill="currentColor"

or:

stroke="currentColor"

instead of:

fill="#000f33"

That lets one icon work for:

color: var(--admin-color-text);
or:
color: var(--admin-color-primary);

without creating duplicate SVGs.

4) Organize by stable icon families

For your admin theme, I’d use functional families rather than Font Awesome's solid/regular hierarchy, because you don't currently have multiple artistic styles.

images/icons/
├── action/
├── form/
├── general/
├── media-library/
├── messages/
├── navigation/
├── pager/
├── table/
├── toolbar/
└── toolbar-meta/

This keeps the useful structure you've already created.

5) Use consistent kebab-case filenames

Standardize everything to:

chevron-down.svg
sort-asc.svg
sort-desc.svg
question-mark.svg
back-to-site.svg
media-remove.svg
nav-toggle-to-left.svg

Avoid mixed conventions such as:

sort--asc.svg
questionmark.svg
backtosite.svg
nav-toggle-toleft.svg

A good rule is:

noun-modifier-direction.svg

6) Keep a central icon registry

Your existing icons.pcss.css idea is good.

Make it the abstraction layer:

:root {
  --admin-icon-add:
    url("../../images/icons/general/add.svg");

  --admin-icon-chevron-down:
    url("../../images/icons/navigation/chevron-down.svg");

  --admin-icon-warning:
    url("../../images/icons/messages/warning.svg");

  --admin-icon-sort:
    url("../../images/icons/table/sort.svg");
}

Then components use:

background-image: var(--admin-icon-chevron-down);

rather than embedding paths all over the theme.

That's one of the most important maintainability improvements.

7) Prefer CSS masks for icons that need arbitrary colors

For monochrome UI icons, this is often cleaner than background-image:

.admin-icon {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.admin-icon--chevron-down {
  mask-image: var(--admin-icon-chevron-down);
}

Now:

color: red;

effectively gives you a red icon without another SVG.

8) Use inline SVG where semantics or SVG manipulation matter

Don't force every icon into CSS.

Inline SVG is appropriate when:

it's actual HTML content
accessibility attributes matter
you need SVG-specific animation
individual SVG paths need styling
JavaScript manipulates the SVG

Decorative UI icons should generally stay CSS-driven.

9) Separate icons from other image assets

I'd converge on:

images/
├── icons/
├── logos/
├── illustrations/
├── backgrounds/
└── settings/

Don't mix logos, UI icons, decorative artwork, and screenshots together.

10) Migrate the old Claro assets incrementally

Don't delete the old folders immediately.

For every existing reference like:

url("../../images/icons/545560/chevron-down.svg")

replace it with the canonical icon:

var(--admin-icon-chevron-down)

Then remove that legacy SVG when nothing references it.

11) Eliminate images/core/

Your theme already says those assets are temporary Drupal-core copies.

Replace the remaining references with your canonical icon equivalents, then remove:

images/core/
12) Eliminate images/src/ as a second icon library

Move anything genuinely unique into:

images/icons/

For example:

images/src/hamburger-menu.svg

should become something like:

images/icons/navigation/menu.svg

or reuse your existing:

toolbar/hamburger.svg

if they're conceptually the same asset.

13) Deduplicate aggressively

1. You shouldn't end up with:
1. navigation/chevron-down.svg
2. general/chevron-down.svg
3. toolbar/chevron-down.svg
2. Unless those drawings are intentionally different. Reuse one canonical icon wherever possible.

14 Document a small set of rules

• Add something like:
• images/icons/README.md
• documenting:
• • SVG only for UI icons
• • kebab-case filenames
• • no hardcoded colors
• • use currentColor where applicable
• • don't duplicate icons by color
• • don't add size variants unless artwork differs
• • don't add style variants unless artwork differs
• • use existing icon before creating a new one
• • register reusable CSS icons in icons.pcss.css
• The end state
• I'd aim for roughly:

images/
└── icons/
├── action/
│ ├── checkmark.svg
│ ├── remove.svg
│ ├── show.svg
│ └── trash.svg
│
├── form/
│ ├── asterisk.svg
│ ├── checked.svg
│ └── toggle-unchecked.svg
│
├── general/
│ ├── add.svg
│ ├── calendar.svg
│ ├── close.svg
│ ├── loader.svg
│ └── more.svg
│
├── messages/
│ ├── error.svg
│ ├── info.svg
│ ├── status.svg
│ └── warning.svg
│
├── navigation/
│ ├── chevron-down.svg
│ ├── chevron-left.svg
│ ├── chevron-right.svg
│ ├── chevron-up.svg
│ └── menu.svg
│
├── pager/
├── table/
├── toolbar/
└── media-library/

The main lesson from Heroicons and Font Awesome isn't to copy their folders. It's to copy their principles:

one canonical icon → stable descriptive name → visual variants only when genuinely necessary → presentation such as color handled outside the asset.

For default_admin, your new migration/media/icons/ architecture is already about 80% of the way there. The main work now is standardizing names, moving it to images/icons/, centralizing references, and deleting the duplicated Claro/core legacy assets afterward

images/
├── icons/
│ ├── add.svg
│ ├── asterisk.svg
│ ├── calendar.svg
│ ├── check.svg
│ ├── chevron-down.svg
│ ├── chevron-left.svg
│ ├── chevron-right.svg
│ ├── chevron-up.svg
│ ├── close.svg
│ ├── drag.svg
│ ├── drag-x.svg
│ ├── drag-y.svg
│ ├── error.svg
│ ├── hamburger.svg
│ ├── info.svg
│ ├── media-edit.svg
│ ├── media-remove.svg
│ ├── more.svg
│ ├── pager-first.svg
│ ├── pager-last.svg
│ ├── pager-next.svg
│ ├── pager-prev.svg
│ ├── search.svg
│ ├── sort.svg
│ ├── sort-asc.svg
│ ├── sort-desc.svg
│ ├── status.svg
│ ├── trash.svg
│ └── warning.svg
│
├── logos/
├── illustrations/
└── backgrounds/

:root {
  --admin-icon-add:
    url("../../images/icons/add.svg");

  --admin-icon-chevron-down:
    url("../../images/icons/chevron-down.svg");

  --admin-icon-error:
    url("../../images/icons/error.svg");

  --admin-icon-sort-asc:
    url("../../images/icons/sort-asc.svg");

  --admin-icon-warning:
    url("../../images/icons/warning.svg");
}

background-image: var(--admin-icon-chevron-down);

After checking with what the following libraries do the recommedation was added above to follow that structure.

1. Font Awesome
2. WordPress
3. Astro
4. Bootstrap
5. USWDS

There is also a defaulttheme/core/misc/icons folder. Should some of default theme icons come from a library in core? Same as the font or not?

Shared assets
│
├── core/font
│ ├── inter-latin.woff2
│ ├── inter-latin-ext.woff2
│ └── inter.css
│
└── core UI icon pack
├── chevron-down.svg
├── chevron-up.svg
├── search.svg
├── close.svg
├── check.svg
├── warning.svg
└── ...

Themes
│
├── default_admin
│ └── icons/
│ └── only default_admin-specific icons
│
├── Gin
│ └── icons/
│ └── only Gin-specific icons
│
└── Mercury
└── icons/
└── only Mercury-specific icons

https://www.drupal.org/project/drupal/issues/3578936#comment-16746065
It be interesting to have a core icon pack for generic ones like Wordpress and others are trying to do.