diff --git a/.changeset/icon-mask-fallback.md b/.changeset/icon-mask-fallback.md
new file mode 100644
index 0000000..830adfb
--- /dev/null
+++ b/.changeset/icon-mask-fallback.md
@@ -0,0 +1,5 @@
+---
+"@sb1/indeks-css": patch
+---
+
+`ix-icon` viser ikke lenger en farget boks før web-componenten laster. Masken har nå en gjennomsiktig fallback (`--ii-icon-url` ikke satt), så ikonet er usynlig til `<ix-icon>` oppgraderes og setter ikon-URL-en.
diff --git a/indeks-css/css/icons/icon.css b/indeks-css/css/icons/icon.css
index e30636a..8a57999 100644
--- a/indeks-css/css/icons/icon.css
+++ b/indeks-css/css/icons/icon.css
@@ -9,8 +9,10 @@
     mask-size: cover;
     -webkit-mask-size: cover;
     mask-position: center;
-    mask-image: var(--ii-icon-url);
-    -webkit-mask-image: var(--ii-icon-url);
+    /* Fallback til en gjennomsiktig maske før web-componenten setter --ii-icon-url,
+       ellers vises hele background-color-boksen umaskert (FOUC) til WC-en laster. */
+    mask-image: var(--ii-icon-url, linear-gradient(#0000, #0000));
+    -webkit-mask-image: var(--ii-icon-url, linear-gradient(#0000, #0000));
     -webkit-mask-position: center;
     /* stylelint-enable plugin/no-unsupported-browser-features */
 }
diff --git a/indeks-docs/docs/komponenter/icon.mdx b/indeks-docs/docs/komponenter/icon.mdx
index 0d69d77..adccea9 100644
--- a/indeks-docs/docs/komponenter/icon.mdx
+++ b/indeks-docs/docs/komponenter/icon.mdx
@@ -163,6 +163,25 @@ Ikonet skal kommunisere gjennom form, ikke farge alene. Brukere med fargeblindhe
 </TabItem>
 </Tabs>
 
+## Unngå "blink" før web componenten laster
+
+Ikonet tegnes av CSS via `mask-image: var(--ii-icon-url)`. Det er web componenten som setter `--ii-icon-url` i sin `connectedCallback`. Frem til den kjører er variabelen ikke satt, og CSS faller tilbake til en gjennomsiktig maske — ikonet er da usynlig, ikke en farget boks.
+
+I React har dette ingen praktisk betydning: web componenten er allerede lastet når komponentene rendres. Men i ren HTML uten rammeverk — særlig sider som vises før `indeks-web`-scriptet er ferdig lastet fra CDN — kan ikonet blinke inn et lite øyeblikk etterpå.
+
+Du kan fjerne blinket helt ved å sette `--ii-icon-url` inline selv. Da tegnes ikonet umiddelbart, og web componenten overtar variabelen (og legger til aria) når den laster:
+
+```html live
+<ix-icon
+  name="hjem"
+  style="--ii-icon-url: url('https://cdn.sparebank1.no/icons/home.svg')"
+></ix-icon>
+```
+
+:::note Hacky, men trygt som fallback
+`--ii-icon-url` er en intern variabel (`--ii-`-prefiks). Den er ikke et offisielt API og kan i teorien endres. Bruk dette kun som en bevisst optimalisering for ikke-React-sider der blinket er et problem — for `name`-aliaser må du selv slå opp Material Design-filnavnet (f.eks. `hjem` → `home.svg`), mens `materialdesignname`-verdien er filnavnet direkte.
+:::
+
 ## Tilpasning med CSS
 
 Ikonets farge arves fra omgivende tekst via `color: inherit`. For å endre farge, sett `color` på et overordnet element.
diff --git a/indeks-docs/docusaurus.config.ts b/indeks-docs/docusaurus.config.ts
index f16dff6..3d56945 100644
--- a/indeks-docs/docusaurus.config.ts
+++ b/indeks-docs/docusaurus.config.ts
@@ -44,6 +44,15 @@ const config: Config = {
     },
 
     headTags: [
+        {
+            // Koble til CDN tidlig — ikon-SVG-er (/icons/*.svg) og fonter hentes derfra ved runtime.
+            tagName: 'link',
+            attributes: {
+                rel: 'preconnect',
+                href: 'https://cdn.sparebank1.no',
+                crossorigin: 'anonymous',
+            },
+        },
         {
             tagName: 'link',
             attributes: {
diff --git a/indeks-eksempel/index.html b/indeks-eksempel/index.html
index 17c3d1b..46c2068 100644
--- a/indeks-eksempel/index.html
+++ b/indeks-eksempel/index.html
@@ -6,6 +6,11 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Indeks Eksempelapp</title>
+  <!-- Koble til CDN tidlig — gjelder både web components-scriptet og ikon-SVG-ene (samme origin). -->
+  <link rel="preconnect" href="https://cdn.sparebank1.no" crossorigin />
+  <!-- Forhåndslast web components-modulen så ix-* oppgraderes så tidlig som mulig (kortere FOUC). -->
+  <link rel="modulepreload" href="https://cdn.sparebank1.no/indeks/web/0.9.0/index.js" />
+  <script type="module" src="https://cdn.sparebank1.no/indeks/web/0.9.0/index.js"></script>
 </head>
 
 <body>
diff --git a/indeks-storybook/.storybook/preview-head.html b/indeks-storybook/.storybook/preview-head.html
index f58b628..c0e8c0d 100644
--- a/indeks-storybook/.storybook/preview-head.html
+++ b/indeks-storybook/.storybook/preview-head.html
@@ -1,3 +1,6 @@
+<!-- Koble til CDN tidlig — ikon-SVG-er (/icons/*.svg) og fonter hentes derfra ved runtime. -->
+<link rel="preconnect" href="https://cdn.sparebank1.no" crossorigin />
+
 <style>
     .font-control {
         padding: 10px;