diff --git a/app/components/avatar_component.html.haml b/app/components/avatar_component.html.haml
new file mode 100644
index 00000000..379979c6
--- /dev/null
+++ b/app/components/avatar_component.html.haml
@@ -0,0 +1,4 @@
+%img{ class: avatar_classes,
+      alt: alt_text,
+      src: avatar_image,
+      loading: :lazy }
diff --git a/app/components/avatar_component.rb b/app/components/avatar_component.rb
new file mode 100644
index 00000000..c970576a
--- /dev/null
+++ b/app/components/avatar_component.rb
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class AvatarComponent < ViewComponent::Base
+  ALLOWED_SIZES = %w[xs sm md lg xl xxl].freeze
+
+  def initialize(user:, size:, classes: [])
+    @user = user
+    @size = size if ALLOWED_SIZES.include? size
+    @classes = classes
+  end
+
+  private
+
+  def size_to_version(size)
+    case size
+    when "xs", "sm"
+      :small
+    when "md", "lg"
+      :medium
+    when "xl", "xxl"
+      :large
+    end
+  end
+
+  def alt_text = "@#{@user.screen_name}"
+
+  def avatar_classes = @classes.unshift("avatar-#{@size}")
+
+  def avatar_image = @user.profile_picture.url(size_to_version(@size))
+end