refactor(ui): give the icons one vocabulary and sweep the call sites

`plus` meant "add to the queue", "add to a playlist", "make a new
playlist" and "you do not own this" -- the first two adjacent in the
same context menu, so two neighbouring items were the same glyph doing
different things. `list` meant the queue (the button that opens it), the
Playlists destination, and adding to the queue in `queue-panel` alone.
Two icons carrying seven meanings is not a vocabulary, and nothing
catches it: a wrong-but-real icon renders perfectly.

`utils/icon-language.ts` is the table, beside `library-status.ts` as the
issue suggested. The rule it is built on is that an icon names the
**noun** it acts on, not the verb: "add to queue" and "add to playlist"
are one verb on two nouns, so the noun is what differs -- which is why
adding to a playlist wears the Playlists destination's own icon, and why
the queue took `bars-staggered` and stopped wearing Playlists'. `plus`
keeps the one meaning it is unambiguous about, making something that is
not there yet, which covers New Playlist and the drop zones.

`bars-staggered` is the only new glyph, vendored through names.txt and
fetch-icons.mjs after confirming it is in Font Awesome **Free** 7.3.1.

Two things this found rather than changed:

- The request toggle's outline/solid pair was already in the app and
  already right -- `explore-album-details`'s "Request this" button has
  used `regular/bookmark` -> `solid/bookmark` since it was written --
  while the badge forty pixels away showed a **plus** for the same
  state. That is `utils/library-status.ts`'s fault one layer down: it
  made the two surfaces agree on what wanting *means* and left them
  disagreeing on what it looks like.
- `explore-artist-details`'s Follow button was `bookmark-check`, which
  is Font Awesome **Pro** and has never been bundled, so it has drawn
  the missing-icon fallback -- a circled question mark -- for every
  followed artist since it was written. `requested-badge.spec.ts` was
  written for exactly this bug on the album button and says so in its
  docstring; this is the same bug one component over, still live,
  because `offline-icons.spec.ts` sweeps `__yjIconMisses` and no spec
  had ever followed an artist.

So the test does what reaching the state cannot. `icon-language.test.ts`
reads every `src/**/*.ts` as raw text and fails on a governed name
written outside the table, and separately asserts every `ICON_*` is a
*bundled* name -- which is what makes a Pro name a failing test rather
than a runtime report from a state something has to reach first. Its
first assertion is that it read any source at all, because a sweep over
an empty glob passes.

`chrome.test.ts` asserted `['check', 'bookmark', 'plus']` and so pinned
the badge's glyphs against the vocabulary they were meant to follow; it
names them from the table now, and keeps the assertion that the three
differ, which is the property the states actually need.

Downloads keeps the solid bookmark on purpose. That is one word twice,
not two words: the badge says the entity is on your list and the nav
item is that list.

Closes #34

frontend/src/assets/icons/fa/solid/bars-staggered.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM64 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L96 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>

frontend/src/components/artists-view/artists-view.ts

@@ -37,6 +37,10 @@ import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js'
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@components/playlist-picker/playlist-picker.js';
 import { dict, list } from '@utils/binding';
+import {
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+} from '@utils/icon-language';
 
 /** Pixels to change card width per scroll tick. */
 const ZOOM_STEP = 16;
@@ -1371,7 +1375,7 @@ export class ArtistsView
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_QUEUE}
                                   ></wa-icon>
                                   Add to Queue
                               </wa-dropdown-item>
@@ -1407,7 +1411,7 @@ export class ArtistsView
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_PLAYLIST}
                                   ></wa-icon>
                                   Add to Playlist
                                   <span

frontend/src/components/bottom-nav/bottom-nav.ts

@@ -6,6 +6,7 @@ import type WaDrawer from '@awesome.me/webawesome/dist/components/drawer/drawer.
 import { designTokens } from '../../styles/tokens.css';
 import '../sidebar/app-sidebar.js';
 import { nameDialog } from '@utils/name-dialog';
+import { ICON_PLAYLIST } from '@utils/icon-language';
 
 type View = 'home' | 'albums' | 'tracks' | 'playlists';
 
@@ -138,7 +139,7 @@ export class BottomNav extends LitElement {
         { id: 'home', label: 'Home', icon: 'house' },
         { id: 'albums', label: 'Albums', icon: 'compact-disc' },
         { id: 'tracks', label: 'Tracks', icon: 'music' },
-        { id: 'playlists', label: 'Playlists', icon: 'list' },
+        { id: 'playlists', label: 'Playlists', icon: ICON_PLAYLIST },
     ];
 
     override connectedCallback() {

frontend/src/components/cover-grid/cover-grid.ts

@@ -76,6 +76,10 @@ import type {
     SortDirection,
 } from './cover-grid-types.js';
 import { list } from '@utils/binding';
+import {
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+} from '@utils/icon-language';
 
 @customElement('cover-grid')
 export class CoverGrid
@@ -2123,7 +2127,7 @@ export class CoverGrid
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_QUEUE}
                                   ></wa-icon>
                                   Add to Queue
                               </wa-dropdown-item>
@@ -2156,7 +2160,7 @@ export class CoverGrid
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_PLAYLIST}
                                   ></wa-icon>
                                    Add to Playlist
                                    <span

frontend/src/components/explore-album-details/explore-album-details.ts

@@ -52,6 +52,12 @@ import { dictByName } from '@utils/binding';
 import type { TrackDetails } from '@components/track-details/track-details.js';
 import { showTrackDetailsForPath } from '@utils/track-details-opener.js';
 import '@components/playlist-picker/playlist-picker.js';
+import {
+    ICON_CAN_REQUEST,
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+    ICON_REQUESTED,
+} from '@utils/icon-language';
 
 /**
  * The region the album header's own failures are rendered in.
@@ -2437,7 +2443,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                     data-testid="album-queue"
                     @click=${() => this.queueOwned()}
                 >
-                    <wa-icon slot="start" name="list"></wa-icon>
+                    <wa-icon slot="start" name=${ICON_QUEUE}></wa-icon>
                     Add to queue
                 </wa-button>
                 ${partial
@@ -2740,7 +2746,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                      of the same Free glyph carry the toggle instead. -->
                 <wa-icon
                     slot="start"
-                    name=${this.isRequested ? 'solid/bookmark' : 'regular/bookmark'}
+                    name=${this.isRequested ? ICON_REQUESTED : ICON_CAN_REQUEST}
                 ></wa-icon>
                 ${this.isRequested ? 'Requested' : 'Request this'}
             </wa-button>
@@ -3338,7 +3344,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                                             @click=${() => this.onContextMenuAction('add-to-queue')}
                                             @mouseenter=${() => this.ctxMenu.closePlaylistSubmenu()}
                                         >
-                                            <wa-icon slot="icon" name="plus"></wa-icon>
+                                            <wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
                                             Add to Queue
                                         </wa-dropdown-item>
                                         <wa-dropdown-item
@@ -3357,7 +3363,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                                                 this.openPlaylistSubmenu();
                                             }}
                                         >
-                                            <wa-icon slot="icon" name="plus"></wa-icon>
+                                            <wa-icon slot="icon" name=${ICON_PLAYLIST}></wa-icon>
                                             Add to Playlist
                                             <span class="submenu-arrow">&#9654;</span>
                                         </wa-dropdown-item>

frontend/src/components/explore-artist-details/explore-artist-details.ts

@@ -59,6 +59,12 @@ import { dict, dictByName } from '@utils/binding';
 import type { TrackDetails } from '@components/track-details/track-details.js';
 import { showTrackDetailsForPath } from '@utils/track-details-opener.js';
 import '@components/playlist-picker/playlist-picker.js';
+import {
+    ICON_CAN_REQUEST,
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+    ICON_REQUESTED,
+} from '@utils/icon-language';
 
 /* ── Constants ── */
 
@@ -2674,7 +2680,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                           @click=${() => this.onContextMenuAction('add-to-queue')}
                           @mouseenter=${() => this.ctxMenu.closePlaylistSubmenu()}
                       >
-                          <wa-icon slot="icon" name="plus"></wa-icon>
+                          <wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
                           Add to Queue
                       </wa-dropdown-item>
                       <wa-dropdown-item
@@ -2693,7 +2699,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                               void this.openPlaylistSubmenu(true);
                           }}
                       >
-                          <wa-icon slot="icon" name="plus"></wa-icon>
+                          <wa-icon slot="icon" name=${ICON_PLAYLIST}></wa-icon>
                           Add to Playlist
                           <span class="submenu-arrow">&#9654;</span>
                       </wa-dropdown-item>
@@ -2737,7 +2743,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                           Play
                       </wa-dropdown-item>
                       <wa-dropdown-item @click=${() => void this.onReleaseAction('add-to-queue')}>
-                          <wa-icon slot="icon" name="plus"></wa-icon>
+                          <wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
                           Add to Queue
                       </wa-dropdown-item>
                       <wa-dropdown-item @click=${() => void this.onReleaseAction('play-next')}>
@@ -2751,7 +2757,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                       <wa-dropdown-item @click=${() => void this.onReleaseRequestToggle()}>
                           <wa-icon
                               slot="icon"
-                              name=${requested ? 'xmark' : 'bookmark'}
+                              name=${requested ? ICON_REQUESTED : ICON_CAN_REQUEST}
                           ></wa-icon>
                           ${requested ? 'Cancel Request' : 'Request This'}
                       </wa-dropdown-item>
@@ -2789,9 +2795,15 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                     appearance=${request ? 'filled' : 'outlined'}
                     @click=${() => void this.toggleFollow(request?.id)}
                 >
+                    <!-- This was bookmark-check, which is not in
+                         names.txt and so has rendered the missing-icon
+                         fallback — a circled question mark — on every
+                         followed artist since it was written. A
+                         backtick around that name would end this
+                         template literal, which is why there is none. -->
                     <wa-icon
                         slot="start"
-                        name=${request ? 'bookmark-check' : 'bookmark'}
+                        name=${request ? ICON_REQUESTED : ICON_CAN_REQUEST}
                     ></wa-icon>
                     ${request ? 'Following' : 'Follow for new releases'}
                 </wa-button>

frontend/src/components/explore-view/explore-view.ts

@@ -36,6 +36,7 @@ import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { dict, dictByName } from '@utils/binding';
+import { ICON_QUEUE } from '@utils/icon-language';
 
 /** The region explore's own action failures (play/queue) are rendered in. */
 export const ExploreRegion = 'explore';
@@ -1342,7 +1343,7 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                                             Play
                                         </wa-dropdown-item>
                                         <wa-dropdown-item @click=${() => this.onContextMenuAction('add-to-queue')}>
-                                            <wa-icon slot="icon" name="plus"></wa-icon>
+                                            <wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
                                             Add to Queue
                                         </wa-dropdown-item>
                                         <wa-dropdown-item @click=${() => this.onContextMenuAction('play-next')}>

frontend/src/components/genres-view/genres-view.ts

@@ -35,6 +35,10 @@ import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js'
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@components/playlist-picker/playlist-picker.js';
 import { dictByName } from '@utils/binding';
+import {
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+} from '@utils/icon-language';
 
 /** Pixels to change card width per scroll tick. */
 const ZOOM_STEP = 16;
@@ -1211,7 +1215,7 @@ export class GenresView
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_QUEUE}
                                   ></wa-icon>
                                   Add to Queue
                               </wa-dropdown-item>
@@ -1257,7 +1261,7 @@ export class GenresView
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_PLAYLIST}
                                   ></wa-icon>
                                   Add to Playlist
                                   <span

frontend/src/components/library-status-indicator/library-status-indicator.ts

@@ -4,6 +4,11 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { toggleRequest } from '@utils/library-status';
 import { notificationStore } from '@store/notification-store';
 import { describeError } from '@utils/describe-error';
+import {
+    ICON_CAN_REQUEST,
+    ICON_IN_LIBRARY,
+    ICON_REQUESTED,
+} from '@utils/icon-language';
 
 /**
  * Library status for an entity (artist, album, or track).
@@ -248,18 +253,25 @@ export class LibraryStatusIndicator extends LitElement {
      * hourglass says "wait, this is under way", which overstates what a
      * request is: nothing may be downloading, nothing may ever be found,
      * and the user can leave one sitting on the list indefinitely. A
-     * bookmark says the honest thing — it is on your list — and reads as
-     * the opposite of the plus that put it there, which is what a
-     * toggle's two states have to do.
+     * bookmark says the honest thing — it is on your list.
+     *
+     * The *other* state is the outline of that same bookmark, not a
+     * plus. Two states of one toggle have to read as each other's
+     * opposite, and a plus and a bookmark do not — this badge showed a
+     * plus on the same page as a "Request this" button already using
+     * the outline/solid pair, forty pixels away. That is the fault
+     * `utils/library-status.ts` was written for, one layer down: it
+     * made the two agree on what wanting *means* and left them
+     * disagreeing on what it looks like.
      */
     private iconName(): string {
         switch (this.status) {
             case 'in-library':
-                return 'check';
+                return ICON_IN_LIBRARY;
             case 'queued':
-                return 'bookmark';
+                return ICON_REQUESTED;
             default:
-                return 'plus';
+                return ICON_CAN_REQUEST;
         }
     }
 

frontend/src/components/now-playing-view/now-playing-view.ts

@@ -14,6 +14,7 @@ import { creditStore } from '@store/credit-store';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { designTokens } from '../../styles/tokens.css';
 import { srOnly } from '../../styles/sr-only.css';
+import { ICON_QUEUE } from '@utils/icon-language';
 
 /**
  * What is playing, at the size a phone has room for (plan 016 B2,
@@ -339,7 +340,7 @@ export class NowPlayingView extends LitElement {
                     aria-label="Show the queue"
                     @click=${this.openQueue}
                 >
-                    <wa-icon name="list"></wa-icon>
+                    <wa-icon name=${ICON_QUEUE}></wa-icon>
                 </button>
             </header>
         `;

frontend/src/components/playlist-details/playlist-details.ts

@@ -70,6 +70,10 @@ import {
 } from '@utils/explore-link';
 import { designTokens } from '../../styles/tokens.css';
 import { list } from '@utils/binding';
+import {
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+} from '@utils/icon-language';
 
 /** One playlist row: the track and its position in the *playlist*,
  *  which is not its position in the filtered view. */
@@ -1358,7 +1362,7 @@ export class PlaylistDetails
                 </button>
                 <div class="playlist-avatar">
                     <wa-icon
-                        name="list"
+                        name=${ICON_PLAYLIST}
                     ></wa-icon>
                 </div>
                 <div class="playlist-info">
@@ -1665,7 +1669,7 @@ export class PlaylistDetails
                                   >
                                       <wa-icon
                                           slot="icon"
-                                          name="plus"
+                                          name=${ICON_QUEUE}
                                       ></wa-icon>
                                       Add to Queue
                                   </wa-dropdown-item>
@@ -1720,7 +1724,7 @@ export class PlaylistDetails
                                   >
                                       <wa-icon
                                           slot="icon"
-                                          name="plus"
+                                          name=${ICON_PLAYLIST}
                                       ></wa-icon>
                                       Add to Playlist
                                       <span

frontend/src/components/playlist-picker/playlist-picker.ts

@@ -18,6 +18,7 @@ import { notificationStore } from '@store/notification-store';
 import { describeError } from '@utils/describe-error';
 import type { DuplicateTracksDialog } from '@components/duplicate-tracks-dialog/duplicate-tracks-dialog.js';
 import { list } from '@utils/binding';
+import { ICON_NEW } from '@utils/icon-language';
 
 /**
  * A reusable playlist picker that displays existing playlists
@@ -307,7 +308,7 @@ export class PlaylistPicker extends LitElement {
                       `
                     : nothing}
                 <wa-dropdown-item @click=${this.handleShowCreate}>
-                    <wa-icon slot="icon" name="plus"></wa-icon>
+                    <wa-icon slot="icon" name=${ICON_NEW}></wa-icon>
                     New Playlist
                 </wa-dropdown-item>
             </div>

frontend/src/components/playlist-view/playlist-view.ts

@@ -37,6 +37,10 @@ import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import '@components/duplicate-tracks-dialog/duplicate-tracks-dialog.js';
 import type { DuplicateTracksDialog } from '@components/duplicate-tracks-dialog/duplicate-tracks-dialog.js';
+import {
+    ICON_NEW,
+    ICON_PLAYLIST,
+} from '@utils/icon-language';
 
 const SCROLL_DEBOUNCE_MS = 100;
 
@@ -1496,7 +1500,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                         @dragleave=${this.onNewButtonDragLeave}
                         @drop=${this.onNewButtonDrop}
                     >
-                        <wa-icon name="plus"></wa-icon>
+                        <wa-icon name=${ICON_NEW}></wa-icon>
                         New Playlist
                     </button>
                     <button
@@ -1641,10 +1645,10 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                 >
                     <div class="drop-zone-icon">
                         <wa-icon
-                            name="plus"
+                            name=${ICON_NEW}
                         ></wa-icon>
                     </div>
-                    <wa-icon name="list"></wa-icon>
+                    <wa-icon name=${ICON_PLAYLIST}></wa-icon>
                     <p>No playlists yet</p>
                     <p style="font-size: 12px;">
                         Create a playlist or drop
@@ -1666,7 +1670,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                 >
                     <div class="drop-zone-icon">
                         <wa-icon
-                            name="plus"
+                            name=${ICON_NEW}
                         ></wa-icon>
                     </div>
                     <p>
@@ -1701,7 +1705,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                 >
                     <div class="drop-zone-icon">
                         <wa-icon
-                            name="plus"
+                            name=${ICON_NEW}
                         ></wa-icon>
                     </div>
                 </li>

frontend/src/components/queue-panel/queue-panel.ts

@@ -60,6 +60,11 @@ import {
     trackLink,
     exploreLinkStyles,
 } from '@utils/explore-link';
+import {
+    ICON_NEW,
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+} from '@utils/icon-language';
 /** Above this many tracks, clearing the queue asks first. */
 const CLEAR_CONFIRM_THRESHOLD = 20;
 
@@ -1755,7 +1760,7 @@ export class QueuePanel
                             title="Add queue to playlist"
                         >
                             <wa-icon
-                                name="plus"
+                                name=${ICON_PLAYLIST}
                             ></wa-icon>
                         </button>
                     </div>
@@ -1794,11 +1799,11 @@ export class QueuePanel
                         ? html`<div class="empty-state">
                               <div class="drop-zone-icon">
                                   <wa-icon
-                                      name="plus"
+                                      name=${ICON_NEW}
                                   ></wa-icon>
                               </div>
                               <wa-icon
-                                  name="list"
+                                  name=${ICON_QUEUE}
                               ></wa-icon>
                               <p>Queue is empty</p>
                               <p style="font-size: 12px;">
@@ -1875,7 +1880,7 @@ export class QueuePanel
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_PLAYLIST}
                                   ></wa-icon>
                                   Add to Playlist
                                   <span

frontend/src/components/sidebar/app-sidebar.ts

@@ -4,6 +4,10 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { designTokens } from '../../styles/tokens.css';
 
 import type { DragActiveDetail } from '@utils/drag-controller';
+import {
+    ICON_PLAYLIST,
+    ICON_REQUESTED,
+} from '@utils/icon-language';
 
 type View = 'home' | 'playlists' | 'artists' | 'genres' | 'albums' | 'tracks' | 'explore' | 'downloads' | 'autotag' | 'jobs' | 'settings';
 
@@ -197,13 +201,13 @@ export class AppSidebar extends LitElement {
 
     private navItems: NavItem[] = [
         { id: 'home', label: 'Home', icon: 'house' },
-        { id: 'playlists', label: 'Playlists', icon: 'list' },
+        { id: 'playlists', label: 'Playlists', icon: ICON_PLAYLIST },
         { id: 'artists', label: 'Artists', icon: 'user-group' },
         { id: 'genres', label: 'Genres', icon: 'masks-theater' },
         { id: 'albums', label: 'Albums', icon: 'compact-disc' },
         { id: 'tracks', label: 'Tracks', icon: 'music' },
         { id: 'explore', label: 'Explore', icon: 'globe' },
-        { id: 'downloads', label: 'Downloads', icon: 'bookmark' },
+        { id: 'downloads', label: 'Downloads', icon: ICON_REQUESTED },
         { id: 'autotag', label: 'Autotag', icon: 'tag' },
         { id: 'jobs', label: 'Jobs', icon: 'list-check' },
         { id: 'settings', label: 'Settings', icon: 'gear' },

frontend/src/components/smart-playlist-details/smart-playlist-details.ts

@@ -61,6 +61,10 @@ import {
 import '@components/smart-playlist-editor/smart-playlist-editor.js';
 import { designTokens } from '../../styles/tokens.css';
 import { list } from '@utils/binding';
+import {
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+} from '@utils/icon-language';
 
 
 /**
@@ -1481,7 +1485,7 @@ export class SmartPlaylistDetails
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_QUEUE}
                                   ></wa-icon>
                                   Add to Queue
                               </wa-dropdown-item>
@@ -1521,7 +1525,7 @@ export class SmartPlaylistDetails
                               >
                                   <wa-icon
                                       slot="icon"
-                                      name="plus"
+                                      name=${ICON_PLAYLIST}
                                   ></wa-icon>
                                   Add to Playlist
                                   <span

frontend/src/components/track-list/track-list.ts

@@ -74,6 +74,10 @@ import { tracksByFilePath, tracksForPaths } from '@utils/track-index.js';
 import '@components/playlist-picker/playlist-picker.js';
 import type { TrackDetails } from '@components/track-details/track-details.js';
 import type { CoverArtUrls } from '@components/track-details/track-details.js';
+import {
+    ICON_PLAYLIST,
+    ICON_QUEUE,
+} from '@utils/icon-language';
 
 const COLUMN_STORAGE_KEY = 'track-list-column-widths';
 const SORT_FIELD_KEY = 'track-list-sort-field';
@@ -2342,7 +2346,7 @@ export class TrackList
                   @click=${() => this.onContextMenuAction('add-to-queue')}
                   @mouseenter=${() => this.ctxMenu.closePlaylistSubmenu()}
                 >
-                  <wa-icon slot="icon" name="plus"></wa-icon>
+                  <wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
                   Add to Queue
                 </wa-dropdown-item>
                 <wa-dropdown-item
@@ -2364,7 +2368,7 @@ export class TrackList
                         void this.ctxMenu.showPlaylistSubmenu(this.selection.getSelectedKeysOrdered());
                     }}
                 >
-                  <wa-icon slot="icon" name="plus"></wa-icon>
+                  <wa-icon slot="icon" name=${ICON_PLAYLIST}></wa-icon>
                   Add to Playlist
                   <span class="submenu-arrow">&#9654;</span>
                 </wa-dropdown-item>

frontend/src/icons/names.txt

@@ -24,6 +24,7 @@ solid/arrows-rotate
 solid/arrow-up-short-wide
 solid/backward-step
 solid/bars
+solid/bars-staggered
 regular/bookmark
 solid/bookmark
 solid/box-open

frontend/src/utils/icon-language.ts

@@ -0,0 +1,100 @@
+/**
+ * What each icon in this app means, once.
+ *
+ * The set was a mix: `plus` meant "add to the queue", "add to a
+ * playlist", "make a new playlist" and "you do not own this" — the
+ * first two *adjacent in the same context menu* — while `list` meant
+ * the queue, the Playlists destination, and (in `queue-panel` alone)
+ * adding to the queue. Two icons carrying seven meanings between them
+ * is not a vocabulary, and a user cannot learn one that says four
+ * things.
+ *
+ * The rule these are chosen by: **an icon names the noun it acts on,
+ * not the verb.** "Add to queue" and "add to playlist" are the same
+ * verb on different nouns, so the noun is what has to differ — which is
+ * also why adding to a playlist wears the Playlists destination's own
+ * icon rather than a generic plus. `plus` survives for exactly the one
+ * thing it is unambiguous about, making something that did not exist.
+ *
+ * Import these rather than writing a name inline. A literal string is
+ * how the last set drifted, and nothing catches it: a wrong-but-real
+ * icon renders perfectly.
+ */
+
+/** Start playing this now. */
+export const ICON_PLAY = 'play';
+
+/** Start playing this now, in a shuffled order. */
+export const ICON_SHUFFLE = 'shuffle';
+
+/**
+ * The queue, and putting something into it.
+ *
+ * One glyph for the noun and the action, so the button that opens the
+ * queue and the menu item that adds to it are visibly the same subject.
+ * The queue used to wear `list`, which is the Playlists destination.
+ */
+export const ICON_QUEUE = 'bars-staggered';
+
+/** Put this next in the queue rather than at the end. */
+export const ICON_PLAY_NEXT = 'forward-step';
+
+/**
+ * A playlist, and adding something to one.
+ *
+ * The same icon as the Playlists destination in the sidebar, which is
+ * the point: the menu item says where the thing is going.
+ */
+export const ICON_PLAYLIST = 'list';
+
+/**
+ * Make a new thing that did not exist — a playlist, a rule, a library.
+ *
+ * This is the only meaning `plus` keeps. It used to carry four.
+ */
+export const ICON_NEW = 'plus';
+
+/**
+ * The request ("want") toggle, as an outline/solid pair.
+ *
+ * Two states of one control have to read as each other's opposite,
+ * which a plus and a bookmark do not. The pair was already in the app
+ * and already correct — `explore-album-details`'s "Want this" button
+ * has used it since it was written, and `favorites-controller` uses the
+ * same shape for `regular/heart` → `heart` — while the badge forty
+ * pixels away showed a plus for the same state.
+ *
+ * That is `utils/library-status.ts`'s fault one layer down: it made the
+ * two surfaces agree on *what wanting means* and left them disagreeing
+ * on what it looks like.
+ */
+export const ICON_CAN_REQUEST = 'regular/bookmark';
+export const ICON_REQUESTED = 'solid/bookmark';
+
+/**
+ * You have this.
+ *
+ * Deliberately not drawn on the common case — see the tracklist, where
+ * absence is what gets marked. This is for the places that answer the
+ * question directly, like the badge on a catalog card.
+ */
+export const ICON_IN_LIBRARY = 'check';
+
+/**
+ * Something is being fetched right now.
+ *
+ * Distinct from `ICON_REQUESTED`: a request may sit on the list
+ * forever without anything happening, which is exactly why the badge's
+ * "queued" state stopped being an hourglass.
+ */
+export const ICON_DOWNLOADING = 'download';
+
+/**
+ * Take this away.
+ *
+ * One icon for removing from a playlist, from the queue and from the
+ * library, because the difference that matters is stated in the words
+ * beside it and in the confirmation — "Remove from Library" says in its
+ * impact line that the files are not deleted.
+ */
+export const ICON_REMOVE = 'trash';