diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90e763ecff..29027d31ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,11 @@ All notable changes to this project will be documented in this file.
 - Cells -> ViewComponents refactoring:
   - Folio::Console::Form::HeaderCell -> Folio::Console::Form::HeaderComponent
   - Folio::PublishableHintCell -> Folio::Publishable::HintComponent
+  - Folio::Console::Ui::FlagCell -> Folio::Console::Ui::FlagComponent
+  - Folio::Console::Ui::WarningRibbonCell -> Folio::Console::Ui::WarningRibbonComponent
+  - Folio::Console::ConsoleNotes::CatalogueTooltipCell -> Folio::Console::ConsoleNotes::CatalogueTooltipComponent
+  - Folio::Console::CatalogueSortArrowsCell -> Folio::Console::CatalogueSortArrowsComponent
+  - Folio::Console::Ui::WithIconCell -> Folio::Console::Ui::WithIconComponent
 - generalized tiptap_config.use_as_single_image_in_toolbar -> tiptap_config.toolbar with icon and slot names
 
 ### Fixed
diff --git a/app/cells/folio/console/atoms/previews/_inner_insert.slim b/app/cells/folio/console/atoms/previews/_inner_insert.slim
index 4b1f4b539f..3abec39664 100644
--- a/app/cells/folio/console/atoms/previews/_inner_insert.slim
+++ b/app/cells/folio/console/atoms/previews/_inner_insert.slim
@@ -4,9 +4,8 @@
       = folio_icon(:link)
 
     span.f-c-atoms-previews__insert-hint-big-btn
-      == cell('folio/console/ui/with_icon',
-              t('.add_atom'),
-              icon: :plus)
+      == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.add_atom'),
+                                                                          icon: :plus))
 
     span.f-c-atoms-previews__insert-hint-btn
       = folio_icon(:plus)
diff --git a/app/cells/folio/console/catalogue_cell.rb b/app/cells/folio/console/catalogue_cell.rb
index de8f09db06..ae682e52f4 100644
--- a/app/cells/folio/console/catalogue_cell.rb
+++ b/app/cells/folio/console/catalogue_cell.rb
@@ -428,9 +428,9 @@ def label_for(attr = nil, skip_desktop_header: false, allow_sorting: false)
       else
         base = klass.human_attribute_name(attr)
 
-        if allow_sorting && arrows = cell("folio/console/catalogue_sort_arrows",
-                                          klass:,
-                                          attr:).show
+        component = Folio::Console::CatalogueSortArrowsComponent.new(klass:, attr:)
+        if allow_sorting && component.render?
+          arrows = render_view_component(component)
           content_tag(:span, "#{base} #{arrows}", class: "f-c-catalogue__label-with-arrows")
         else
           base
diff --git a/app/cells/folio/console/catalogue_sort_arrows_cell.rb b/app/cells/folio/console/catalogue_sort_arrows_cell.rb
deleted file mode 100644
index fb4515d2e7..0000000000
--- a/app/cells/folio/console/catalogue_sort_arrows_cell.rb
+++ /dev/null
@@ -1,54 +0,0 @@
-# frozen_string_literal: true
-
-class Folio::Console::CatalogueSortArrowsCell < Folio::ConsoleCell
-  class_name "f-c-catalogue-sort-arrows", :active?, :desc?
-
-  def show
-    if model.present?
-      if model[:klass].respond_to?("sort_by_#{asc_key}") && model[:klass].respond_to?("sort_by_#{desc_key}")
-        render
-      end
-    end
-  end
-
-  def asc_key
-    @asc_key ||= "#{model[:attr]}_asc"
-  end
-
-  def desc_key
-    @desc_key ||= "#{model[:attr]}_desc"
-  end
-
-  def url
-    h = request.query_parameters.dup
-    h.delete("page")
-
-    if asc?
-      h["sort"] = desc_key
-    else
-      h["sort"] = asc_key
-    end
-
-    "#{request.path}?#{h.to_query}"
-  end
-
-  def active?
-    asc? || desc?
-  end
-
-  def asc?
-    params[:sort] == asc_key
-  end
-
-  def desc?
-    params[:sort] == desc_key
-  end
-
-  def title
-    if active?
-      t(".sort_desc")
-    else
-      t(".sort_asc")
-    end
-  end
-end
diff --git a/app/cells/folio/console/dropdown/show.slim b/app/cells/folio/console/dropdown/show.slim
index 8aa19f0841..3fa72d8be2 100644
--- a/app/cells/folio/console/dropdown/show.slim
+++ b/app/cells/folio/console/dropdown/show.slim
@@ -9,8 +9,7 @@
             span.dropdown-divider__title = link[:title]
           .dropdown-divider__line
       - else
-        == cell('folio/console/ui/with_icon',
-                link[:title],
-                href: link[:url],
-                class: 'dropdown-item',
-                icon: link[:icon])
+        == render_view_component(Folio::Console::Ui::WithIconComponent.new(link[:title],
+                                                                            href: link[:url],
+                                                                            html_class: 'dropdown-item',
+                                                                            icon: link[:icon]))
diff --git a/app/cells/folio/console/merges/form/show.slim b/app/cells/folio/console/merges/form/show.slim
index 83c39d1a51..2f7f61d969 100644
--- a/app/cells/folio/console/merges/form/show.slim
+++ b/app/cells/folio/console/merges/form/show.slim
@@ -9,9 +9,8 @@
           = t('.original')
 
         h2.h4.col.my-4.f-c-merges-form__title-with-icon
-          == cell('folio/console/ui/with_icon',
-                  t('.duplicate'),
-                  icon: :chevron_left)
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.duplicate'),
+                                                                              icon: :chevron_left))
 
       .f-c-merges-form__rows
         - model.structure.each do |row|
diff --git a/app/cells/folio/console/new_record_modal/toggle.slim b/app/cells/folio/console/new_record_modal/toggle.slim
index 7db79072b5..8c5706f721 100644
--- a/app/cells/folio/console/new_record_modal/toggle.slim
+++ b/app/cells/folio/console/new_record_modal/toggle.slim
@@ -1,9 +1,8 @@
-== cell('folio/console/ui/with_icon',
-        options[:label] || t('folio.console.actions.add'),
-        class: "f-c-new-record-modal__toggle",
-        href: "#add",
-        icon: :plus,
-        tag: { \
-          "data-target" => ".#{modal_class_name}", \
-          "data-class" => model.to_s \
-        })
+== render_view_component(Folio::Console::Ui::WithIconComponent.new(options[:label] || t('folio.console.actions.add'),
+                                                                    html_class: "f-c-new-record-modal__toggle",
+                                                                    href: "#add",
+                                                                    icon: :plus,
+                                                                    data: { \
+                                                                      "target" => ".#{modal_class_name}", \
+                                                                      "class" => model.to_s \
+                                                                    }))
diff --git a/app/cells/folio/console/private_attachments/list/show.slim b/app/cells/folio/console/private_attachments/list/show.slim
index 54b928fb68..7e3abb3044 100644
--- a/app/cells/folio/console/private_attachments/list/show.slim
+++ b/app/cells/folio/console/private_attachments/list/show.slim
@@ -3,12 +3,11 @@
     ul.f-c-private-attachments-list__ul
       - model.each do |pa|
         li.f-c-private-attachments-list__li.my-2
-          == cell('folio/console/ui/with_icon',
-                  pa.to_label,
-                  icon: :file_document,
-                  href: Folio::S3.url_rewrite(pa.file.remote_url(expires: 1.hour.from_now)),
-                  target: "_blank",
-                  class: 'f-c-private-attachments-list__a')
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(pa.to_label,
+                                                                              icon: :file_document,
+                                                                              href: Folio::S3.url_rewrite(pa.file.remote_url(expires: 1.hour.from_now)),
+                                                                              target: "_blank",
+                                                                              html_class: 'f-c-private-attachments-list__a'))
 
   - else
     .text-muted = t('folio.console.blank')
diff --git a/app/cells/folio/console/private_attachments/single_dropzone/show.slim b/app/cells/folio/console/private_attachments/single_dropzone/show.slim
index 2152be2587..799ee7193c 100644
--- a/app/cells/folio/console/private_attachments/single_dropzone/show.slim
+++ b/app/cells/folio/console/private_attachments/single_dropzone/show.slim
@@ -9,9 +9,8 @@ div class=class_name
     - else
       .d-flex.align-items-center
         a.me-3.btn.btn-outline-secondary href=href target="_blank"
-          == cell('folio/console/ui/with_icon',
-                  t('.download'),
-                  icon: :file_document)
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.download'),
+                                                                              icon: :file_document))
 
         .f-c-private-attachments-single-dropzone__upload.me-3 data=upload_data
           = folio_icon(:edit,
@@ -31,8 +30,7 @@ div class=class_name
           data=upload_data
           class="btn btn-outline-secondary"
         ]
-          == cell('folio/console/ui/with_icon',
-                  t('.upload'),
-                  icon: :file_document)
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.upload'),
+                                                                              icon: :file_document))
 
   span.folio-loader.f-c-private-attachments-single-dropzone__loader
diff --git a/app/cells/folio/console/publishable_inputs/item/show.slim b/app/cells/folio/console/publishable_inputs/item/show.slim
index c6023884ca..cd0ddd965e 100644
--- a/app/cells/folio/console/publishable_inputs/item/show.slim
+++ b/app/cells/folio/console/publishable_inputs/item/show.slim
@@ -37,6 +37,5 @@ div class=class_name data=data
                   atom_setting: model[:atom_setting] == false ? nil : "#{field}_until"
 
   - if field == :published
-    == cell('folio/console/ui/warning_ribbon',
-            t('.unpublished'),
-            class: "f-c-publishable-inputs-item__warning-ribbon")
+    == render_view_component(Folio::Console::Ui::WarningRibbonComponent.new(text: t('.unpublished'),
+                                                                            class_name: "f-c-publishable-inputs-item__warning-ribbon"))
diff --git a/app/cells/folio/console/ui/warning_ribbon/show.slim b/app/cells/folio/console/ui/warning_ribbon/show.slim
deleted file mode 100644
index 437731d109..0000000000
--- a/app/cells/folio/console/ui/warning_ribbon/show.slim
+++ /dev/null
@@ -1,5 +0,0 @@
-.f-c-ui-warning-ribbon class=options[:class]
-  == cell('folio/console/ui/with_icon',
-          model,
-          icon: :alert,
-          icon_options: { width: 16 })
diff --git a/app/cells/folio/console/ui/warning_ribbon_cell.rb b/app/cells/folio/console/ui/warning_ribbon_cell.rb
deleted file mode 100644
index fc5d339dfc..0000000000
--- a/app/cells/folio/console/ui/warning_ribbon_cell.rb
+++ /dev/null
@@ -1,4 +0,0 @@
-# frozen_string_literal: true
-
-class Folio::Console::Ui::WarningRibbonCell < Folio::ConsoleCell
-end
diff --git a/app/cells/folio/console/ui/with_icon/show.slim b/app/cells/folio/console/ui/with_icon/show.slim
deleted file mode 100644
index 4ec04b34c9..0000000000
--- a/app/cells/folio/console/ui/with_icon/show.slim
+++ /dev/null
@@ -1,10 +0,0 @@
-*tag
-  - if options[:icon]
-    = folio_icon(options[:icon], options[:icon_options] || {})
-
-  span.f-c-ui-with-icon__span = model
-
-  - if options[:right_icon]
-    = folio_icon(options[:right_icon], options[:icon_options] || {})
-
-  == options[:html]
diff --git a/app/cells/folio/console/ui/with_icon_cell.rb b/app/cells/folio/console/ui/with_icon_cell.rb
deleted file mode 100644
index f06c36d0b5..0000000000
--- a/app/cells/folio/console/ui/with_icon_cell.rb
+++ /dev/null
@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-class Folio::Console::Ui::WithIconCell < Folio::ConsoleCell
-  class_name "f-c-ui-with-icon"
-
-  def tag
-    h = options[:tag] || {}
-
-    h[:class] = "#{class_name} #{options[:class]}"
-    h[:tag] ||= :span
-    h[:data] = options[:data]
-    h[:title] = options[:title]
-
-    if options[:hover] == :underline
-      h[:class] += " f-c-ui-with-icon--hover-underline"
-    end
-
-    if options[:block]
-      h[:class] += " d-flex"
-    end
-
-    if options[:href]
-      h[:tag] = :a
-      h[:target] = options[:target]
-      h[:href] = options[:href]
-    end
-
-    h
-  end
-end
diff --git a/app/components/folio/console/audited/bar_component.slim b/app/components/folio/console/audited/bar_component.slim
index 6e71186a89..d1826b8457 100644
--- a/app/components/folio/console/audited/bar_component.slim
+++ b/app/components/folio/console/audited/bar_component.slim
@@ -10,9 +10,8 @@
                                                            href: restore_url,
                                                            data: { confirm: t("folio.console.confirmation"), method: :post }))
 
-      == cell('folio/console/ui/with_icon',
-              t('.show_current'),
-              href: show_url,
-              right_icon: :close,
-              icon_options: { height: 16 },
-              class: "f-c-audited-bar__current-link small")
+      = render(Folio::Console::Ui::WithIconComponent.new(t('.show_current'),
+                                                          href: show_url,
+                                                          right_icon: :close,
+                                                          icon_options: { height: 16 },
+                                                          html_class: "f-c-audited-bar__current-link small"))
diff --git a/app/components/folio/console/audited/dropdown_component.slim b/app/components/folio/console/audited/dropdown_component.slim
index c832626959..a6d428ba8e 100644
--- a/app/components/folio/console/audited/dropdown_component.slim
+++ b/app/components/folio/console/audited/dropdown_component.slim
@@ -1,22 +1,20 @@
 .f-c-audited-dropdown.small.text-muted
   - unless @audit
-    == cell('folio/console/ui/with_icon',
-            t('.back'),
-            title: t('.back'),
-            href: @audits[1] ? version_url(@audits[1], 1) : nil,
-            icon: :arrow_u_left_top,
-            icon_options: { height: 16 },
-            class: "f-c-audited-dropdown__back #{@audits[1] ? "f-c-audited-dropdown__back--enabled" : "f-c-audited-dropdown__back--disabled"} small text-reset")
+    = render(Folio::Console::Ui::WithIconComponent.new(t('.back'),
+                                                          title: t('.back'),
+                                                          href: @audits[1] ? version_url(@audits[1], 1) : nil,
+                                                          icon: :arrow_u_left_top,
+                                                          icon_options: { height: 16 },
+                                                          html_class: "f-c-audited-dropdown__back #{@audits[1] ? "f-c-audited-dropdown__back--enabled" : "f-c-audited-dropdown__back--disabled"} small text-reset"))
 
   .f-c-audited-dropdown__dropdown.dropdown
     .f-c-audited-dropdown__toggle.dropdown-toggle[
       data-bs-toggle="dropdown"
     ]
-      == cell('folio/console/ui/with_icon',
-              t('.toggle'),
-              hover: :underline,
-              icon: :history,
-              icon_options: { height: 16 })
+      = render(Folio::Console::Ui::WithIconComponent.new(t('.toggle'),
+                                                          hover: :underline,
+                                                          icon: :history,
+                                                          icon_options: { height: 16 }))
 
     .dropdown-menu.dropdown-menu-right.f-c-audited-dropdown__menu.py-0
       - @audits.each_with_index do |version, i|
diff --git a/app/components/folio/console/catalogue_sort_arrows_component.rb b/app/components/folio/console/catalogue_sort_arrows_component.rb
new file mode 100644
index 0000000000..f16586f0a4
--- /dev/null
+++ b/app/components/folio/console/catalogue_sort_arrows_component.rb
@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+class Folio::Console::CatalogueSortArrowsComponent < Folio::Console::ApplicationComponent
+  bem_class_name :active, :desc
+
+  def initialize(klass:, attr:)
+    @klass = klass
+    @attr = attr
+  end
+
+  def render?
+    return false unless @klass.present?
+
+    @klass.respond_to?("sort_by_#{asc_key}") && @klass.respond_to?("sort_by_#{desc_key}")
+  end
+
+  def url
+    h = request.query_parameters.dup
+    h.delete("page")
+
+    if asc?
+      h["sort"] = desc_key
+    else
+      h["sort"] = asc_key
+    end
+
+    "#{request.path}?#{h.to_query}"
+  end
+
+  def active?
+    @active
+  end
+
+  def asc?
+    @asc
+  end
+
+  def desc?
+    @desc
+  end
+
+  def title
+    if active?
+      t(".sort_desc")
+    else
+      t(".sort_asc")
+    end
+  end
+
+  private
+    def before_render
+      @asc = controller.params[:sort] == asc_key
+      @desc = controller.params[:sort] == desc_key
+      @active = @asc || @desc
+    end
+
+    def asc_key
+      @asc_key ||= "#{@attr}_asc"
+    end
+
+    def desc_key
+      @desc_key ||= "#{@attr}_desc"
+    end
+end
diff --git a/app/cells/folio/console/catalogue_sort_arrows/catalogue_sort_arrows.sass b/app/components/folio/console/catalogue_sort_arrows_component.sass
similarity index 99%
rename from app/cells/folio/console/catalogue_sort_arrows/catalogue_sort_arrows.sass
rename to app/components/folio/console/catalogue_sort_arrows_component.sass
index a7648bf3be..5464e50c0b 100644
--- a/app/cells/folio/console/catalogue_sort_arrows/catalogue_sort_arrows.sass
+++ b/app/components/folio/console/catalogue_sort_arrows_component.sass
@@ -38,3 +38,4 @@
 
   &--desc &__inner
     transform: rotate(180deg)
+
diff --git a/app/cells/folio/console/catalogue_sort_arrows/show.slim b/app/components/folio/console/catalogue_sort_arrows_component.slim
similarity index 85%
rename from app/cells/folio/console/catalogue_sort_arrows/show.slim
rename to app/components/folio/console/catalogue_sort_arrows_component.slim
index a500a09aac..f69c49b44a 100644
--- a/app/cells/folio/console/catalogue_sort_arrows/show.slim
+++ b/app/components/folio/console/catalogue_sort_arrows_component.slim
@@ -1,5 +1,5 @@
 a[
-  class=class_name
+  class=bem_class_name
   href=url
   title=title
 ]
diff --git a/app/components/folio/console/form/footer_component.slim b/app/components/folio/console/form/footer_component.slim
index a0b9655ae1..221a262d99 100644
--- a/app/components/folio/console/form/footer_component.slim
+++ b/app/components/folio/console/form/footer_component.slim
@@ -39,10 +39,9 @@ div[
                 span.folio-loader.folio-loader--tiny
 
               .f-c-form-footer__status-unsaved.small.text-danger
-                == cell('folio/console/ui/with_icon',
-                        t('.unsaved_changes'),
-                        icon: :alert,
-                        icon_options: { height: 16 })
+                = render(Folio::Console::Ui::WithIconComponent.new(t('.unsaved_changes'),
+                                                                    icon: :alert,
+                                                                    icon_options: { height: 16 }))
 
       .f-c-form-footer__right
         - if preview_path_with_default
@@ -70,11 +69,10 @@ div[
                 .f-c-form-footer__settings-toggle.small.text-muted[
                   data=stimulus_action_unless_readonly(click: "toggleSettings")
                 ]
-                  == cell('folio/console/ui/with_icon',
-                          t('.settings'),
-                          hover: :underline,
-                          icon: :cog,
-                          icon_options: { height: 16 })
+                  = render(Folio::Console::Ui::WithIconComponent.new(t('.settings'),
+                                                                      hover: :underline,
+                                                                      icon: :cog,
+                                                                      icon_options: { height: 16 }))
 
                 .f-c-form-footer__settings-backdrop[
                   data=stimulus_action_unless_readonly(click: "toggleSettings")
@@ -85,11 +83,10 @@ div[
 
               - if @share_preview
                 .f-c-form-footer__share.small.text-muted data=stimulus_modal_toggle(Folio::Console::SharePreviewModalComponent::CLASS_NAME)
-                  == cell('folio/console/ui/with_icon',
-                          t('.share'),
-                          hover: :underline,
-                          icon: :link,
-                          icon_options: { height: 16 })
+                  = render(Folio::Console::Ui::WithIconComponent.new(t('.share'),
+                                                                      hover: :underline,
+                                                                      icon: :link,
+                                                                      icon_options: { height: 16 }))
 
             = render(Folio::Console::Ui::ButtonComponent.new(class_name: 'f-c-form-footer__btn f-c-form-footer__btn--collapsible',
                                                              variant: :gray,
diff --git a/app/components/folio/console/ui/dropdown_component.rb b/app/components/folio/console/ui/dropdown_component.rb
index eadd934f5d..d0441376ff 100644
--- a/app/components/folio/console/ui/dropdown_component.rb
+++ b/app/components/folio/console/ui/dropdown_component.rb
@@ -26,15 +26,14 @@ def cell_content_for_link(link)
         link[:data]
       end
 
-      cell("folio/console/ui/with_icon",
-           link[:label],
-           href: link[:href],
-           class: "dropdown-item #{"f-c-index-actions__link--disabled" if link[:disabled]}",
-           icon: link[:icon],
-           icon_options: { height: 18 }.merge(link[:icon_options] || {}),
-           block: true,
-           data:,
-           title: link[:title])
+      render(Folio::Console::Ui::WithIconComponent.new(link[:label],
+                                                         href: link[:href],
+                                                         html_class: "dropdown-item #{"f-c-index-actions__link--disabled" if link[:disabled]}",
+                                                         icon: link[:icon],
+                                                         icon_options: { height: 18 }.merge(link[:icon_options] || {}),
+                                                         block: true,
+                                                         data:,
+                                                         title: link[:title]))
     end
 
     def trigger_class_name
diff --git a/app/components/folio/console/ui/index/filters_component.slim b/app/components/folio/console/ui/index/filters_component.slim
index db9f30b48f..4913a8093c 100644
--- a/app/components/folio/console/ui/index/filters_component.slim
+++ b/app/components/folio/console/ui/index/filters_component.slim
@@ -33,21 +33,19 @@ div[
       .f-c-ui-index-filters__actions
         - if @collapsible
           .f-c-ui-index-filters__toggle-wrap
-            == cell('folio/console/ui/with_icon',
-                    t('.collapsible_toggle'),
-                    class: 'f-c-ui-index-filters__toggle small',
-                    data: stimulus_action(click: 'onToggleClick'),
-                    right_icon: :menu_down,
-                    icon_options: { height: 16 })
+            = render(Folio::Console::Ui::WithIconComponent.new(t('.collapsible_toggle'),
+                                                    html_class: 'f-c-ui-index-filters__toggle small',
+                                                    data: stimulus_action(click: 'onToggleClick'),
+                                                    right_icon: :menu_down,
+                                                    icon_options: { height: 16 }))
 
         .f-c-ui-index-filters__cancel-wrap[
           class=(filtered? ? nil : "f-c-ui-index-filters__cancel-wrap--hidden")
         ]
-          == cell('folio/console/ui/with_icon',
-                  t('.cancel'),
-                  href: cancel_url,
-                  icon: :close,
-                  icon_options: { height: 16 },
-                  class: "text-danger f-c-ui-index-filters__cancel small")
+          = render(Folio::Console::Ui::WithIconComponent.new(t('.cancel'),
+                                                               href: cancel_url,
+                                                               icon: :close,
+                                                               icon_options: { height: 16 },
+                                                               html_class: "text-danger f-c-ui-index-filters__cancel small"))
 
       = hidden_input(f, :by_label_query, { value: controller.params[:by_label_query] })
diff --git a/app/components/folio/console/ui/warning_ribbon_component.rb b/app/components/folio/console/ui/warning_ribbon_component.rb
new file mode 100644
index 0000000000..8d5b3c3d4f
--- /dev/null
+++ b/app/components/folio/console/ui/warning_ribbon_component.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Folio::Console::Ui::WarningRibbonComponent < Folio::Console::ApplicationComponent
+  def initialize(text:, class_name: nil)
+    @text = text
+    @class_name = class_name
+  end
+end
diff --git a/app/cells/folio/console/ui/warning_ribbon/warning_ribbon.sass b/app/components/folio/console/ui/warning_ribbon_component.sass
similarity index 100%
rename from app/cells/folio/console/ui/warning_ribbon/warning_ribbon.sass
rename to app/components/folio/console/ui/warning_ribbon_component.sass
diff --git a/app/components/folio/console/ui/warning_ribbon_component.slim b/app/components/folio/console/ui/warning_ribbon_component.slim
new file mode 100644
index 0000000000..e55879b8b8
--- /dev/null
+++ b/app/components/folio/console/ui/warning_ribbon_component.slim
@@ -0,0 +1,4 @@
+.f-c-ui-warning-ribbon class=@class_name
+  = render(Folio::Console::Ui::WithIconComponent.new(@text,
+                                                      icon: :alert,
+                                                      icon_options: { width: 16 }))
diff --git a/app/components/folio/console/ui/with_icon_component.rb b/app/components/folio/console/ui/with_icon_component.rb
new file mode 100644
index 0000000000..d415337a92
--- /dev/null
+++ b/app/components/folio/console/ui/with_icon_component.rb
@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class Folio::Console::Ui::WithIconComponent < Folio::Console::ApplicationComponent
+  def initialize(message = nil, icon: nil, icon_options: {}, right_icon: nil, html_class: nil, tag: :span, data: nil, title: nil, hover: nil, block: false, href: nil, target: nil, html: nil)
+    @message = message
+    @icon = icon
+    @icon_options = icon_options
+    @right_icon = right_icon
+    @html_class = html_class
+    @tag = tag
+    @data = data
+    @title = title
+    @hover = hover
+    @block = block
+    @href = href
+    @target = target
+    @html = html
+  end
+
+  def tag_name
+    @href ? :a : @tag
+  end
+
+  def tag_attributes
+    attrs = {}
+    attrs[:class] = class_name
+    attrs[:data] = @data if @data
+    attrs[:title] = @title if @title
+    attrs[:href] = @href if @href
+    attrs[:target] = @target if @target
+    attrs
+  end
+
+  def class_name
+    classes = ["f-c-ui-with-icon"]
+    classes << @html_class if @html_class
+    classes << "f-c-ui-with-icon--hover-underline" if @hover == :underline
+    classes << "d-flex" if @block
+    classes.join(" ")
+  end
+end
diff --git a/app/cells/folio/console/ui/with_icon/with_icon.sass b/app/components/folio/console/ui/with_icon_component.sass
similarity index 100%
rename from app/cells/folio/console/ui/with_icon/with_icon.sass
rename to app/components/folio/console/ui/with_icon_component.sass
diff --git a/app/components/folio/console/ui/with_icon_component.slim b/app/components/folio/console/ui/with_icon_component.slim
new file mode 100644
index 0000000000..8bf1e0759b
--- /dev/null
+++ b/app/components/folio/console/ui/with_icon_component.slim
@@ -0,0 +1,12 @@
+*{tag: tag_name, **tag_attributes}
+  - if @icon
+    = folio_icon(@icon, @icon_options || {})
+
+  - if @message.present?
+    span.f-c-ui-with-icon__span = @message
+
+  - if @right_icon
+    = folio_icon(@right_icon, @icon_options || {})
+
+  - if @html
+    == @html
diff --git a/app/views/folio/console/partials/_simple_form_with_atoms.slim b/app/views/folio/console/partials/_simple_form_with_atoms.slim
index 7dbb9f616e..3546406347 100644
--- a/app/views/folio/console/partials/_simple_form_with_atoms.slim
+++ b/app/views/folio/console/partials/_simple_form_with_atoms.slim
@@ -6,10 +6,9 @@
           class="f-c-simple-form-with-atoms__title"
           class='f-c-simple-form-with-atoms__title--clickable'
         ]
-          == cell('folio/console/ui/with_icon',
-                  t('.settings'),
-                  icon: :cog,
-                  html: content_tag(:div, "", class: "f-c-simple-form-with-atoms__title-arrow"))
+          = render(Folio::Console::Ui::WithIconComponent.new(t('.settings'),
+                                                               icon: :cog,
+                                                               html: content_tag(:div, "", class: "f-c-simple-form-with-atoms__title-arrow")))
 
         .f-c-simple-form-with-atoms__form-scroll[
           class="f-c-simple-form-with-atoms__dirty-wrap"
@@ -58,9 +57,8 @@
               .f-c-simple-form-with-atoms__title.container-fluid[
                 class=(index > 0 ? 'invisible' : nil)
               ]
-                == cell('folio/console/ui/with_icon',
-                        t('.editor'),
-                        icon: :view_dashboard_variant_outline)
+                = render(Folio::Console::Ui::WithIconComponent.new(t('.editor'),
+                                                                    icon: :view_dashboard_variant_outline))
 
                 - if index.zero?
                   - keys.each_with_index do |key, i|
diff --git a/app/views/folio/console/ui/warning_ribbons.slim b/app/views/folio/console/ui/warning_ribbons.slim
index 52a2cf4871..abd63d6d21 100644
--- a/app/views/folio/console/ui/warning_ribbons.slim
+++ b/app/views/folio/console/ui/warning_ribbons.slim
@@ -4,7 +4,7 @@ h2 Warning ribbon
 
 h3 Standalone
 
-== cell('folio/console/ui/warning_ribbon', 'Warning text')
+= render(Folio::Console::Ui::WarningRibbonComponent.new(text: 'Warning text'))
 
 h3 Publishable inputs
 
diff --git a/config/locales/console.cs.yml b/config/locales/console.cs.yml
index 086b0c3cff..4954e2553b 100644
--- a/config/locales/console.cs.yml
+++ b/config/locales/console.cs.yml
@@ -350,7 +350,7 @@ cs:
           in: Nahradit z YAML
           out: Uložit do YAML
           in_new: Vytvořit nový z YAML
-      catalogue_sort_arrows:
+      catalogue_sort_arrows_component:
         sort_asc: Řadit vzestupně
         sort_desc: Řadit sestupně
       catalogue:
diff --git a/config/locales/console.en.yml b/config/locales/console.en.yml
index 9e109e2744..fbdb38ba25 100644
--- a/config/locales/console.en.yml
+++ b/config/locales/console.en.yml
@@ -346,7 +346,7 @@ en:
           in: Replace from YAML
           out: Save to YAML
           in_new: Create new from YAML
-      catalogue_sort_arrows:
+      catalogue_sort_arrows_component:
         sort_asc: Ascending sort
         sort_desc: Descending sort
       catalogue:
diff --git a/test/cells/folio/console/catalogue_sort_arrows_cell_test.rb b/test/cells/folio/console/catalogue_sort_arrows_cell_test.rb
deleted file mode 100644
index 2ce7ecd004..0000000000
--- a/test/cells/folio/console/catalogue_sort_arrows_cell_test.rb
+++ /dev/null
@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-require "test_helper"
-
-class Folio::Console::CatalogueSortArrowsCellTest < Folio::Console::CellTest
-  class SortablePage < Folio::Page
-    scope :sort_by_title_asc, -> { order(title: :asc) }
-    scope :sort_by_title_desc, -> { order(title: :desc) }
-  end
-
-  test "show" do
-    html = cell("folio/console/catalogue_sort_arrows", klass: Folio::Page, attr: :title).(:show)
-    assert_not html.has_css?(".f-c-catalogue-sort-arrows")
-
-    html = cell("folio/console/catalogue_sort_arrows", klass: SortablePage, attr: :title).(:show)
-    assert html.has_css?(".f-c-catalogue-sort-arrows")
-  end
-end
diff --git a/test/cells/folio/console/ui/warning_ribbon_cell_test.rb b/test/cells/folio/console/ui/warning_ribbon_cell_test.rb
deleted file mode 100644
index 5ef5598bf6..0000000000
--- a/test/cells/folio/console/ui/warning_ribbon_cell_test.rb
+++ /dev/null
@@ -1,10 +0,0 @@
-# frozen_string_literal: true
-
-require "test_helper"
-
-class Folio::Console::Ui::WarningRibbonCellTest < Folio::Console::CellTest
-  test "show" do
-    html = cell("folio/console/ui/warning_ribbon", "foo").(:show)
-    assert html.has_css?(".f-c-ui-warning-ribbon")
-  end
-end
diff --git a/test/components/folio/console/catalogue_sort_arrows_component_test.rb b/test/components/folio/console/catalogue_sort_arrows_component_test.rb
new file mode 100644
index 0000000000..05dfde7c37
--- /dev/null
+++ b/test/components/folio/console/catalogue_sort_arrows_component_test.rb
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Folio::Console::CatalogueSortArrowsComponentTest < Folio::Console::ComponentTest
+  class SortablePage < Folio::Page
+    scope :sort_by_title_asc, -> { order(title: :asc) }
+    scope :sort_by_title_desc, -> { order(title: :desc) }
+  end
+
+  test "render? returns false when klass does not have sort scopes" do
+    component = Folio::Console::CatalogueSortArrowsComponent.new(klass: Folio::Page, attr: :title)
+
+    assert_not component.render?
+  end
+
+  test "render? returns true when klass has sort scopes" do
+    component = Folio::Console::CatalogueSortArrowsComponent.new(klass: SortablePage, attr: :title)
+
+    assert component.render?
+  end
+
+  test "render" do
+    with_controller_class(Folio::Console::BaseController) do
+      with_request_url "/console" do
+        component = Folio::Console::CatalogueSortArrowsComponent.new(klass: SortablePage, attr: :title)
+
+        render_inline(component)
+
+        assert_selector(".f-c-catalogue-sort-arrows")
+      end
+    end
+  end
+end
diff --git a/test/components/folio/console/ui/warning_ribbon_component_test.rb b/test/components/folio/console/ui/warning_ribbon_component_test.rb
new file mode 100644
index 0000000000..726ee3094c
--- /dev/null
+++ b/test/components/folio/console/ui/warning_ribbon_component_test.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Folio::Console::Ui::WarningRibbonComponentTest < Folio::Console::ComponentTest
+  test "show" do
+    render_inline(Folio::Console::Ui::WarningRibbonComponent.new(text: "foo"))
+    assert_selector(".f-c-ui-warning-ribbon")
+  end
+end
diff --git a/test/components/folio/console/ui/with_icon_component_test.rb b/test/components/folio/console/ui/with_icon_component_test.rb
new file mode 100644
index 0000000000..e8a416a57b
--- /dev/null
+++ b/test/components/folio/console/ui/with_icon_component_test.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Folio::Console::Ui::WithIconComponentTest < Folio::Console::ComponentTest
+  test "show" do
+    with_controller_class(Folio::Console::BaseController) do
+      with_request_url "/console" do
+        render_inline(Folio::Console::Ui::WithIconComponent.new)
+        assert_selector(".f-c-ui-with-icon")
+        assert_no_selector(".f-ui-icon")
+
+        render_inline(Folio::Console::Ui::WithIconComponent.new("foo"))
+        assert_selector(".f-c-ui-with-icon")
+        assert_text("foo")
+        assert_no_selector(".f-ui-icon")
+
+        render_inline(Folio::Console::Ui::WithIconComponent.new("foo", icon: :delete))
+        assert_selector(".f-c-ui-with-icon")
+        assert_text("foo")
+        assert_selector(".f-ui-icon")
+      end
+    end
+  end
+end