Centralized icon helper

app/components/button_component.rb

@@ -29,6 +29,10 @@ class ButtonComponent < ButtonishComponent
         data = data.merge(turbo_confirm: confirm.to_data_attribute)
       end
 
+      if frame.present?
+        data = data.merge(turbo_frame: frame)
+      end
+
       merged_opts.merge(
         class: class_names(container_classes, extra_classes),
         data: data

app/components/buttonish_component.rb

@@ -58,9 +58,9 @@ class ButtonishComponent < ViewComponent::Base
     }
   }.freeze
 
-  attr_reader :variant, :size, :href, :icon, :icon_position, :text, :full_width, :extra_classes, :opts
+  attr_reader :variant, :size, :href, :icon, :icon_position, :text, :full_width, :extra_classes, :frame, :opts
 
-  def initialize(variant: :primary, size: :md, href: nil, text: nil, icon: nil, icon_position: :left, full_width: false, **opts)
+  def initialize(variant: :primary, size: :md, href: nil, text: nil, icon: nil, icon_position: :left, full_width: false, frame: nil, **opts)
     @variant = variant.to_s.underscore.to_sym
     @size = size.to_sym
     @href = href
@@ -69,6 +69,7 @@ class ButtonishComponent < ViewComponent::Base
     @text = text
     @full_width = full_width
     @extra_classes = opts.delete(:class)
+    @frame = frame
     @opts = opts
   end
 

app/components/link_component.rb

@@ -10,11 +10,6 @@ class LinkComponent < ButtonishComponent
     }
   ).freeze
 
-  def initialize(frame: nil, **opts)
-    super(**opts)
-    @frame = frame
-  end
-
   def merged_opts
     merged_opts = opts.dup || {}
     data = merged_opts.delete(:data) || {}

app/helpers/application_helper.rb

@@ -1,12 +1,25 @@
 module ApplicationHelper
   include Pagy::Frontend
 
-  def icon(key, size: "md", color: "current")
-    render partial: "shared/icon", locals: { key:, size:, color: }
-  end
+  def icon(key, size: "md", color: "default", custom: false, as_button: false, **opts)
+    extra_classes = opts.delete(:class)
+    sizes = { xs: "w-3 h-3", sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6" }
+    colors = { default: "fg-gray", success: "text-success", warning: "text-warning", destructive: "text-destructive", current: "text-current" }
 
-  def icon_custom(key, size: "md", color: "current")
-    render partial: "shared/icon_custom", locals: { key:, size:, color: }
+    icon_classes = class_names(
+      "shrink-0",
+      sizes[size.to_sym],
+      colors[color.to_sym],
+      extra_classes
+    )
+
+    if custom 
+      inline_svg_tag("#{key}.svg", class: icon_classes, **opts)
+    elsif as_button
+      render ButtonComponent.new(variant: "icon", class: extra_classes, icon: key, size: size, type: "button", **opts)
+    else
+      lucide_icon(key, class: icon_classes, **opts)
+    end
   end
 
   # Convert alpha (0-1) to 8-digit hex (00-FF)

app/views/accounts/_account.html.erb

@@ -25,7 +25,7 @@
 
       <% unless account.scheduled_for_deletion? %>
         <%= link_to edit_account_path(account, return_to: return_to), data: { turbo_frame: :modal }, class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center" do %>
-          <%= lucide_icon "pencil-line", class: "w-4 h-4 text-secondary" %>
+          <%= icon("pencil-line", size: "sm") %>
         <% end %>
       <% end %>
     </div>

app/views/accounts/_account_sidebar_tabs.html.erb

@@ -1,15 +1,15 @@
 <%# locals: (family:, active_account_group_tab:) %>
 
 <div>
-  <% if family.requires_data_provider? && Provider::Registry.get_provider(:synth).nil? %>
+  <% if family.requires_data_provider? && Provider::Registry.get_provider(:synth).nil? || true %>
     <details class="group bg-yellow-tint-10 rounded-lg p-2 text-yellow-600 mb-3 text-xs">
       <summary class="flex items-center justify-between gap-2">
         <div class="flex items-center gap-2">
-          <%= icon "triangle-alert", size: "sm" %>
+          <%= icon "triangle-alert", size: "sm", color: "warning" %>
           <p class="font-medium">Missing historical data</p>
         </div>
 
-        <%= lucide_icon "chevron-down", class: "text-yellow-600 group-open:transform group-open:rotate-180 w-5" %>
+        <%= icon("chevron-down", color: "warning", class: "group-open:transform group-open:rotate-180") %>
       </summary>
       <div class="text-xs py-2 space-y-2">
         <p>Maybe uses Synth API to fetch historical exchange rates, security prices, and more.  This data is required to calculate accurate historical account balances.</p>

app/views/accounts/_account_type.html.erb

@@ -2,8 +2,8 @@
 
 <%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
             class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
-  <span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
-    <%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
+  <span style="color: <%= accountable.color %>; background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
+    <%= icon(accountable.icon, color: "current") %>
   </span>
   <%= accountable.display_name.singularize %>
 <% end %>

app/views/accounts/_accountable_group.html.erb

@@ -2,7 +2,7 @@
 
 <details class="group" data-controller="account-collapse" data-account-collapse-type-value="<%= account_group.key %>">
   <summary class="px-3 py-2 flex items-center gap-3 cursor-pointer h-10 mb-1">
-    <%= lucide_icon("chevron-right", class: "group-open:rotate-90 text-secondary w-5 h-5") %>
+    <%= icon("chevron-right", class: "group-open:rotate-90") %>
 
     <%= tag.p account_group.name, class: "text-sm font-medium" %>
 

app/views/accounts/_empty.html.erb

@@ -3,9 +3,10 @@
     <%= tag.p t(".no_accounts"), class: "text-primary mb-1 font-medium" %>
     <%= tag.p t(".empty_message"), class: "text-secondary mb-4" %>
 
-    <%= link_to new_account_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new_account") %></span>
-    <% end %>
+    <%= render LinkComponent.new(
+      text: t(".new_account"),
+      href: new_account_path,
+      frame: :modal
+    ) %>
   </div>
 </div>

app/views/accounts/index/_manual_accounts.html.erb

@@ -2,10 +2,10 @@
 
 <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
   <summary class="flex items-center gap-2 focus-visible:outline-hidden">
-    <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
+    <%= icon("chevron-right", class: "group-open:transform group-open:rotate-90") %>
 
     <div class="flex items-center justify-center h-8 w-8 rounded-full bg-black/5">
-      <%= lucide_icon("folder-pen", class: "w-5 h-5 text-secondary") %>
+      <%= icon("folder-pen") %>
     </div>
 
     <span class="mr-auto text-sm font-medium text-primary"><%= t(".other_accounts") %></span>

app/views/accounts/new.html.erb

@@ -25,8 +25,8 @@
       <%= button_to imports_path(import: { type: "AccountImport" }),
               data: { turbo_frame: :_top },
             class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
-        <span style="background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
-          <%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
+        <span style="color: #F79009; background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
+          <%= icon("download", color: "current") %>
         </span>
         <%= t("accounts.new.import_accounts") %>
       <% end %>

app/views/accounts/new/_container.html.erb

@@ -2,17 +2,21 @@
 
 <%= modal do %>
   <div class="flex flex-col w-screen max-w-xl relative" data-controller="list-keyboard-navigation">
-    <div class="border-b border-tertiary md:border-alpha-black-25 p-4 text-gray-800 flex items-center space-x-3">
-      <% if back_path %>
-        <%= link_to back_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 focus:outline-gray-300 focus:outline" do %>
-          <%= lucide_icon("arrow-left", class: "text-secondary w-5 h-5") %>
+    <div class="border-b border-tertiary md:border-alpha-black-25 p-4 text-gray-800 flex items-center justify-between gap-2">
+      <div class="flex items-center gap-2">
+        <% if back_path %>
+          <%= render LinkComponent.new(
+          variant: "icon",
+          icon: "arrow-left",
+          href: back_path,
+          size: "lg"
+        ) %>
         <% end %>
-      <% end %>
 
-      <span class="text-primary"><%= title %></span>
-      <button class="absolute top-1/2 -translate-y-1/2 right-4 flex w-8 h-8 items-center justify-center rounded-lg md:hidden outline-0" data-action="click->modal#close">
-        <%= lucide_icon("x", class: "text-secondary w-6 h-6") %>
-      </button>
+        <span class="text-primary"><%= title %></span>
+      </div>
+
+      <%= icon("x", as_button: true, size: "lg", data: { action: "modal#close" }) %>
     </div>
 
     <div class="p-2 text-subdued">
@@ -26,12 +30,18 @@
       <div class="flex space-x-5">
         <div class="flex items-center space-x-2">
           <span>Select</span>
-          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("corner-down-left", class: "inline w-3 h-3") %></kbd>
+          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
+            <%= icon("corner-down-left", size: "xs") %>
+          </kbd>
         </div>
         <div class="flex items-center space-x-2">
           <span>Navigate</span>
-          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("arrow-up", class: "inline w-3 h-3") %></kbd>
-          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon("arrow-down", class: "inline w-3 h-3") %></kbd>
+          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
+            <%= icon("arrow-up", size: "xs") %>
+          </kbd>
+          <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
+            <%= icon("arrow-down", size: "xs") %>
+          </kbd>
         </div>
       </div>
       <div class="flex items-center space-x-2">

app/views/accounts/new/_method_selector.html.erb

@@ -4,7 +4,7 @@
   <div class="text-sm">
     <%= link_to path, class: "flex items-center gap-4 w-full text-center text-primary focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface rounded-lg p-2" do %>
       <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
-        <%= lucide_icon("keyboard", class: "text-secondary w-5 h-5") %>
+        <%= icon("keyboard") %>
       </span>
       <%= t("accounts.new.method_selector.manual_entry") %>
     <% end %>
@@ -13,7 +13,7 @@
       <%# Default US-only Link %>
       <button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="us" data-plaid-link-token-value="<%= us_link_token %>" class="text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
         <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
-          <%= lucide_icon("link-2", class: "text-secondary w-5 h-5") %>
+          <%= icon("link-2") %>
         </span>
         <%= t("accounts.new.method_selector.connected_entry") %>
       </button>
@@ -23,7 +23,7 @@
     <% if eu_link_token %>
       <button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="eu" data-plaid-link-token-value="<%= eu_link_token %>" class="text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
         <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
-          <%= lucide_icon("link-2", class: "text-secondary w-5 h-5") %>
+          <%= icon("link-2") %>
         </span>
         <%= t("accounts.new.method_selector.connected_entry_eu") %>
       </button>

app/views/accounts/show/_activity.html.erb

@@ -37,7 +37,7 @@
         <div class="flex gap-2 mb-4">
           <div class="grow">
             <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
-              <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
+              <%= icon("search") %>
               <%= hidden_field_tag :account_id, @account.id %>
               <%= form.search_field :search,
                             placeholder: "Search entries by name",

app/views/accounts/show/_header.html.erb

@@ -19,17 +19,27 @@
       </div>
     <% end %>
 
-    <div class="flex items-center gap-3 ml-auto">
+    <div class="flex items-center gap-1 ml-auto">
       <% if account.plaid_account_id.present? %>
         <% if Rails.env.development? %>
-          <%= button_to sync_plaid_item_path(account.plaid_account.plaid_item), disabled: account.syncing?, data: { turbo: false }, class: "flex items-center gap-2", title: "Sync Account" do %>
-            <%= lucide_icon "refresh-cw", class: "w-4 h-4 text-secondary hover:text-subdued" %>
-          <% end %>
+          <%= icon(
+            "refresh-cw",
+            as_button: true,
+            size: "sm",
+            href: sync_plaid_item_path(account.plaid_account.plaid_item),
+            disabled: account.syncing?,
+            frame: :_top
+          ) %>
         <% end %>
       <% else %>
-        <%= button_to sync_account_path(account), disabled: account.syncing?, data: { turbo: false }, class: "flex items-center gap-2", title: "Sync Account" do %>
-          <%= lucide_icon "refresh-cw", class: "w-4 h-4 text-secondary hover:text-subdued" %>
-        <% end %>
+        <%= icon(
+          "refresh-cw", 
+          as_button: true, 
+          size: "sm", 
+          href: sync_account_path(account),
+          disabled: account.syncing?,
+          frame: :_top
+        ) %>
       <% end %>
 
       <%= render "accounts/show/menu", account: account %>

app/views/assistant_messages/_assistant_message.html.erb

@@ -5,7 +5,7 @@
     <details class="group mb-1">
       <summary class="flex items-center gap-2">
         <p class="text-secondary text-sm">Assistant reasoning</p>
-        <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
+        <%= icon("chevron-down", class: "group-open:transform group-open:rotate-180") %>
       </summary>
 
       <div class="prose prose--ai-chat"><%= markdown(assistant_message.content) %></div>

app/views/assistant_messages/_tool_calls.html.erb

@@ -2,7 +2,7 @@
 
 <details class="my-2 group mb-4">
   <summary class="text-secondary text-xs cursor-pointer flex items-center gap-2">
-    <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
+    <%= icon("chevron-right", class: "group-open:transform group-open:rotate-90") %>
     <p>Tool Calls</p>
   </summary>
 

app/views/budget_categories/_budget_category_donut.html.erb

@@ -11,7 +11,9 @@
   <div data-donut-chart-target="contentContainer" class="flex justify-center items-center h-full p-1">
     <div data-donut-chart-target="defaultContent" class="h-full w-full rounded-full flex flex-col items-center justify-center" style="background-color: <%= hex_with_alpha(budget_category.category.color, 0.05) %>">
       <% if budget_category.category.lucide_icon %>
-        <%= lucide_icon budget_category.category.lucide_icon, class: "w-4 h-4 shrink-0", style: "color: #{budget_category.category.color}" %>
+        <span style="color: <%= budget_category.category.color %>">
+          <%= icon(budget_category.category.lucide_icon, size: "sm", color: "current") %>
+        </span>
       <% else %>
         <span class="text-sm uppercase" style="color: <%= budget_category.category.color %>">
           <%= budget_category.category.name.first.upcase %>

app/views/categories/_category.html.erb

@@ -14,9 +14,9 @@
       <% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil", href: edit_category_path(category), data: { turbo_frame: :modal }) %>
 
       <% if category.transactions.any? %>
-        <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: new_category_deletion_path(category), data: { turbo_frame: :modal }) %>
+        <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: new_category_deletion_path(category), destructive: true, data: { turbo_frame: :modal }) %>
       <% else %>
-        <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: category_path(category), method: :delete) %>
+        <% menu.with_item(variant: "button", text: t(".delete"), icon: "trash-2", href: category_path(category), method: :delete) %>
       <% end %>
     <% end %>
   </div>

app/views/layouts/shared/_breadcrumbs.html.erb

@@ -2,7 +2,7 @@
 
 <nav class="items-center gap-2 mb-6 hidden md:flex">
   <% if sidebar_toggle_enabled %>
-    <%= render ButtonComponent.new(variant: "icon", icon: "panel-left", data: { action: "sidebar#toggleLeftPanel" }) %>
+    <%= icon("panel-left", as_button: true, data: { action: "sidebar#toggleLeftPanel" }) %>
   <% end %>
 
   <div class="py-2 flex items-center gap-2">
@@ -23,7 +23,7 @@
 
   <% if sidebar_toggle_enabled %>
     <div class="ml-auto">
-      <%= render ButtonComponent.new(variant: "icon", icon: "panel-right", data: { action: "sidebar#toggleRightPanel" }, title: "Toggle AI Assistant") %>
+      <%= icon("panel-right", as_button: true, data: { action: "sidebar#toggleRightPanel" }, title: "Toggle AI assistant") %>
     </div>
   <% end %>
 </nav>

app/views/layouts/shared/_custom_confirm_dialog.html.erb

@@ -3,12 +3,7 @@
     <div class="space-y-2">
       <div class="flex items-center justify-between gap-2">
         <h3 class="font-medium text-primary" data-confirm-dialog-target="title">Are you sure?</h3>
-
-        <%= render ButtonComponent.new(
-          variant: "icon",
-          icon: "x",
-          value: "cancel",
-        ) %>
+        <%= icon("x", as_button: true, value: "cancel") %>
       </div>
 
       <p class="text-sm text-secondary" data-confirm-dialog-target="subtitle">This action cannot be undone.</p>

app/views/layouts/shared/_htmldoc.html.erb

@@ -22,8 +22,8 @@
 
     <% if Rails.env.development? %>
       <div class="fixed bottom-10 left-2">
-        <%= render ButtonComponent.new(variant: "icon", icon: "eclipse", data: { action: "theme#toDark" }) %>
-        <%= render ButtonComponent.new(variant: "icon", icon: "sun", data: { action: "theme#toLight" }) %>
+        <%= icon("eclipse", as_button: true, data: { action: "theme#toDark" }) %>
+        <%= icon("sun", as_button: true, data: { action: "theme#toLight" }) %>
       </div>
     <% end %>
 

app/views/layouts/sidebar/_nav_item.html.erb

@@ -6,7 +6,7 @@
     <% icon_color = page_active?(path) ? "current" : "gray" %>
 
     <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-container shadow-xs text-primary" : "group-hover:bg-container-hover text-secondary") do %>
-      <%= is_custom ? icon_custom(icon_key, color: icon_color) : icon(icon_key, color: icon_color) %>
+      <%= icon(icon_key, color: icon_color, custom: is_custom) %>
     <% end %>
   </div>
 

app/views/messages/_chat_form.html.erb

@@ -19,11 +19,11 @@
       <div class="items-center gap-1 hidden lg:flex">
         <%# These are disabled for now, but in the future, will all open specific menus with their own context and search %>
         <% ["plus", "command", "at-sign", "mouse-pointer-click"].each do |icon| %>
-          <%= render ButtonComponent.new(variant: "icon", icon: icon, disabled: true, class: "cursor-not-allowed", title: "Coming soon") %>
+          <%= icon(icon, as_button: true, disabled: true, class: "cursor-not-allowed", title: "Coming soon") %>
         <% end %>
       </div>
 
-      <%= render ButtonComponent.new(variant: "icon", icon: "arrow-up", type: "submit") %>
+      <%= icon("arrow-up", as_button: true, type: "submit") %>
     </div>
   <% end %>
 

app/views/plaid_items/_plaid_item.html.erb

@@ -93,10 +93,10 @@
             </div>
           <% end %>
         <% else %>
-          <%= render ButtonComponent.new(
-            variant: "icon",
-            icon: "refresh-cw",
-            href: sync_plaid_item_path(plaid_item),
+          <%= icon(
+            "refresh-cw", 
+            as_button: true, 
+            href: sync_plaid_item_path(plaid_item), 
             disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?
           ) %>
         <% end %>

app/views/rule/actions/_action.html.erb

@@ -19,10 +19,9 @@
     <% end %>
   </div>
 
-  <%= render ButtonComponent.new(
-    icon: "trash-2",
-    variant: "icon",
-    size: "sm",
-    data: { action: "rule--actions#remove", rule__actions_destroy_param: action.persisted? }
-  ) %>
+  <%= icon(
+    "trash-2", 
+    size: "sm", 
+    as_button: true, 
+    data: { action: "rule--actions#remove", rule__actions_destroy_param: action.persisted? }) %>
 </li>

app/views/rule/conditions/_condition.html.erb

@@ -32,9 +32,9 @@
     </div>
   </div>
 
-  <%= render ButtonComponent.new(
-    icon: "trash-2",
-    variant: "icon",
+  <%= icon(
+    "trash-2",
+    as_button: true,
     size: "sm",
     data: { action: "rule--conditions#remove", rule__conditions_destroy_param: condition.persisted? }
   ) %>

app/views/rule/conditions/_condition_group.html.erb

@@ -19,10 +19,10 @@
       <p class="text-sm text-secondary">of the following conditions</p>
     </div>
 
-    <%= render ButtonComponent.new(
-      icon: "trash-2",
-      variant: "icon",
+    <%= icon(
+      "trash-2",
       size: "sm",
+      as_button: true,
       data: { action: "element-removal#remove" }
     ) %>
   </div>

app/views/shared/_icon.html.erb

@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= lucide_icon key, class: class_names(size_class, color_class, "shrink-0") %>

app/views/shared/_icon_custom.html.erb

@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= inline_svg_tag "#{key}.svg", class: class_names(size_class, color_class, "shrink-0") %>

app/views/shared/_icon_image.html.erb

@@ -1,6 +0,0 @@
-<%# locals: (key:, size: "md", color: "current") %>
-
-<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
-<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
-
-<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key ) %>

app/views/transactions/show.html.erb

@@ -135,12 +135,14 @@
             <p class="text-secondary"><%= t(".delete_subtitle") %></p>
           </div>
 
-          <%= button_to t(".delete"),
-                  entry_path(@entry),
-                  method: :delete,
-                  class:  "rounded-lg px-3 py-2 text-red-500 text-sm
-                           font-medium border border-secondary",
-                  data:   { turbo_confirm: true, turbo_frame: "_top" } %>
+          <%= render ButtonComponent.new(
+            text: t(".delete"),
+            variant: "outline-destructive",
+            href: entry_path(@entry),
+            method: :delete,
+            confirm: CustomConfirm.for_resource_deletion("transaction"),
+            frame: "_top"
+          ) %>
         </div>
       </div>
     <% end %>