diff --git a/src/app.rs b/src/app.rs
index bc8af67..70e5e13 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -699,8 +699,16 @@ fn AlternativeCard(
                             let icon = feature.icon.clone();
                             view! {
                                 <div class="feature" style:--feature-accent=color>
-                                    {icon.filter(|i| is_safe_icon_name(i)).map(|icon| view! {
-                                        <img class="feature-icon" src=format!("https://api.iconify.design/{icon}.svg") alt="" />
+                                    {icon.filter(|i| is_safe_icon_name(i)).map(|icon| {
+                                        // Masked span, not <img>: an image can't take
+                                        // currentColor, a mask painted by background-color can.
+                                        let u = format!("https://api.iconify.design/{icon}.svg");
+                                        view! {
+                                            <span
+                                                class="feature-icon"
+                                                style=format!("mask-image:url({u});-webkit-mask-image:url({u})")
+                                            ></span>
+                                        }
                                     })}
                                     <Show when={
                                         let name = feature.name.clone();
diff --git a/style/main.css b/style/main.css
index 6f794aa..5ba931c 100644
--- a/style/main.css
+++ b/style/main.css
@@ -365,6 +365,13 @@ main.not-found {
   width: 1.3rem;
   height: 1.3rem;
   margin: 0.1rem 0.6rem 0.4rem 0;
+  background-color: var(--feature-accent, currentColor);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-position: center;
 }
 
 .feature h3 {