Design reference

YouTube / Public web reference / 2026.09

Assets, icons and media

Use the delivered geometry. A familiar-looking replacement still changes YouTube’s visual language.

All entries shown

Brand and vector inventory

Every locally published SVG belongs in the brand-asset ledger, including interface icons. Exact assets retain their source hashes. Reconstructed assets must carry that label and an independent visual comparison.

premium-logo-382x62.pngpremium-logo-382x62.png

logo · exact-first-party

none

Asset file
youtube-ringo2-logo.svgyoutube-ringo2-logo.svg

logo · exact-first-party

none

Asset file
brand-primary-darkbrand-primary-dark

logo · transformed-first-party

added fill="#fff" to the delivered youtube-paths group per observed html[dark] CSS

Asset file
icon-001icon-001

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-002icon-002

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-003icon-003

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-004icon-004

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-005icon-005

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-006icon-006

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-007icon-007

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-008icon-008

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-009icon-009

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-010icon-010

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-011icon-011

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-012icon-012

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-013icon-013

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-014icon-014

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-015icon-015

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-016icon-016

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-017icon-017

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-018icon-018

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-019icon-019

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-020icon-020

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-021icon-021

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-022icon-022

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added observed numeric width/height for standalone site publication; geometry unchanged; added required SVG namespace for standalone image rendering; geometry unchanged

icon-023icon-023

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-024icon-024

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-025icon-025

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added observed numeric width/height for standalone site publication; geometry unchanged; added required SVG namespace for standalone image rendering; geometry unchanged

icon-026icon-026

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-027icon-027

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-028icon-028

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-029icon-029

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-030icon-030

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-031icon-031

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-032icon-032

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-033icon-033

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-034icon-034

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-035icon-035

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-036icon-036

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-037icon-037

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-038icon-038

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-039icon-039

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-040icon-040

interface-icon · transformed-first-party

Embedded only the retained first-party equalizer declarations (white fill, 15×70 bar dimensions, 180° host rotation, and non-animated scaleY(.08)) so the delivered SVG fragment is self-contained; raw source and rectangle geometry remain retained separately.

icon-041icon-041

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-042icon-042

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-043icon-043

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added observed numeric width/height for standalone site publication; geometry unchanged; added required SVG namespace for standalone image rendering; geometry unchanged

icon-044icon-044

interface-icon · transformed-first-party

extracted inline SVG; added required xmlns:xlink namespace for standalone validity; geometry unchanged; added observed numeric width/height for standalone site publication; geometry unchanged; added required SVG namespace for standalone image rendering; geometry unchanged

icon-045icon-045

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added observed numeric width/height for standalone site publication; geometry unchanged; added required SVG namespace for standalone image rendering; geometry unchanged

icon-046icon-046

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-047icon-047

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-048icon-048

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-049icon-049

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-050icon-050

interface-icon · transformed-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes; added required SVG namespace for standalone image rendering; geometry unchanged

icon-053icon-053

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-054icon-054

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-055icon-055

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-056icon-056

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-057icon-057

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-058icon-058

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-059icon-059

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-060icon-060

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-061icon-061

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-062icon-062

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-063icon-063

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-064icon-064

interface-icon · exact-first-party

extracted exact inline SVG outerHTML; duplicate instance ids retained; no geometry changes

icon-065icon-065

interface-icon · exact-first-party

extracted exact inline SVG outerHTML from the retained notification-preference control; no geometry, paint, or namespace changes

icon-066icon-066

interface-icon · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-067icon-067

interface-icon · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-068icon-068

third-party-share-mark · exact-first-party

byte-exact extraction from retained public Share overlay HTML; standalone SVG bytes unchanged

icon-069icon-069

third-party-share-mark · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-070icon-070

third-party-share-mark · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-071icon-071

third-party-share-mark · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-072icon-072

third-party-share-mark · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-073icon-073

third-party-share-mark · exact-first-party

byte-exact extraction from retained public Share overlay HTML; standalone SVG bytes unchanged

icon-074icon-074

third-party-share-mark · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-075icon-075

third-party-share-mark · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-076icon-076

interface-icon · exact-first-party

extracted exact inline SVG outerHTML from the retained public Share overlay; no geometry, paint, id, or namespace changes

icon-077icon-077

icon · exact-first-party

extracted exact inline SVG outerHTML from retained public Appearance settings evidence; no geometry, paint, id, or namespace changes

icon-078icon-078

icon · exact-first-party

extracted exact inline SVG outerHTML from retained public Appearance settings evidence; no geometry, paint, id, or namespace changes

history-clearhistory-clear

interface-icon · exact-first-party

Exact byte extraction from retained public history HTML. No geometry or paint changes.

history-pausehistory-pause

interface-icon · exact-first-party

Exact byte extraction from retained public history HTML. No geometry or paint changes.

history-emptyhistory-empty

interface-icon · exact-first-party

Exact byte extraction from retained public history HTML. No geometry or paint changes.

premium-individualpremium-individual

interface-icon · exact-first-party

Exact SVG fragment extracted from retained source HTML; no geometry or paint changes.

premium-familypremium-family

interface-icon · exact-first-party

Exact SVG fragment extracted from retained source HTML; no geometry or paint changes.

premium-studentpremium-student

interface-icon · exact-first-party

Exact SVG fragment extracted from retained source HTML; no geometry or paint changes.

premium-lite-ad-free-light.pngpremium-lite-ad-free-light.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-lite-ad-free-dark.pngpremium-lite-ad-free-dark.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-lite-movies-light.pngpremium-lite-movies-light.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-lite-movies-dark.pngpremium-lite-movies-dark.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-lite-background-play-light.pngpremium-lite-background-play-light.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-lite-background-play-dark.pngpremium-lite-background-play-dark.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-lite-downloads-light.pngpremium-lite-downloads-light.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-lite-downloads-dark.pngpremium-lite-downloads-dark.png

interface-icon · exact-first-party

Unmodified first-party PNG response bytes.

premium-music-logo-220x32.pngpremium-music-logo-220x32.png

logo · exact-first-party

none

Asset file

Semantic icon slots

Name / meaningContext and labelSource
icon-001GuideRetrieve icon-001
icon-002decorative inline glyphRetrieve icon-002
icon-003SearchRetrieve icon-003
icon-004decorative inline glyphRetrieve icon-004
icon-005SettingsRetrieve icon-005
icon-006YouRetrieve icon-006
icon-007decorative inline glyphRetrieve icon-007
icon-008ShortsRetrieve icon-008
icon-009SubscriptionsRetrieve icon-009
icon-010HistoryRetrieve icon-010
icon-011ShoppingRetrieve icon-011
icon-012MusicRetrieve icon-012
icon-013Movies & TVRetrieve icon-013
icon-014Show moreRetrieve icon-014
icon-015YouTube PremiumRetrieve icon-015
icon-016YouTube TVRetrieve icon-016
icon-017YouTube MusicRetrieve icon-017
icon-018YouTube KidsRetrieve icon-018
icon-019Report historyRetrieve icon-019
icon-020decorative inline glyphRetrieve icon-020
icon-021decorative inline glyphRetrieve icon-021
icon-022MoreRetrieve icon-022
icon-023Pause (k)Retrieve icon-023
icon-024Unmute (m)Retrieve icon-024
icon-025ExpandRetrieve icon-025
icon-026SettingsRetrieve icon-026
icon-027decorative inline glyphRetrieve icon-027
icon-028decorative inline glyphRetrieve icon-028
icon-029decorative inline glyphRetrieve icon-029
icon-030decorative inline glyphRetrieve icon-030
icon-031decorative inline glyphRetrieve icon-031
icon-032decorative inline glyphRetrieve icon-032
icon-033decorative inline glyphRetrieve icon-033
icon-034decorative inline glyphRetrieve icon-034
icon-035decorative inline glyphRetrieve icon-035
icon-036Home Videos Shorts Live Podcasts Playlists PostsRetrieve icon-036
icon-037HomeRetrieve icon-037
icon-038CollapseRetrieve icon-038
icon-039decorative inline glyphRetrieve icon-039
icon-040Now playingRetrieve icon-040
icon-041decorative inline glyphRetrieve icon-041
icon-042decorative inline glyphRetrieve icon-042
icon-043PlayRetrieve icon-043
icon-044InfoRetrieve icon-044
icon-0450:00 / 3:33Retrieve icon-045
icon-046Play from this positionRetrieve icon-046
icon-047Mute (m)Retrieve icon-047
icon-048Subtitles/closed captions unavailableRetrieve icon-048
icon-049Theater mode (t)Retrieve icon-049
icon-050Full screen (f)Retrieve icon-050
icon-053bookmarkRetrieve icon-053
icon-054more actionsRetrieve icon-054
icon-055description menuRetrieve icon-055
icon-056pinRetrieve icon-056
icon-057checkRetrieve icon-057
icon-058likeRetrieve icon-058
icon-059dislikeRetrieve icon-059
icon-060heart outlineRetrieve icon-060
icon-061heart filledRetrieve icon-061
icon-062playRetrieve icon-062
icon-063infoRetrieve icon-063
icon-064external linkRetrieve icon-064
icon-065notification preferenceRetrieve icon-065
icon-066share dialog cancelRetrieve icon-066
icon-067share target: EmbedRetrieve icon-067
icon-068share target: MessagesRetrieve icon-068
icon-069share target: WhatsAppRetrieve icon-069
icon-070share target: FacebookRetrieve icon-070
icon-071share target: XRetrieve icon-071
icon-072share target: EmailRetrieve icon-072
icon-073share target: RedditRetrieve icon-073
icon-074share target: PinterestRetrieve icon-074
icon-075share target: LinkedInRetrieve icon-075
icon-076share-target carousel nextRetrieve icon-076
icon-077appearance dialog backRetrieve icon-077
icon-078appearance dialog selected themeRetrieve icon-078
history-clearClear historyRetrieve history-clear
history-pausePause historyRetrieve history-pause
history-emptySigned-out history empty stateRetrieve history-empty
premium-individualIndividual and Lite membershipRetrieve premium-individual
premium-familyFamily membershipRetrieve premium-family
premium-studentStudent membershipRetrieve premium-student
premium-lite-ad-free-light.pngAd-free videos and podcastsRetrieve premium-lite-ad-free-light.png
premium-lite-ad-free-dark.pngAd-free videos and podcastsRetrieve premium-lite-ad-free-dark.png
premium-lite-movies-light.pngAd-free movies and showsRetrieve premium-lite-movies-light.png
premium-lite-movies-dark.pngAd-free movies and showsRetrieve premium-lite-movies-dark.png
premium-lite-background-play-light.pngBackground playRetrieve premium-lite-background-play-light.png
premium-lite-background-play-dark.pngBackground playRetrieve premium-lite-background-play-dark.png
premium-lite-downloads-light.pngDownloadsRetrieve premium-lite-downloads-light.png
premium-lite-downloads-dark.pngDownloadsRetrieve premium-lite-downloads-dark.png

Runtime animation boundary

The static inventory contains 84 static SVG files. Two captured Subscribe animation layers are retained as runtime evidence outside the downloadable glyph set. Their captured frame contains no visible pixels, and the associated animation resource remains unresolved. Use the recovered static bell for the evidenced notification control. Do not substitute an unrelated Like animation.

Media composition

MediaRuleAccessible equivalent
Video thumbnail16:9. Cover its frame, preserve composition and the duration badge at the trailing bottom corner. At reduced data, keep metadata usable before the image arrives.Use an empty alt when the adjacent video title names the same link. A standalone thumbnail needs the video title.
Shorts thumbnailPortrait container. Keep title and counts outside the image when the captured collection does so.Do not duplicate the title in separate tab stops.
Channel avatarCircular crop, square source. Never distort faces or logos.Decorative when a neighboring channel link supplies the name.
Channel bannerWide identity artwork with a responsive crop. Do not use the banner as the only text heading.Describe meaningful imagery or use empty alt for decoration.
Player16:9 or video-specific ratio; black stage for unavailable media. Keep error text readable at every width.Captions, transcript and audio description availability must be stated per video. The local fixture is not a playable copy of YouTube media.

Rights and replacement

Captured YouTube marks, interface glyphs and thumbnails are retained for design research. This package does not grant redistribution or endorsement rights. For a shipped product, retrieve approved brand assets under their current terms and replace research thumbnails with licensed content. Original reference fixtures use invented metadata and never imply creator endorsement.

Vector inspection

Open the per-asset render and comparison contact sheet.

Reconstructed reference contract. Source files stay outside the publication root. Only the assets needed to inspect and exercise the reference are published.