--- title: Avalonia Just Got a Full Icon System — Here's How I Built It description: Avalonia finally has a proper icon system — and it didn't start that way. It started as one duplicated arrow buried inside a Button Spinner, and by the end of... canonical: https://daily.dev/posts/avalonia-just-got-a-full-icon-system-here-s-how-i-built-it-m2pjf4k57 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Avalonia Just Got a Full Icon System — Here's How I Built It | daily.dev og:description: Avalonia finally has a proper icon system — and it didn't start that way. It started as one duplicated arrow buried inside a Button Spinner, and by the end of... og:url: https://daily.dev/posts/avalonia-just-got-a-full-icon-system-here-s-how-i-built-it-m2pjf4k57 og:image: https://api.daily.dev/og/posts/m2Pjf4K57.png og:image:alt: Avalonia Just Got a Full Icon System — Here's How I Built It og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Avalonia Just Got a Full Icon System — Here's How I Built It **[AngelSix](https://daily.dev/sources/angelsix)** · 12 min read · 0 upvotes · 0 comments ## Summary Avalonia finally has a proper icon system — and it didn't start that way. It started as one duplicated arrow buried inside a Button Spinner, and by the end of this episode it's a fully source-generated icon library with its own clean namespace. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📌 WHAT YOU'LL LEARN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • How a token-based theme engine replaces hardcoded colors/sizes with semantic values (surface, primary, warning) instead of copy-pasted hex codes • New focus states on buttons — and how styles smartly blend hover/press colors with whatever accent is active • The Control Template rule that matters more than any other: only use TemplateBinding inside a template, or you silently block every style override • How one duplicated arrow (stream geometry) turned into a full icon system • The new `icons:` syntax and the ThemeIconGallery — swap an entire icon set by swapping one class • Why icons were cluttering the theme namespace, and how a source generator (Angel6 Theme Engine NuGet v1.2.6) solves it cleanly • A live Icon Gallery preview for browsing and customizing every glyph • What's next: full control coverage, a demo app, and a live in-app theme editor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⏱ TIMESTAMPS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ [0:00] – Theme Lab intro & progress recap [0:43] – Why we switched to a prototype-first approach [1:40] – Button focus states & smart accent blending [2:45] – The one Control Template rule you must never break [4:10] – Refining the Button: fonts, padding, focus styles [5:05] – From one duplicated arrow to a full icon system [6:00] – New icon syntax & the ThemeIconGallery [7:25] – Source generators: giving icons their own clean namespace [9:25] – Icon Gallery preview & customizing individual glyphs [10:45] – What's next: full coverage, localization, live theme editor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔗 LINKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▶ Ep 1 – Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc ▶ Ep 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI ▶ Ep 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g ▶ Ep 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0 ▶ Ep 5 – Checkbox Deep Dive: https://www.youtube.com/watch?v=uIimnwjITT0 ▶ Ep 6 – Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY ▶ Ep 7 – Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U ▶ Ep 8 – Design Token System: https://www.youtube.com/watch?v=QMVdxRZqaU8 ▶ Ep 9 – Surgical Legacy Code Removal: https://www.youtube.com/watch?v=5-p_fnOi0As ▶ Ep 10 – One Token System: https://www.youtube.com/watch?v=JEcD1XXIiA8 ▶ Ep 11 – Styles Not Working? Breaking the Rule: https://www.youtube.com/watch?v=OhJN8Ssp2hA 📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO 💾 Source Code: https://github.com/angelsix 🌐 AngelSix: https://www.angelsix.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #iconpack #sourcegenerators #softwaretutorial ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#c](https://daily.dev/tags/c), [#c#](https://daily.dev/tags/c#), [#avalonia](https://daily.dev/tags/avalonia) [View this post on daily.dev](https://daily.dev/posts/avalonia-just-got-a-full-icon-system-here-s-how-i-built-it-m2pjf4k57) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Avalonia Just Got a Full Icon System — Here's How I Built It","url":"https://daily.dev/posts/avalonia-just-got-a-full-icon-system-here-s-how-i-built-it-m2pjf4k57","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/avalonia-just-got-a-full-icon-system-here-s-how-i-built-it-m2pjf4k57"},"datePublished":"2026-10-04T13:04:32.447Z","dateModified":"2026-10-04T22:00:53.961Z","description":"Avalonia finally has a proper icon system — and it didn't start that way. It started as one \nduplicated arrow buried inside a Button Spinner, and by the end of...","image":"https://i.ytimg.com/vi/N5HPe5GYCPo/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/N5HPe5GYCPo/sddefault.jpg","isAccessibleForFree":true,"articleSection":"AngelSix","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"AngelSix","logo":"https://media.daily.dev/image/upload/s--h1ikmN_u--/f_auto,q_auto/v1791119063/logos/angelsix?_a=BAMAMicg0","url":"https://daily.dev/sources/angelsix"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/avalonia-just-got-a-full-icon-system-here-s-how-i-built-it-m2pjf4k57","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"c,c#,avalonia","timeRequired":"PT12M","video":{"@type":"VideoObject","name":"Avalonia Just Got a Full Icon System — Here's How I Built It","description":"Avalonia finally has a proper icon system — and it didn't start that way. It started as one \nduplicated arrow buried inside a Button Spinner, and by the end of...","thumbnailUrl":"https://i.ytimg.com/vi/N5HPe5GYCPo/sddefault.jpg","uploadDate":"2026-10-04T13:04:32.447Z","duration":"PT12M","url":"https://api.daily.dev/r/m2Pjf4K57","embedUrl":"https://www.youtube.com/embed/N5HPe5GYCPo"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"AngelSix","item":"https://daily.dev/sources/angelsix"},{"@type":"ListItem","position":3,"name":"Avalonia Just Got a Full Icon System — Here's How I Built It"}]} ```