diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css
index 354c24011..79e852697 100644
--- a/app/assets/stylesheets/colors.css
+++ b/app/assets/stylesheets/colors.css
@@ -54,22 +54,6 @@
   }
 }
 
-.colorize--white {
-  filter: invert(1);
-
-  @media (prefers-color-scheme: dark) {
-    filter: invert(0);
-  }
-}
-
-.colorize--black {
-  filter: invert(0);
-
-  @media (prefers-color-scheme: dark) {
-    filter: invert(1);
-  }
-}
-
 .color-picker {
   --panel-border-color: var(--bubble-color);
   --panel-border-radius: 2em;
diff --git a/app/views/accounts/users/_invite.html.erb b/app/views/accounts/users/_invite.html.erb
index 37128deb4..e064d74bb 100644
--- a/app/views/accounts/users/_invite.html.erb
+++ b/app/views/accounts/users/_invite.html.erb
@@ -11,7 +11,7 @@
   <div class="flex align-center gap">
     <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
       <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
-        <%= image_tag "qr-code.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+        <%= icon_tag "qr-code" %>
         <span class="for-screen-reader">Show join link QR code</span>
       <% end %>
 
@@ -28,12 +28,12 @@
     </div>
 
     <%= button_to_copy_to_clipboard(url) do %>
-      <%= image_tag "copy-paste.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+      <%= icon_tag "copy-paste" %>
       <span class="for-screen-reader">Copy join link</span>
     <% end %>
 
     <%= button_to account_join_code_path, method: :put, class: "btn btn--regenerate" do %>
-      <%= image_tag "refresh.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+      <%= icon_tag "refresh" %>
       <span class="for-screen-reader">Regenerate join link</span>
     <% end %>
   </div>
diff --git a/app/views/buckets/_access_toggle.erb b/app/views/buckets/_access_toggle.erb
index 1b2482ef4..b45067866 100644
--- a/app/views/buckets/_access_toggle.erb
+++ b/app/views/buckets/_access_toggle.erb
@@ -11,7 +11,7 @@
 
   <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
 
-  <%= image_tag "check.svg", size: 20, class: "toggler__visible-when-on colorize--black flex-item-no-shrink", aria: { hidden: "true" } %>
+  <%= icon_tag "check", class: "toggler__visible-when-on" %>
 
   <label class="switch toggler__visible-when-off flex-item-no-shrink">
     <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil %>
diff --git a/app/views/buckets/edit.html.erb b/app/views/buckets/edit.html.erb
index 97507d54c..f5610adbd 100644
--- a/app/views/buckets/edit.html.erb
+++ b/app/views/buckets/edit.html.erb
@@ -32,7 +32,7 @@
       <%= access_menu_tag @bucket do %>
         <li class="flex align-center gap margin-none">
           <figure class="avatar flex-item-no-shrink" style="--avatar-border-radius: 0; --avatar-size: 4ch;">
-            <%= image_tag "everyone.svg", aria: { hidden: "true" }, class: "colorize--black" %>
+            <%= icon_tag "everyone" %>
             <span class="for-screen-reader">Everyone</span>
           </figure>
 
diff --git a/app/views/comments/_body.html.erb b/app/views/comments/_body.html.erb
index 17865d4be..abc970439 100644
--- a/app/views/comments/_body.html.erb
+++ b/app/views/comments/_body.html.erb
@@ -10,9 +10,9 @@
           <%= local_datetime_tag comment.created_at, style: :shortdate, class: "txt-ink translucent" %>
         <% end %>
 
-        <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), 
+        <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment),
               class: "comment__edit btn btn--plain txt-xx-small fill-transparent translucent flex-item-justify-end" do %>
-          <%= image_tag "menu-dots-horizontal.svg", class: "colorize--black" %>
+          <%= icon_tag "menu-dots-horizontal" %>
           <span class="for-screen-reader">Edit this comment</span>
         <% end %>
       </div>
@@ -23,4 +23,4 @@
       <%= render "comments/reactions/reactions", comment: comment %>
     </div>
   <% end %>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
index 42488dc90..ee2d7b21b 100644
--- a/app/views/events/_event.html.erb
+++ b/app/views/events/_event.html.erb
@@ -5,7 +5,7 @@
       class: "event panel center center-block flex-inline align-start justify-start gap position-relative",
       style: "--bubble-color: #{ bubble.color }; background-color: color-mix(in srgb, var(--bubble-color) 10%, var(--color-bg));
   color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));",
-      data: { related_element_target: "related", 
+      data: { related_element_target: "related",
               related_element_group_value: bubble.id,
               action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
   <div class="avatar txt-x-small flex-item-no-shrink">
@@ -19,8 +19,8 @@
       </strong>
 
       <% if event_column(event) == 2 %>
-        <span class="event__icon flex-item-justify-end">
-          <%= image_tag "#{event_action_icon(event)}.svg", size: 24, aria: { hidden: true }, class: "colorize--white" %>
+        <span class="event__icon flex-item-justify-end txt-reversed">
+          <%= icon_tag event_action_icon(event) %>
         </span>
       <% end %>
     </div>
diff --git a/app/views/first_runs/show.html.erb b/app/views/first_runs/show.html.erb
index 16409b528..88f4adabe 100644
--- a/app/views/first_runs/show.html.erb
+++ b/app/views/first_runs/show.html.erb
@@ -8,7 +8,7 @@
       <%= translation_button :user_name %>
       <label class="flex align-center gap input input--actor txt-large">
         <%= form.text_field :name, class: "input", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
-        <%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "person", class: "txt-large" %>
       </label>
     </div>
 
@@ -16,7 +16,7 @@
       <%= translation_button :email_address %>
       <label class="flex align-center gap input input--actor txt-large">
         <%= form.email_field :email_address, class: "input", autocomplete: "username", placeholder: "Email address", required: true %>
-        <%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "email", class: "txt-large" %>
       </label>
     </div>
 
@@ -24,7 +24,7 @@
       <%= translation_button :password %>
       <label class="flex align-center gap input input--actor txt-large">
         <%= form.password_field :password, class: "input", autocomplete: "new-password", placeholder: "Password", required: true, maxlength: 72 %>
-        <%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "password", class: "txt-large" %>
       </label>
     </div>
     <button type="submit" id="log_in" class="btn btn--reversed center">
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 89e546267..3ab68c58a 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -8,7 +8,7 @@
       <%= translation_button :email_address %>
       <label class="flex align-center gap input input--actor">
         <%= form.email_field :email_address, required: true, class: "input full-width", autofocus: true, autocomplete: "username", placeholder: "Enter your email address" %>
-        <%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "email", class: "txt-large" %>
       </label>
     </div>
 
@@ -16,7 +16,7 @@
       <%= translation_button :password %>
       <label class="flex align-center gap input input--actor">
         <%= form.password_field :password, required: true, class: "input full-width", autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72 %>
-        <%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "password", class: "txt-large" %>
       </label>
     </div>
 
diff --git a/app/views/users/_transfer.html.erb b/app/views/users/_transfer.html.erb
index 68b35cbe4..fc0d34f06 100644
--- a/app/views/users/_transfer.html.erb
+++ b/app/views/users/_transfer.html.erb
@@ -13,7 +13,7 @@
   <div class="flex align-center gap">
     <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
       <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
-        <%= image_tag "qr-code.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+        <%= icon_tag "qr-code" %>
         <span class="for-screen-reader">Show auto-login QR code</span>
       <% end %>
 
@@ -30,7 +30,7 @@
     </div>
 
     <%= button_to_copy_to_clipboard(url) do %>
-      <%= image_tag "copy-paste.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
+      <%= icon_tag "copy-paste" %>
       <span class="for-screen-reader">Copy auto-login link</span>
     <% end %>
   </div>
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index af3cb11ba..b05979cb5 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -35,21 +35,21 @@
           <%= translation_button :user_name %>
           <label class="flex align-center gap input input--actor">
             <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true, action: "keydown.esc@document->form#cancel" } %>
-            <%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+            <%= icon_tag "person", class: "txt-large" %>
           </label>
         </div>
         <div class="flex align-center gap">
           <%= translation_button :email_address %>
           <label class="flex align-center gap input input--actor">
             <%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
-            <%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+            <%= icon_tag "email", class: "txt-large" %>
           </label>
         </div>
         <div class="flex align-center gap">
           <%= translation_button :password %>
           <label class="flex align-center gap input input--actor">
             <%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: false, maxlength: 72 %>
-            <%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+            <%= icon_tag "password", class: "txt-large" %>
           </label>
         </div>
         <button type="submit" id="log_in" class="btn btn--reversed center">
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index d3ff5851f..571c9fe08 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -16,21 +16,21 @@
       <%= translation_button :user_name %>
       <label class="flex align-center gap input input--actor">
         <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
-        <%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "person", class: "txt-large" %>
       </label>
     </div>
     <div class="flex align-center gap">
       <%= translation_button :email_address %>
       <label class="flex align-center gap input input--actor">
         <%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
-        <%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "email", class: "txt-large" %>
       </label>
     </div>
     <div class="flex align-center gap">
       <%= translation_button :password %>
       <label class="flex align-center gap input input--actor">
         <%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: true, maxlength: 72 %>
-        <%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
+        <%= icon_tag "password", class: "txt-large" %>
       </label>
     </div>
     <button type="submit" id="log_in" class="btn btn--reversed center">