diff --git a/app/components/comments/avatar_component.html.erb b/app/components/comments/avatar_component.html.erb
new file mode 100644
index 000000000..ea3a2c379
--- /dev/null
+++ b/app/components/comments/avatar_component.html.erb
@@ -0,0 +1,13 @@
+<% if comment.as_administrator? %>
+  <%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left") %>
+<% elsif comment.as_moderator? %>
+  <%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar float-left") %>
+<% else %>
+<% if comment.user.hidden? || comment.user.erased? %>
+    <span class="icon-deleted user-deleted"></span>
+  <% elsif comment.user.organization? %>
+    <%= image_tag("avatar_collective.png", size: 32, class: "avatar float-left") %>
+  <% else %>
+    <%= render Shared::AvatarComponent.new(comment.user, size: 32, class: "float-left") %>
+  <% end %>
+<% end %>
diff --git a/app/components/comments/avatar_component.rb b/app/components/comments/avatar_component.rb
new file mode 100644
index 000000000..d39fd9f2b
--- /dev/null
+++ b/app/components/comments/avatar_component.rb
@@ -0,0 +1,7 @@
+class Comments::AvatarComponent < ApplicationComponent
+  attr_reader :comment
+
+  def initialize(comment)
+    @comment = comment
+  end
+end
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index 7b7a67c6e..aafcb2b9d 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -9,19 +9,7 @@
           </div>
         <% end %>
       <% else %>
-        <% if comment.as_administrator? %>
-          <%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left") %>
-        <% elsif comment.as_moderator? %>
-          <%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar float-left") %>
-        <% else %>
-        <% if comment.user.hidden? || comment.user.erased? %>
-            <span class="icon-deleted user-deleted"></span>
-          <% elsif comment.user.organization? %>
-            <%= image_tag("avatar_collective.png", size: 32, class: "avatar float-left") %>
-          <% else %>
-            <%= render Shared::AvatarComponent.new(comment.user, size: 32, class: "float-left") %>
-          <% end %>
-        <% end %>
+        <%= render Comments::AvatarComponent.new(comment) %>
 
         <div class="comment-info">
 
diff --git a/spec/components/comments/avatar_component_spec.rb b/spec/components/comments/avatar_component_spec.rb
new file mode 100644
index 000000000..173a24c44
--- /dev/null
+++ b/spec/components/comments/avatar_component_spec.rb
@@ -0,0 +1,56 @@
+require "rails_helper"
+
+describe Comments::AvatarComponent do
+  it "displays a regular avatar for regular comments" do
+    comment = create(:comment, user: create(:user, username: "Oscar Wilde"))
+
+    render_inline Comments::AvatarComponent.new(comment)
+
+    expect(page).to have_avatar "O"
+    expect(page).not_to have_css "img"
+  end
+
+  it "displays the admin avatar for admin comments" do
+    admin = create(:administrator)
+    comment = create(:comment, user: admin.user, administrator_id: admin.id)
+
+    render_inline Comments::AvatarComponent.new(comment)
+
+    expect(page).to have_css "img.admin-avatar"
+  end
+
+  it "displays the moderator avatar for moderator comments" do
+    moderator = create(:moderator)
+    comment = create(:comment, user: moderator.user, moderator_id: moderator.id)
+
+    render_inline Comments::AvatarComponent.new(comment)
+
+    expect(page).to have_css "img.moderator-avatar"
+  end
+
+  it "displays the organization avatar for organization comments" do
+    comment = create(:comment, user: create(:organization).user)
+
+    render_inline Comments::AvatarComponent.new(comment)
+
+    expect(page).to have_css "img.avatar"
+  end
+
+  it "displays an empty icon for comments by hidden users" do
+    comment = create(:comment, user: create(:user, :hidden))
+
+    render_inline Comments::AvatarComponent.new(comment)
+
+    expect(page).to have_css ".user-deleted"
+    expect(page).not_to have_css "img"
+  end
+
+  it "displays an empty icon for comments by erased users" do
+    comment = create(:comment, user: create(:user, erased_at: Time.current))
+
+    render_inline Comments::AvatarComponent.new(comment)
+
+    expect(page).to have_css ".user-deleted"
+    expect(page).not_to have_css "img"
+  end
+end
diff --git a/spec/support/matchers/have_avatar.rb b/spec/support/matchers/have_avatar.rb
index b41ed1372..f45895e84 100644
--- a/spec/support/matchers/have_avatar.rb
+++ b/spec/support/matchers/have_avatar.rb
@@ -1,6 +1,6 @@
 RSpec::Matchers.define :have_avatar do |text, **options|
-  match do
-    has_css?("svg.initialjs-avatar", **{ exact_text: text }.merge(options))
+  match do |page|
+    page.has_css?("svg.initialjs-avatar", **{ exact_text: text }.merge(options))
   end
 
   failure_message do