diff --git a/docs/technical-guide/developer/ui.md b/docs/technical-guide/developer/ui.md
index fbcf300ca..db958e2cd 100644
--- a/docs/technical-guide/developer/ui.md
+++ b/docs/technical-guide/developer/ui.md
@@ -84,7 +84,7 @@ However, we might want to control the aspect of the icons, or limit which icons
   [{:keys [icon children] :rest props}]
   (assert (or (nil? icon) (contains? valid-icon-list icon) "expected valid icon id"))
   [:> "button" props
-    (when icon [:> icon* {:id icon :size "m"}])
+    (when icon [:> icon* {:icon-id icon :size "m"}])
     children])
 ```
 
@@ -160,7 +160,7 @@ Nested styles for DOM elements that are not instantiated by our component should
   [{:keys [icon children class] :rest props}]
   (let [props (mf/spread-props props {:class (stl/css :button)})]
     [:> "button" props
-     (when icon [:> icon* {:id icon :size "m"}])
+     (when icon [:> icon* {:icon-id icon :size "m"}])
      [:span {:class (stl/css :label-wrapper)} children]]))
 
 ;; later in code
diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs
index 4f64a246d..bf635d5ba 100644
--- a/frontend/src/app/main/ui/comments.cljs
+++ b/frontend/src/app/main/ui/comments.cljs
@@ -737,7 +737,7 @@
     [:div {:class (stl/css :cover)
            :on-click on-click*}
      [:div {:class (stl/css :location)}
-      [:> icon* {:id "comments"
+      [:> icon* {:icon-id "comments"
                  :class (stl/css :location-icon)}]
       [:div {:class (stl/css :location-text)}
        (str "#" (:seqn item))
diff --git a/frontend/src/app/main/ui/components/reorder_handler.cljs b/frontend/src/app/main/ui/components/reorder_handler.cljs
index 8f4acfe32..a8df96020 100644
--- a/frontend/src/app/main/ui/components/reorder_handler.cljs
+++ b/frontend/src/app/main/ui/components/reorder_handler.cljs
@@ -16,7 +16,7 @@
   [:*
    [:div {:ref ref :class (stl/css :reorder)}
     [:> icon*
-     {:id ic/reorder
+     {:icon-id ic/reorder
       :class (stl/css :reorder-icon)
       :aria-hidden true}]]
    [:hr {:class (stl/css :reorder-separator-top)}]
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index bf82855e8..3daefc5d7 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -953,7 +953,7 @@
 
       [:span {:title (tr "dashboard.webhooks.cant-edit")
               :class (stl/css :menu-disabled)}
-       [:> icon* {:id "menu"}]])))
+       [:> icon* {:icon-id "menu"}]])))
 
 (mf/defc webhook-item*
   {::mf/wrap [mf/memo]
diff --git a/frontend/src/app/main/ui/ds/buttons/button.cljs b/frontend/src/app/main/ui/ds/buttons/button.cljs
index cfb30409d..73af4824e 100644
--- a/frontend/src/app/main/ui/ds/buttons/button.cljs
+++ b/frontend/src/app/main/ui/ds/buttons/button.cljs
@@ -32,5 +32,5 @@
                                               :button-destructive (= variant "destructive")))
         props (mf/spread-props props {:class class})]
     [:> "button" props
-     (when icon [:> icon* {:id icon :size "m"}])
+     (when icon [:> icon* {:icon-id icon :size "m"}])
      [:span {:class (stl/css :label-wrapper)} children]]))
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs
index 0b45ad238..88bf48bd1 100644
--- a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs
+++ b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs
@@ -34,4 +34,4 @@
                                               :icon-button-action (= variant "action")
                                               :icon-button-destructive (= variant "destructive")))
         props (mf/spread-props props {:class class :title aria-label})]
-    [:> "button" props [:> icon* {:id icon :aria-label aria-label :class icon-class}] children]))
+    [:> "button" props [:> icon* {:icon-id icon :aria-label aria-label :class icon-class}] children]))
diff --git a/frontend/src/app/main/ui/ds/controls/combobox.cljs b/frontend/src/app/main/ui/ds/controls/combobox.cljs
index e39efedb1..5ed27a05e 100644
--- a/frontend/src/app/main/ui/ds/controls/combobox.cljs
+++ b/frontend/src/app/main/ui/ds/controls/combobox.cljs
@@ -215,7 +215,7 @@
       [:span {:class (stl/css-case :combobox-header true
                                    :header-icon (some? icon))}
        (when icon
-         [:> icon* {:id icon
+         [:> icon* {:icon-id icon
                     :size "s"
                     :aria-hidden true}])
        [:input {:type "text"
@@ -236,7 +236,7 @@
                    :aria-controls listbox-id
                    :class (stl/css :button-toggle-list)
                    :on-click on-click}
-       [:> icon* {:id i/arrow
+       [:> icon* {:icon-id i/arrow
                   :class (stl/css :arrow)
                   :size "s"
                   :aria-hidden true
diff --git a/frontend/src/app/main/ui/ds/controls/input.cljs b/frontend/src/app/main/ui/ds/controls/input.cljs
index 963fe93e6..5637b287f 100644
--- a/frontend/src/app/main/ui/ds/controls/input.cljs
+++ b/frontend/src/app/main/ui/ds/controls/input.cljs
@@ -46,5 +46,5 @@
 
     [:> :span {:class (dm/str class " " (stl/css :container))}
      (when (some? icon)
-       [:> icon* {:id icon :class (stl/css :icon) :on-click on-icon-click}])
+       [:> icon* {:icon-id icon :class (stl/css :icon) :on-click on-icon-click}])
      [:> :input props]]))
diff --git a/frontend/src/app/main/ui/ds/controls/select.cljs b/frontend/src/app/main/ui/ds/controls/select.cljs
index 0d2730ebb..02e291cfa 100644
--- a/frontend/src/app/main/ui/ds/controls/select.cljs
+++ b/frontend/src/app/main/ui/ds/controls/select.cljs
@@ -171,12 +171,12 @@
       [:span {:class (stl/css-case :select-header true
                                    :header-icon (some? icon))}
        (when icon
-         [:> icon* {:id icon
+         [:> icon* {:icon-id icon
                     :size "s"
                     :aria-hidden true}])
        [:span {:class (stl/css :header-label)}
         label]]
-      [:> icon* {:id i/arrow
+      [:> icon* {:icon-id i/arrow
                  :class (stl/css :arrow)
                  :size "s"
                  :aria-hidden true}]]
diff --git a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs
index 16ce0240a..6173366de 100644
--- a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs
+++ b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs
@@ -31,7 +31,7 @@
 
    (when (some? icon)
      [:> icon*
-      {:id icon
+      {:icon-id icon
        :size "s"
        :class (stl/css :option-icon)
        :aria-hidden (when label true)
@@ -40,7 +40,7 @@
    [:span {:class (stl/css :option-text)} label]
    (when selected
      [:> icon*
-      {:id i/tick
+      {:icon-id i/tick
        :size "s"
        :class (stl/css :option-check)
        :aria-hidden (when label true)}])])
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
index 5609a3749..62bf02b4b 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
@@ -287,17 +287,17 @@
 (def ^:private schema:icon
   [:map
    [:class {:optional true} [:maybe :string]]
-   [:id [:and :string [:fn #(contains? icon-list %)]]]
+   [:icon-id [:and :string [:fn #(contains? icon-list %)]]]
    [:size  {:optional true}
     [:maybe [:enum "s" "m"]]]])
 
 (mf/defc icon*
   {::mf/props :obj
    ::mf/schema schema:icon}
-  [{:keys [id size class] :rest props}]
+  [{:keys [icon-id size class] :rest props}]
   (let [class (dm/str (or class "") " " (stl/css :icon))
         props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
         size-px (cond (= size "s") icon-size-s :else icon-size-m)
         offset (/ (- icon-size-m size-px) 2)]
     [:> "svg" props
-     [:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))
+     [:use {:href (dm/str "#icon-" icon-id) :width size-px :height size-px :x offset :y offset}]]))
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
index 140b897a2..c1184acd5 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
@@ -47,7 +47,7 @@ Assuming the namespace is required as `i`:
 You can now use the icon IDs defined in the namespace:
 
 ```clj
-[:> i/icon* {:id i/pin}]
+[:> i/icon* {:icon-id i/pin}]
 ```
 
 ### Customizing colors
@@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
 component and set `color` to whatever value you prefer:
 
 ```clj
-[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
+[:> i/icon* {:icon-id i/add :class (stl/css :toolbar-icon)}]
 ```
 
 ```scss
@@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
 add an `aria-label` attribute to set a proper text:
 
 ```clj
-[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
+[:> i/icon* {:icon-id i/add :aria-label (tr "foo.bar")}]
 ```
 
 ## Usage guidelines for design
diff --git a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs b/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
index 1228c4c1f..5871c61d3 100644
--- a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
+++ b/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
@@ -38,7 +38,7 @@
      [:> :button props
       (when (some? icon)
         [:> icon*
-         {:id icon
+         {:icon-id icon
           :aria-hidden (when label true)
           :aria-label  (when (not label) aria-label)}])
       (when (string? label)
diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs
index ccf892622..5b77a7b24 100644
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -47,7 +47,8 @@
        :on-click on-nav-root}
       [:> raw-svg* {:id "penpot-logo-icon" :class (stl/css :penpot-logo)}]
       (when profile-id
-        [:div {:class (stl/css :go-back-wrapper)} [:> icon* {:id "arrow" :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
+        [:div {:class (stl/css :go-back-wrapper)}
+         [:> icon* {:icon-id "arrow" :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
      [:div {:class (stl/css :deco-before)} i/logo-error-screen]
      (when-not profile-id
        [:button {:class (stl/css :login-header)
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index d22493f14..2c86658ec 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -44,7 +44,7 @@
   ;; NOTE: This custom button may be replace by an action button when this variant is designed
   [:button {:class (stl/css :collapse-sidebar-button)
             :on-click on-click}
-   [:& icon* {:id "arrow"
+   [:> icon* {:icon-id "arrow"
               :size "s"
               :aria-label (tr "workspace.sidebar.collapse")}]])
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
index b967fd917..7809c8568 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
@@ -64,7 +64,7 @@
      (if (not radius-expanded)
        [:div {:class (stl/css :radius-1)
               :title (tr "workspace.options.radius")}
-        [:> icon* {:id "corner-radius"
+        [:> icon* {:icon-id "corner-radius"
                    :size "s"
                    :class (stl/css :icon)}]
         [:> numeric-input*
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
index e6cb23f38..b40762495 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -90,7 +90,7 @@
                          :class (stl/css :theme-group-label)
                          :typography "body-large"}
             [:span {:class (stl/css :group-title)}
-             [:> icon* {:id "group"}]
+             [:> icon* {:icon-id "group"}]
              group]])
          [:ul {:class (stl/css :theme-group-rows-wrapper)}
           (for [[_ {:keys [group name] :as theme}] themes
@@ -131,7 +131,7 @@
                  [:div {:class (stl/css :label-wrapper)}
                   [:> text* {:as "span" :typography "body-medium"}
                    (tr "workspace.token.num-sets" sets-count)]
-                  [:> icon* {:id "arrow-right"}]]]
+                  [:> icon* {:icon-id "arrow-right"}]]]
 
                 [:> button* {:class (stl/css :sets-count-empty-button)
                              :type "button"
@@ -140,7 +140,7 @@
                  [:div {:class (stl/css :label-wrapper)}
                   [:> text* {:as "span" :typography "body-medium"}
                    (tr "workspace.token.no-sets")]
-                  [:> icon* {:id "arrow-right"}]]])
+                  [:> icon* {:icon-id "arrow-right"}]]])
 
               [:> icon-button* {:on-click delete-theme
                                 :variant "ghost"
@@ -186,7 +186,7 @@
                                                      :on-click (fn [e]
                                                                  (dom/stop-propagation e)
                                                                  (on-toggle-dropdown))}
-                                            [:> icon* {:id "arrow-down"}]]))}]]
+                                            [:> icon* {:icon-id "arrow-down"}]]))}]]
      [:div {:class (stl/css :group-input-wrapper)}
       ;; TODO: This span should be remove when labeled-input is updated
       [:span {:class (stl/css :labeled-input-label)}  "Theme"]
@@ -306,7 +306,7 @@
        [:button {:on-click on-back
                  :class (stl/css :back-btn)
                  :type "button"}
-        [:> icon* {:id ic/arrow-left :aria-hidden true}]
+        [:> icon* {:icon-id ic/arrow-left :aria-hidden true}]
         (tr "workspace.token.back-to-themes")]
 
        [:& theme-inputs {:dropdown-open? dropdown-open?
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 127f13c3f..0c3eb6928 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -96,9 +96,8 @@
        :aria-label (tr "labels.collapse")
        :icon (if @collapsed? "arrow-right" "arrow-down")
        :variant "action"}]
-     [:> icon*
-      {:id "group"
-       :class (stl/css :icon)}]
+     [:> icon* {:icon-id "group"
+                :class (stl/css :icon)}]
      (if editing?'
        [:& editing-label
         {:default-value label
@@ -139,10 +138,9 @@
            :on-click on-click
            :on-double-click #(on-edit tree-path)
            :on-context-menu on-context-menu}
-     [:> icon*
-      {:id "document"
-       :class (stl/css-case :icon true
-                            :root-icon (not tree-depth))}]
+     [:> icon* {:icon-id "document"
+                :class (stl/css-case :icon true
+                                     :root-icon (not tree-depth))}]
      (if editing?'
        [:& editing-label
         {:default-value label
@@ -160,7 +158,7 @@
            [:> icon* {:aria-label (tr "workspace.token.select-set")
                       :class (stl/css :check-icon)
                       :size "s"
-                      :id ic/tick}])]])]))
+                      :icon-id ic/tick}])]])]))
 
 (mf/defc sets-tree
   [{:keys [set-path set-node tree-depth tree-path on-select selected? on-toggle active? editing? on-edit on-edit-reset on-edit-submit]
diff --git a/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs b/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
index 484c806c5..85a3e2eeb 100644
--- a/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
@@ -42,7 +42,7 @@
                      :is-selected selected?)
              :on-click select-theme}
         [:> text* {:as "span" :typography "body-small" :class (stl/css :label)} name]
-        [:> icon* {:id i/tick
+        [:> icon* {:icon-id i/tick
                    :aria-hidden true
                    :class (stl/css-case :check-icon true
                                         :check-icon-visible selected?)}]])]))
@@ -70,7 +70,7 @@
              :role "option"
              :on-click on-edit-click}
         [:> text* {:as "span" :typography "body-small"} (tr "workspace.token.edit-themes")]
-        [:> icon* {:id i/arrow-right :aria-hidden true}]]])))
+        [:> icon* {:icon-id i/arrow-right :aria-hidden true}]]])))
 
 (mf/defc theme-select
   [{:keys []}]
@@ -108,7 +108,7 @@
            :class (stl/css :custom-select)}
      [:> text* {:as "span" :typography "body-small" :class (stl/css :current-label)}
       current-label]
-     [:> icon* {:id i/arrow-down :class (stl/css :dropdown-button) :aria-hidden true}]
+     [:> icon* {:icon-id i/arrow-down :class (stl/css :dropdown-button) :aria-hidden true}]
      [:& dropdown {:show is-open?
                    :on-close on-close-dropdown
                    :ref dropdown-element*}