From f662c9aa0f6318cb76159fcf87d500c0462d0986 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 2 Apr 2025 13:19:51 -0500
Subject: [PATCH 1/6] Add mask icon helper

---
 app/assets/stylesheets/icons.css | 72 ++++++++++++++++++++++++++++++++
 app/helpers/icons_helper.rb      |  8 ++++
 2 files changed, 80 insertions(+)
 create mode 100644 app/assets/stylesheets/icons.css
 create mode 100644 app/helpers/icons_helper.rb

diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
new file mode 100644
index 000000000..f6040a424
--- /dev/null
+++ b/app/assets/stylesheets/icons.css
@@ -0,0 +1,72 @@
+.icon {
+  -webkit-touch-callout: none;
+  background-color: currentColor;
+  block-size: var(--icon-size, 1em);
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: var(--icon-size, 1em);
+  mask-image: var(--svg);
+  mask-repeat: no-repeat;
+  mask-size: cover;
+}
+
+.icon--activity { --svg: url("activity.svg "); }
+.icon--add { --svg: url("add.svg "); }
+.icon--alert { --svg: url("alert.svg "); }
+.icon--arrow-left { --svg: url("arrow-left.svg "); }
+.icon--arrow-right { --svg: url("arrow-right.svg "); }
+.icon--art { --svg: url("art.svg "); }
+.icon--assigned { --svg: url("assigned.svg "); }
+.icon--bell-off { --svg: url("bell-off.svg "); }
+.icon--bell { --svg: url("bell.svg "); }
+.icon--blob { --svg: url("blob.svg "); }
+.icon--bolt { --svg: url("bolt.svg "); }
+.icon--bookmark-outline { --svg: url("bookmark-outline.svg "); }
+.icon--bookmark { --svg: url("bookmark.svg "); }
+.icon--bubble-add { --svg: url("bubble-add.svg "); }
+.icon--bubbles { --svg: url("bubbles.svg "); }
+.icon--calendar-add { --svg: url("calendar-add.svg "); }
+.icon--calendar { --svg: url("calendar.svg "); }
+.icon--camera { --svg: url("camera.svg "); }
+.icon--chart { --svg: url("chart.svg "); }
+.icon--check { --svg: url("check.svg "); }
+.icon--close { --svg: url("close.svg "); }
+.icon--comment { --svg: url("comment.svg "); }
+.icon--copy-paste { --svg: url("copy-paste.svg "); }
+.icon--crown { --svg: url("crown.svg "); }
+.icon--drag { --svg: url("drag.svg "); }
+.icon--email { --svg: url("email.svg "); }
+.icon--everyone { --svg: url("everyone.svg "); }
+.icon--filter { --svg: url("filter.svg "); }
+.icon--globe { --svg: url("globe.svg "); }
+.icon--grid { --svg: url("grid.svg "); }
+.icon--history { --svg: url("history.svg "); }
+.icon--home { --svg: url("home.svg "); }
+.icon--hourglass { --svg: url("hourglass.svg "); }
+.icon--inbox { --svg: url("inbox.svg "); }
+.icon--logout { --svg: url("logout.svg "); }
+.icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); }
+.icon--minus { --svg: url("minus.svg "); }
+.icon--password { --svg: url("password.svg "); }
+.icon--pencil { --svg: url("pencil.svg "); }
+.icon--person { --svg: url("person.svg "); }
+.icon--picture-add { --svg: url("picture-add.svg "); }
+.icon--picture-double { --svg: url("picture-double.svg "); }
+.icon--picture-remove { --svg: url("picture-remove.svg "); }
+.icon--pinned { --svg: url("pinned.svg "); }
+.icon--pop { --svg: url("pop.svg "); }
+.icon--qr-code { --svg: url("qr-code.svg "); }
+.icon--reaction { --svg: url("reaction.svg "); }
+.icon--refresh { --svg: url("refresh.svg "); }
+.icon--remove-med { --svg: url("remove-med.svg "); }
+.icon--remove { --svg: url("remove.svg "); }
+.icon--rename { --svg: url("rename.svg "); }
+.icon--settings { --svg: url("settings.svg "); }
+.icon--share { --svg: url("share.svg "); }
+.icon--sort-ascending { --svg: url("sort-ascending.svg "); }
+.icon--sort-descending { --svg: url("sort-descending.svg "); }
+.icon--tag { --svg: url("tag.svg "); }
+.icon--temperature { --svg: url("temperature.svg "); }
+.icon--thumb-up { --svg: url("thumb-up.svg "); }
+.icon--trash { --svg: url("trash.svg "); }
+.icon--unpinned { --svg: url("unpinned.svg"); }
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
new file mode 100644
index 000000000..f441aa50d
--- /dev/null
+++ b/app/helpers/icons_helper.rb
@@ -0,0 +1,8 @@
+module IconsHelper
+  def icon(name, **options)
+    classes = class_names "icon icon--#{name}", options.delete(:class)
+    options["aria-hidden"] = true
+
+    content_tag :span, "", class: classes, **options
+  end
+end

From b8a1acefd8c3e562acbff2233c194e8143b4be5a Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 2 Apr 2025 14:22:42 -0500
Subject: [PATCH 2/6] Use mask icons everywhere

---
 app/assets/stylesheets/buttons.css     | 19 +++++++------------
 app/assets/stylesheets/icons.css       |  2 ++
 app/helpers/application_helper.rb      |  7 +++++--
 app/helpers/icons_helper.rb            |  8 --------
 app/views/comments/edit.html.erb       |  2 +-
 app/views/events/_filter.html.erb      |  8 ++++----
 app/views/filters/_assignees.html.erb  | 14 +++++++-------
 app/views/filters/_buckets.html.erb    |  8 ++++----
 app/views/filters/_creators.html.erb   | 10 +++++-----
 app/views/filters/_dialog.html.erb     |  4 ++--
 app/views/filters/_indexed_by.html.erb | 12 ++++++------
 app/views/filters/_stages.html.erb     |  6 +++---
 app/views/filters/_tags.html.erb       | 12 ++++++------
 13 files changed, 52 insertions(+), 60 deletions(-)
 delete mode 100644 app/helpers/icons_helper.rb

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index ee383e95b..572775e25 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -27,18 +27,12 @@
     opacity var( --transition),
     scale var( --transition);
 
-  img {
-    -webkit-touch-callout: none;
-
-    pointer-events: none;
-    user-select: none;
-  }
-
   /* Default icon styles */
-  &:where(:has(img, svg)) {
+  &:where(:has(.icon, img, svg)) {
     text-align: start;
 
-    img, svg {
+    .icon, img, svg {
+      --icon-size: var(--btn-icon-size, 1.3em);
       block-size: var(--btn-icon-size, 1.3em);
       inline-size: var(--btn-icon-size, 1.3em);
       max-inline-size: unset;
@@ -70,7 +64,8 @@
       grid-area: 1/1;
     }
 
-    img {
+    .icon, img {
+      --icon-size: 100%;
       block-size: 100%;
       inline-size: 100%;
       max-inline-size: unset;
@@ -85,7 +80,7 @@
 
   /* Circle buttons */
   &.btn--circle,
-  &:where(:has(.for-screen-reader):has(img, svg)) {
+  &:where(:has(.for-screen-reader):has(.icon, img, svg)) {
     --btn-border-radius: 50%;
     --btn-padding: 0;
 
@@ -108,7 +103,7 @@
     :is(input[type=radio]),
     :is(input[type=checkbox]) {
       --hover-size: 0;
-  
+
       appearance: none;
       border-radius: var(--btn-border-radius);
       cursor: pointer;
diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
index f6040a424..6fab09ef1 100644
--- a/app/assets/stylesheets/icons.css
+++ b/app/assets/stylesheets/icons.css
@@ -8,6 +8,8 @@
   mask-image: var(--svg);
   mask-repeat: no-repeat;
   mask-size: cover;
+  pointer-events: none;
+  user-select: none;
 }
 
 .icon--activity { --svg: url("activity.svg "); }
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 4ceb92d12..a4d9e9ec5 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -3,7 +3,10 @@ module ApplicationHelper
     tag.title @page_title || "Fizzy"
   end
 
-  def icon_tag(name, aria: { hidden: true }, size: 24, **options)
-    image_tag "#{name}.svg", aria: aria, size: size, **options
+  def icon_tag(name, **options)
+    classes = class_names "icon icon--#{name}", options.delete(:class)
+    options["aria-hidden"] = true
+
+    content_tag :span, "", class: classes, **options
   end
 end
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
deleted file mode 100644
index f441aa50d..000000000
--- a/app/helpers/icons_helper.rb
+++ /dev/null
@@ -1,8 +0,0 @@
-module IconsHelper
-  def icon(name, **options)
-    classes = class_names "icon icon--#{name}", options.delete(:class)
-    options["aria-hidden"] = true
-
-    content_tag :span, "", class: classes, **options
-  end
-end
diff --git a/app/views/comments/edit.html.erb b/app/views/comments/edit.html.erb
index a47b29369..e7d120acc 100644
--- a/app/views/comments/edit.html.erb
+++ b/app/views/comments/edit.html.erb
@@ -14,7 +14,7 @@
 
           <%= tag.button type: :submit, class: "btn btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form),
               data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %>
-            <%= icon_tag "trash", size: 16 %>
+            <%= icon_tag "trash" %>
             <span class="for-screen-reader">Delete</span>
           <% end %>
         </div>
diff --git a/app/views/events/_filter.html.erb b/app/views/events/_filter.html.erb
index bca5bbeb7..b791ea1c7 100644
--- a/app/views/events/_filter.html.erb
+++ b/app/views/events/_filter.html.erb
@@ -7,22 +7,22 @@
 		</span>
 	</button>
 
-	<dialog class="events__popup popup panel flex-column full-width align-start gap-half fill-white shadow" 
+	<dialog class="events__popup popup panel flex-column full-width align-start gap-half fill-white shadow"
 				style="z-index: 5; inset: 0 0 auto auto;" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
 		<strong class="popup__title margin-block-start-half pad-inline-half txt-nowrap">Filter by Collection…</strong>
-		<%= form_with url: events_path, method: :get, class: "flex flex-column full-width popup__list", 
+		<%= form_with url: events_path, method: :get, class: "flex flex-column full-width popup__list",
 					data: { controller: "form" } do |form| %>
 			<%= link_to "Show everything", events_path(clear_filter: true), class: "btn popup__item txt-nowrap" %>
 			<% @buckets.each do |bucket| %>
 				<div class="btn popup__item">
-					<%= form.check_box "bucket_ids[]", { 
+					<%= form.check_box "bucket_ids[]", {
 						checked: (params[:bucket_ids] || cookies[:bucket_filter]&.split(","))&.include?(bucket.id.to_s),
 						data: { action: "change->form#submit" },
 						include_hidden: false,
 					}, bucket.id %>
 
 					<%= form.label "bucket_ids[]", bucket.name, for: dom_id(bucket, :filter), class: "overflow-ellipsis" %>
-					<%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+					<%= icon_tag "check", class: "checked flex-item-justify-end" %>
 				</div>
 			<% end %>
 		<% end %>
diff --git a/app/views/filters/_assignees.html.erb b/app/views/filters/_assignees.html.erb
index 500d5c720..2fe0c9564 100644
--- a/app/views/filters/_assignees.html.erb
+++ b/app/views/filters/_assignees.html.erb
@@ -14,37 +14,37 @@
 
     <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half overflow-ellipsis">Assigned to…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
         <% end %>
-        
+
         <%= link_to bubbles_path(filter.as_params.except(:assignee_ids, :assignment_status)), class: "btn popup__item" do %>
           <span class="overflow-ellipsis">Clear all</span>
         <% end %>
 
         <div class="btn popup__item">
-          <%= form.check_box "assignment_status", { 
+          <%= form.check_box "assignment_status", {
             checked: filter.assignment_status.unassigned?,
             data: { action: "change->form#submit" },
             include_hidden: false,
           }, "unassigned" %>
 
           <%= form.label :assignment_status, "No one", class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
-        
+
         <% Current.account.users.active.order(:name).each do |user| %>
           <div class="btn popup__item">
-            <%= form.check_box "assignee_ids[]", { 
+            <%= form.check_box "assignee_ids[]", {
               checked: filter.assignees.include?(user),
               data: { action: "change->form#submit" },
               include_hidden: false,
             }, user.id %>
 
             <%= form.label "assignee_ids[]", user.name, for: dom_id(user, :filter), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>
diff --git a/app/views/filters/_buckets.html.erb b/app/views/filters/_buckets.html.erb
index 20449c917..2d03acf93 100644
--- a/app/views/filters/_buckets.html.erb
+++ b/app/views/filters/_buckets.html.erb
@@ -11,22 +11,22 @@
 
   <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
     <strong class="popup__title margin-block-start-half pad-inline-half">In Collection</strong>
-    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
           data: { controller: "form" } do |form| %>
       <% filter.as_params.except(:bucket_ids).each do |key, value| %>
         <%= filter_hidden_field_tag key, value %>
       <% end %>
-      
+
       <% Current.user.buckets.order(:name).each do |bucket| %>
         <div class="btn popup__item">
-          <%= form.check_box "bucket_ids[]", { 
+          <%= form.check_box "bucket_ids[]", {
             checked: filter.buckets.include?(bucket),
             data: { action: "change->form#submit" },
             include_hidden: false,
           }, bucket.id %>
 
           <%= form.label "bucket_ids[]", bucket.name, for: dom_id(bucket, :filter), class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
       <% end %>
     <% end %>
diff --git a/app/views/filters/_creators.html.erb b/app/views/filters/_creators.html.erb
index 557778c09..cacfc40c5 100644
--- a/app/views/filters/_creators.html.erb
+++ b/app/views/filters/_creators.html.erb
@@ -1,5 +1,5 @@
 <% if filter.creators.any? %>
-  <div class="quick-filter position-relative" data-controller="dialog" 
+  <div class="quick-filter position-relative" data-controller="dialog"
         data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button class="btn input input--select flex-inline txt-small" data-action="click->dialog#open:stop">
       <span class="overflow-ellipsis">
@@ -11,11 +11,11 @@
       </span>
     </button>
 
-    <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" 
+    <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"
         aria-label="Added by…" aria-description="Added by…"
         data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half">Added by…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:creator_ids).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
@@ -34,7 +34,7 @@
           }, Current.user.id %>
 
           <%= form.label :creator_ids, "Me", for: form.field_id(:creator_ids, Current.user.id), class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
 
         <% Current.account.users.active.without(Current.user).order(:name).each do |user| %>
@@ -47,7 +47,7 @@
             }, user.id %>
 
             <%= form.label :creator_ids, user.name, for: form.field_id(:creator_ids, user.id), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>
diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb
index ecf1c1b9a..79db59813 100644
--- a/app/views/filters/_dialog.html.erb
+++ b/app/views/filters/_dialog.html.erb
@@ -4,7 +4,7 @@
       <span class="btn btn--placeholder txt-small" aria-hidden="true"></span>
 
       <h2 class="txt-large flex align-center gap-half margin-none">
-        <%= icon_tag "filter", size: 30 %>
+        <%= icon_tag "filter" %>
         <span>Filter</span>
       </h2>
 
@@ -116,7 +116,7 @@
             <label class="btn filter__button">
               <%= check_box_tag "assignment_status", "unassigned", filter.assignment_status.unassigned?,
                     class: "visually-hidden", data: {
-                      action: "filter-form#clearCategory", 
+                      action: "filter-form#clearCategory",
                       filter_form_name_param: "assignee_ids[],assigner_ids[]" } %>
               <span>No one</span>
               <%= icon_tag "close" %>
diff --git a/app/views/filters/_indexed_by.html.erb b/app/views/filters/_indexed_by.html.erb
index 79271b248..ff15bcb7f 100644
--- a/app/views/filters/_indexed_by.html.erb
+++ b/app/views/filters/_indexed_by.html.erb
@@ -9,20 +9,20 @@
       aria-label="Sort by…" aria-description="Sort by…"
       data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
     <strong class="popup__title margin-block-start-half pad-inline-half">Sort by…</strong>
-    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
           data: { controller: "form" } do |form| %>
       <% filter.as_params.except(:indexed_by).each do |key, value| %>
         <%= filter_hidden_field_tag key, value %>
       <% end %>
-      
+
       <div class="btn popup__item">
-        <%= form.radio_button :indexed_by, filter.default_indexed_by, 
+        <%= form.radio_button :indexed_by, filter.default_indexed_by,
             checked: filter.default_indexed_by?,
             class: "default-value",
             data: { action: "change->form#submit" } %>
 
         <%= form.label :indexed_by, "Most active", value: filter.default_indexed_by, class: "overflow-ellipsis" %>
-        <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+        <%= icon_tag "check", class: "checked flex-item-justify-end" %>
       </div>
 
       <% Filter::INDEXES.each do |index| %>
@@ -32,9 +32,9 @@
               data: { action: "change->form#submit" } %>
 
           <%= form.label :indexed_by, index.humanize, value: index, class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
       <% end %>
     <% end %>
   </dialog>
-</div> 
+</div>
diff --git a/app/views/filters/_stages.html.erb b/app/views/filters/_stages.html.erb
index 3d4a6203f..1b736da94 100644
--- a/app/views/filters/_stages.html.erb
+++ b/app/views/filters/_stages.html.erb
@@ -14,12 +14,12 @@
         aria-label="In stage…" aria-description="In stage…"
         data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half">In stage…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:stage_ids).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
         <% end %>
-        
+
         <% workflow = Current.account.workflows.first %>
         <% workflow.stages.each do |stage| %>
           <div class="btn popup__item">
@@ -31,7 +31,7 @@
               }, stage.id %>
 
             <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>
diff --git a/app/views/filters/_tags.html.erb b/app/views/filters/_tags.html.erb
index 178f62098..4c6e28bc5 100644
--- a/app/views/filters/_tags.html.erb
+++ b/app/views/filters/_tags.html.erb
@@ -12,29 +12,29 @@
 
     <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half overflow-ellipsis">Tagged…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:tag_ids).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
         <% end %>
-        
+
         <%= link_to bubbles_path(filter.as_params.except(:tag_ids)), class: "btn popup__item" do %>
           <span class="overflow-ellipsis">Clear all</span>
         <% end %>
-        
+
         <% Current.account.tags.order(:title).each do |tag| %>
           <div class="btn popup__item">
-            <%= form.check_box "tag_ids[]", { 
+            <%= form.check_box "tag_ids[]", {
               checked: filter.tags.include?(tag),
               data: { action: "change->form#submit" },
               include_hidden: false,
             }, tag.id %>
 
             <%= form.label "tag_ids[]", tag.hashtag, for: dom_id(tag, :filter), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>
     </dialog>
-  </div> 
+  </div>
 <% end %>

From 51d907fca36a20681ea28d3829ec16be1f5e5255 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 2 Apr 2025 14:32:21 -0500
Subject: [PATCH 3/6] Replace stray image_tag instances and remove colorize
 class

---
 app/assets/stylesheets/colors.css         | 16 ----------------
 app/views/accounts/users/_invite.html.erb |  6 +++---
 app/views/buckets/_access_toggle.erb      |  2 +-
 app/views/buckets/edit.html.erb           |  2 +-
 app/views/comments/_body.html.erb         |  6 +++---
 app/views/events/_event.html.erb          |  6 +++---
 app/views/first_runs/show.html.erb        |  6 +++---
 app/views/sessions/new.html.erb           |  4 ++--
 app/views/users/_transfer.html.erb        |  4 ++--
 app/views/users/edit.html.erb             |  6 +++---
 app/views/users/new.html.erb              |  6 +++---
 11 files changed, 24 insertions(+), 40 deletions(-)

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">

From 24427644a297de75412b9e460afb80cf129b3cb7 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 2 Apr 2025 14:38:30 -0500
Subject: [PATCH 4/6] Replace remaining image_tags with icon_tag

---
 app/helpers/filters_helper.rb                    | 2 +-
 app/views/accounts/users/_user.html.erb          | 2 +-
 app/views/bubbles/_color.html.erb                | 2 +-
 app/views/bubbles/pins/show.html.erb             | 6 +++---
 app/views/bubbles/tags/_listbox_option.html.erb  | 2 +-
 app/views/bubbles/watches/show.html.erb          | 4 ++--
 app/views/comments/reactions/_reaction.html.erb  | 8 ++++----
 app/views/comments/reactions/_reactions.html.erb | 6 +++---
 app/views/comments/reactions/new.html.erb        | 6 +++---
 app/views/layouts/_lightbox.html.erb             | 2 +-
 app/views/notifications/index.html.erb           | 2 +-
 app/views/users/edit.html.erb                    | 2 +-
 12 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb
index 2aa14f29a..b6c8348a4 100644
--- a/app/helpers/filters_helper.rb
+++ b/app/helpers/filters_helper.rb
@@ -2,7 +2,7 @@ module FiltersHelper
   def filter_chip_tag(text, params)
     link_to bubbles_path(params), class: "btn txt-small btn--remove fill-selected" do
       concat tag.span(text)
-      concat image_tag("close.svg", aria: { hidden: true }, size: 24)
+      concat icon_tag("close")
     end
   end
 
diff --git a/app/views/accounts/users/_user.html.erb b/app/views/accounts/users/_user.html.erb
index bf377bc33..a66de7d15 100644
--- a/app/views/accounts/users/_user.html.erb
+++ b/app/views/accounts/users/_user.html.erb
@@ -9,7 +9,7 @@
 
   <label class="btn txt-small flex-item-no-shrink" for="<%= dom_id(user, :role) %>">
     <span class="for-screen-reader">Role: <%= true ? "Administrator" : "Member" %></span>
-    <%= image_tag "crown.svg", size: 20, aria: { hidden: "true" } %>
+    <%= icon_tag "crown" %>
     <%= check_box_tag :role, { data: { action: "form#submit" }, hidden: true, id: dom_id(user, :role) }, "administrator", "member" %>
   </label>
 
diff --git a/app/views/bubbles/_color.html.erb b/app/views/bubbles/_color.html.erb
index b7228aebc..6c2507e38 100644
--- a/app/views/bubbles/_color.html.erb
+++ b/app/views/bubbles/_color.html.erb
@@ -10,7 +10,7 @@
         <span class="color-picker__color">
           <label class="btn btn--circle" style="--btn-background: <%= color %>" title="<%= color %>">
             <%= form.radio_button :color, color %>
-            <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24, class: "checked" %>
+            <%= icon_tag "check.svg", class: "checked" %>
             <span class="for-screen-reader"><%= color %></span>
           </label>
         </span>
diff --git a/app/views/bubbles/pins/show.html.erb b/app/views/bubbles/pins/show.html.erb
index 7fe838e50..9039cc92f 100644
--- a/app/views/bubbles/pins/show.html.erb
+++ b/app/views/bubbles/pins/show.html.erb
@@ -1,13 +1,13 @@
 <%= turbo_frame_tag dom_id(@bubble, :pin) do %>
   <% if @bubble.pinned_by? Current.user %>
       <%= button_to bucket_bubble_pin_path(@bubble.bucket, @bubble), method: :delete, class: "btn btn--reversed" do %>
-        <%= image_tag "pinned.svg", size: 16, aria: { hidden: true } %>
+        <%= icon_tag "pinned" %>
         <span class="for-screen-reader">Un-pin this card</span>
       <% end %>
   <% else %>
       <%= button_to bucket_bubble_pin_path(@bubble.bucket, @bubble), class: "btn" do %>
-        <%= image_tag "unpinned.svg", size: 16, aria: { hidden: true } %>
+        <%= icon_tag "unpinned" %>
         <span class="for-screen-reader">Pin this card</span>
       <% end %>
   <% end %>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/bubbles/tags/_listbox_option.html.erb b/app/views/bubbles/tags/_listbox_option.html.erb
index b1176ddc0..cea797bf3 100644
--- a/app/views/bubbles/tags/_listbox_option.html.erb
+++ b/app/views/bubbles/tags/_listbox_option.html.erb
@@ -2,6 +2,6 @@
   <%= tag.hashtag %>
 
   <% if bubble.tagged_with?(tag) %>
-    <%= image_tag "check.svg", aria: { hidden: "true" } %>
+    <%= icon_tag "check" %>
   <% end %>
 </div>
diff --git a/app/views/bubbles/watches/show.html.erb b/app/views/bubbles/watches/show.html.erb
index 79587e78f..435cc030f 100644
--- a/app/views/bubbles/watches/show.html.erb
+++ b/app/views/bubbles/watches/show.html.erb
@@ -1,12 +1,12 @@
 <%= turbo_frame_tag dom_id(@bubble, :watch) do %>
   <% if @bubble.watched_by? Current.user %>
       <%= button_to bucket_bubble_watch_path(@bubble.bucket, @bubble), method: :delete, class: "btn btn--reversed" do %>
-        <%= image_tag "bell.svg", size: 16, aria: { hidden: true } %>
+        <%= icon_tag "bell" %>
         <span class="for-screen-reader">Stop watching</span>
       <% end %>
   <% else %>
       <%= button_to bucket_bubble_watch_path(@bubble.bucket, @bubble), class: "btn" do %>
-        <%= image_tag "bell-off.svg", size: 16, aria: { hidden: true } %>
+        <%= icon_tag "bell-off" %>
         <span class="for-screen-reader">Watch this</span>
       <% end %>
   <% end %>
diff --git a/app/views/comments/reactions/_reaction.html.erb b/app/views/comments/reactions/_reaction.html.erb
index 4004725b3..062646767 100644
--- a/app/views/comments/reactions/_reaction.html.erb
+++ b/app/views/comments/reactions/_reaction.html.erb
@@ -3,7 +3,7 @@
         class="reaction flex-inline postion--relative max-width align-center fill-white gap"
         data-controller="reaction-delete"
         data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>"
-        data-controller="reaction-delete" data-reaction-delete-perform-class="reaction--deleting" 
+        data-controller="reaction-delete" data-reaction-delete-perform-class="reaction--deleting"
         data-reaction-delete-reveal-class="expanded" data-reaction-delete-reacter-id-value="<%= reaction.reacter.id %>">
     <figure class="reaction__avatar margin-none flex-item-no-shrink">
       <%= avatar_tag reaction.reacter, aria: { label: "#{reaction.reacter.name} reacted #{reaction.content}" }, loading: :lazy %>
@@ -12,14 +12,14 @@
     <%= tag.span reaction.content, role: "button",
           class: [ "txt-small", { "txt-medium": reaction.all_emoji? } ],
           data: { action: "click->reaction-delete#reveal keydown.enter->reaction-delete#reveal:prevent", reaction_delete_target: "content" } %>
-    
+
     <%= button_to bucket_bubble_comment_reaction_path(comment.bubble.bucket, comment.bubble, comment, reaction),
           method: :delete,
           class: "btn btn--negative flex-item-justify-end reaction__delete",
           data: { action: "reaction-delete#perform", reaction_delete_target: "button" } do %>
-      <%= image_tag "minus.svg", size: 20, aria: { hidden: "true" } %>
+      <%= icon_tag "minus" %>
       <span class="for-screen-reader">Delete this reaction</span>
     <% end %>
   </div>
   <span id="delete_reaction_accessible_label" class="for-screen-reader">Press enter to delete this reaction</span>
-<% end %> 
\ No newline at end of file
+<% end %>
diff --git a/app/views/comments/reactions/_reactions.html.erb b/app/views/comments/reactions/_reactions.html.erb
index 67bee5e9c..f452049bd 100644
--- a/app/views/comments/reactions/_reactions.html.erb
+++ b/app/views/comments/reactions/_reactions.html.erb
@@ -4,15 +4,15 @@
     <div class="flex-inline flex-wrap gap" id="<%= dom_id(comment, :reactions) %>" data-turbo-streaming-target="container">
       <%= render partial: "comments/reactions/reaction", collection: comment.reactions.ordered, locals: { comment: comment }, cached: true %>
     </div>
-    
+
     <%= turbo_frame_tag comment, :new_reaction do %>
       <div class="flex-inline" data-controller="soft-keyboard">
         <%= link_to new_bucket_bubble_comment_reaction_path(comment.bubble.bucket, comment.bubble, comment), role: "button",
               class: "txt-small btn reaction__action", action: "soft-keyboard#open" do %>
-          <%= image_tag "reaction.svg", size: 20, aria: { hidden: "true" } %>
+          <%= icon_tag "reaction" %>
           <span class="for-screen-reader">Add a reaction</span>
         <% end %>
       </div>
     <% end %>
-  </div> 
+  </div>
 <% end %>
diff --git a/app/views/comments/reactions/new.html.erb b/app/views/comments/reactions/new.html.erb
index e22cd1db8..3cbf3504b 100644
--- a/app/views/comments/reactions/new.html.erb
+++ b/app/views/comments/reactions/new.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(@comment, :new_reaction) do %>
-  <%= form_with url: bucket_bubble_comment_reactions_path(@comment.bubble.bucket, @comment.bubble, @comment), 
+  <%= form_with url: bucket_bubble_comment_reactions_path(@comment.bubble.bucket, @comment.bubble, @comment),
         class: "reaction reaction__form flex-inline postion--relative max-width align-center fill-white gap expanded",
         html: { aria: { label: "New reaction" } },
         data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %>
@@ -13,13 +13,13 @@
     </label>
 
     <%= form.button class: "btn btn--reversed", type: "submit" do %>
-      <%= image_tag "check.svg", aria: { hidden: "true" } %>
+      <%= icon_tag "check" %>
       <span class="for-screen-reader">Submit</span>
     <% end %>
 
     <%= link_to bucket_bubble_comment_reactions_path(@comment.bubble.bucket, @comment.bubble, @comment), role: "button",
           data: { turbo_frame: dom_id(@comment, :reactions), form_target: "cancel" }, class: "btn btn--negative" do %>
-      <%= image_tag "minus.svg", aria: { hidden: "true" } %>
+      <%= icon_tag "minus" %>
       <span class="for-screen-reader">Cancel</span>
     <% end %>
   <% end %>
diff --git a/app/views/layouts/_lightbox.html.erb b/app/views/layouts/_lightbox.html.erb
index 77c58be0c..724a4a66f 100644
--- a/app/views/layouts/_lightbox.html.erb
+++ b/app/views/layouts/_lightbox.html.erb
@@ -3,7 +3,7 @@
 
   <form method="dialog" class="lightbox__btn">
     <button class="btn fill-white" title="Close (esc)">
-      <%= image_tag "remove.svg", aria: { hidden: "true" } %>
+      <%= icon_tag "remove.svg" %>
       <span class="for-screen-reader">Close image viewer (esc)</span>
     </button>
   </form>
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 3eb51f2bb..e92ad67da 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -10,7 +10,7 @@
     <h1 class="txt-x-large"><%= @page_title %></h1>
 
     <%= link_to notifications_settings_path, class: "btn flex-item-justify-end" do %>
-      <%= image_tag "settings.svg", size: 20 %>
+      <%= icon_tag "settings" %>
       <span class="for-screen-reader">Notification settings</span>
     <% end %>
   </nav>
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index b05979cb5..f9007131f 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -25,7 +25,7 @@
 
           <% if @user.avatar.attached? %>
             <%= tag.button type: :submit, form: "avatar-delete-form", class: "btn btn--negative txt-small", data: { turbo_confirm: "Are you sure you want to remove your avatar? This can't be undone." } do %>
-              <%= image_tag "minus.svg", aria: { hidden: "true" }, size: 20 %>
+              <%= icon_tag "minus" %>
               <span class="for-screen-reader">Delete avatar</span>
             <% end %>
           <% end %>

From 1beff6c89de9d977487da4536cbe51bf84f3b27a Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 2 Apr 2025 14:41:00 -0500
Subject: [PATCH 5/6] Clean img and svg from buttons.css

---
 app/assets/stylesheets/buttons.css | 43 +++++-------------------------
 1 file changed, 7 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 572775e25..2969db1dc 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -28,22 +28,11 @@
     scale var( --transition);
 
   /* Default icon styles */
-  &:where(:has(.icon, img, svg)) {
+  &:where(:has(.icon)) {
     text-align: start;
 
-    .icon, img, svg {
+    .icon {
       --icon-size: var(--btn-icon-size, 1.3em);
-      block-size: var(--btn-icon-size, 1.3em);
-      inline-size: var(--btn-icon-size, 1.3em);
-      max-inline-size: unset;
-    }
-
-    img:not([class]) {
-      filter: invert(0);
-
-      @media (prefers-color-scheme: dark) {
-        filter: invert(1);
-      }
     }
   }
 
@@ -64,7 +53,7 @@
       grid-area: 1/1;
     }
 
-    .icon, img {
+    img {
       --icon-size: 100%;
       block-size: 100%;
       inline-size: 100%;
@@ -80,7 +69,7 @@
 
   /* Circle buttons */
   &.btn--circle,
-  &:where(:has(.for-screen-reader):has(.icon, img, svg)) {
+  &:where(:has(.for-screen-reader):has(.icon)) {
     --btn-border-radius: 50%;
     --btn-padding: 0;
 
@@ -114,7 +103,7 @@
       position: absolute;
     }
 
-    img.checked {
+    .checked {
       display: none;
     }
   }
@@ -124,17 +113,7 @@
     --btn-color: var(--color-ink-reversed);
     --outline-color: var(--color-ink);
 
-    img {
-      filter: invert(1);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      img {
-        filter: invert(0);
-      }
-    }
-
-    img.checked {
+    .checked {
       display: block;
     }
   }
@@ -198,14 +177,6 @@
 
 :is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
   --btn-border-color: var(--color-bg);
-
-  img:not([class]) {
-    filter: invert(1);
-
-    @media (prefers-color-scheme: dark) {
-      filter: invert(0);
-    }
-  }
 }
 
 .btn--small {
@@ -215,7 +186,7 @@
 .btn--success {
   animation: success 1s ease-out;
 
-  img {
+  .icon {
     animation: zoom-fade 300ms ease-out;
   }
 }

From edf7b60f17bf09c8965bb50065bd1f94eb7ee229 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 2 Apr 2025 14:41:25 -0500
Subject: [PATCH 6/6] Remove unused class

---
 app/helpers/translations_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/helpers/translations_helper.rb b/app/helpers/translations_helper.rb
index 094145099..57107b8f5 100644
--- a/app/helpers/translations_helper.rb
+++ b/app/helpers/translations_helper.rb
@@ -18,7 +18,7 @@ module TranslationsHelper
   def translation_button(translation_key)
     tag.div(class: "position-relative", data: { controller: "popover", action: "keydown.esc->popover#close click@document->popover#closeOnClickOutside", popover_orientation_top_class: "popover-orientation-top" }) do
       tag.button(type: "button", class: "btn", tabindex: -1, data: { action: "popover#toggle" }) do
-        concat image_tag("globe.svg", size: 20, role: "presentation", class: "color-icon")
+        concat image_tag("globe.svg", size: 20, role: "presentation")
         concat tag.span("Translate", class: "for-screen-reader")
       end +
       tag.dialog(class: "lanuage-list-menu popover shadow", data: { popover_target: "menu" }) do