diff --git a/demo/Ursa.Demo/Pages/AvatarDemo.axaml b/demo/Ursa.Demo/Pages/AvatarDemo.axaml
new file mode 100644
index 0000000..1a07543
--- /dev/null
+++ b/demo/Ursa.Demo/Pages/AvatarDemo.axaml
@@ -0,0 +1,96 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:u="https://irihi.tech/ursa"
+             xmlns:vm="clr-namespace:Ursa.Demo.ViewModels"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Ursa.Demo.Pages.AvatarDemo">
+    <Design.DataContext>
+        <vm:AvatarDemoViewModel />
+    </Design.DataContext>
+    <UserControl.Resources>
+        <StreamGeometry x:Key="IconCamera">M7.44721 3.10557C7.786 2.428 8.47852 2 9.23607 2H14.7639C15.5215 2 16.214 2.428 16.5528 3.10557L17.5 5H20C21.6569 5 23 6.34315 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V8C1 6.34315 2.34315 5 4 5H6.5L7.44721 3.10557ZM9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13ZM12 8C9.23858 8 7 10.2386 7 13C7 15.7614 9.23858 18 12 18C14.7614 18 17 15.7614 17 13C17 10.2386 14.7614 8 12 8Z</StreamGeometry>
+    </UserControl.Resources>
+    <UserControl.Styles>
+        <Style Selector="u|Avatar">
+            <Setter Property="Content" Value="{Binding Content}" />
+            <Setter Property="Command" Value="{Binding ClickCommand}" />
+        </Style>
+    </UserControl.Styles>
+    <StackPanel>
+        <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
+            <u:Avatar />
+            <u:Avatar Classes="Red">
+                <u:Avatar.HoverMask>
+                    <Border Opacity="0.6">
+                        <Panel>
+                            <Border
+                                Background="#16161A"
+                                Width="{Binding $parent[u:Avatar].Width}"
+                                Height="{Binding $parent[u:Avatar].Height}" />
+                            <PathIcon
+                                Data="{StaticResource IconCamera}"
+                                Width="{Binding $parent[u:Avatar].FontSize}"
+                                Height="{Binding $parent[u:Avatar].FontSize}" />
+                        </Panel>
+                    </Border>
+                </u:Avatar.HoverMask>
+            </u:Avatar>
+            <u:Avatar Source="../Assets/Ursa.ico" />
+            <u:Avatar Source="../Assets/IRIHI.png" />
+            <u:Avatar Source="../Assets/WORLD.png" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <u:Avatar Classes="Red" />
+            <u:Avatar Classes="Pink" />
+            <u:Avatar Classes="Purple" />
+            <u:Avatar Classes="Violet" />
+            <u:Avatar Classes="Indigo" />
+            <u:Avatar Classes="Blue" />
+            <u:Avatar Classes="LightBlue" />
+            <u:Avatar Classes="Cyan" />
+            <u:Avatar Classes="Teal" />
+            <u:Avatar Classes="Green" />
+            <u:Avatar Classes="LightGreen" />
+            <u:Avatar Classes="Lime" />
+            <u:Avatar Classes="Yellow" />
+            <u:Avatar Classes="Amber" />
+            <u:Avatar Classes="Orange" />
+            <u:Avatar Classes="Grey" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <u:Avatar Classes="ExtraExtraSmall" />
+            <u:Avatar Classes="ExtraSmall" />
+            <u:Avatar Classes="Small" />
+            <u:Avatar Classes="Default" />
+            <u:Avatar Classes="Medium" />
+            <u:Avatar Classes="Large" />
+            <u:Avatar Classes="ExtraLarge" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <u:Avatar Classes="Square ExtraExtraSmall Green" />
+            <u:Avatar Classes="Square ExtraSmall Green" />
+            <u:Avatar Classes="Square Small Green" />
+            <u:Avatar Classes="Square Default Green" />
+            <u:Avatar Classes="Square Medium Green" />
+            <u:Avatar Classes="Square Large Green" />
+            <u:Avatar Classes="Square ExtraLarge Green" Source="../Assets/Ursa.ico">
+                <u:Avatar.HoverMask>
+                    <Border Opacity="0.6">
+                        <Panel>
+                            <Border
+                                Background="#16161A"
+                                Width="{Binding $parent[u:Avatar].Width}"
+                                Height="{Binding $parent[u:Avatar].Height}" />
+                            <PathIcon
+                                Data="{StaticResource IconCamera}"
+                                Width="{Binding $parent[u:Avatar].FontSize}"
+                                Height="{Binding $parent[u:Avatar].FontSize}" />
+                        </Panel>
+                    </Border>
+                </u:Avatar.HoverMask>
+            </u:Avatar>
+        </StackPanel>
+    </StackPanel>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Ursa.Demo/Pages/AvatarDemo.axaml.cs b/demo/Ursa.Demo/Pages/AvatarDemo.axaml.cs
new file mode 100644
index 0000000..5bc2485
--- /dev/null
+++ b/demo/Ursa.Demo/Pages/AvatarDemo.axaml.cs
@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class AvatarDemo : UserControl
+{
+    public AvatarDemo()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/AvatarDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/AvatarDemoViewModel.cs
new file mode 100644
index 0000000..6717d41
--- /dev/null
+++ b/demo/Ursa.Demo/ViewModels/AvatarDemoViewModel.cs
@@ -0,0 +1,16 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class AvatarDemoViewModel : ViewModelBase
+{
+    [ObservableProperty] private string _content = "AS";
+    [ObservableProperty] private bool _canClick = true;
+
+    [RelayCommand(CanExecute = nameof(CanClick))]
+    private void Click()
+    {
+        Content = "BM";
+    }
+}
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
index cabccf6..4bd2bab 100644
--- a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
@@ -25,6 +25,7 @@ public class MainViewViewModel : ViewModelBase
         Content = s switch
         {
             MenuKeys.MenuKeyIntroduction => new IntroductionDemoViewModel(),
+            MenuKeys.MenuKeyAvatar => new AvatarDemoViewModel(),
             MenuKeys.MenuKeyBadge => new BadgeDemoViewModel(),
             MenuKeys.MenuKeyBanner => new BannerDemoViewModel(),
             MenuKeys.MenuKeyButtonGroup => new ButtonGroupDemoViewModel(),
diff --git a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
index 9734638..d6af864 100644
--- a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs
@@ -12,6 +12,7 @@ public class MenuViewModel: ViewModelBase
         {
             new() { MenuHeader = "Introduction", Key = MenuKeys.MenuKeyIntroduction, IsSeparator = false },
             new() { MenuHeader = "Controls", IsSeparator = true },
+            new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP"},
             new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
             new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
             new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb },
@@ -60,6 +61,7 @@ public class MenuViewModel: ViewModelBase
 public static class MenuKeys
 {
     public const string MenuKeyIntroduction = "Introduction";
+    public const string MenuKeyAvatar = "Avatar";
     public const string MenuKeyBadge = "Badge";
     public const string MenuKeyBanner = "Banner";
     public const string MenuKeyButtonGroup = "ButtonGroup";
diff --git a/src/Ursa.Themes.Semi/Controls/Avatar.axaml b/src/Ursa.Themes.Semi/Controls/Avatar.axaml
new file mode 100644
index 0000000..4fe9705
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Controls/Avatar.axaml
@@ -0,0 +1,140 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa">
+    <converters:DivideByTwoConverter x:Key="DivideByTwoConverter" />
+    <ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}">
+        <Setter Property="Foreground" Value="{DynamicResource AvatarForeground}" />
+        <Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" />
+        <Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" />
+        <Setter Property="FontWeight" Value="{DynamicResource AvatarFontWeight}" />
+        <Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" />
+        <Setter Property="Height" Value="{Binding $self.Width}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="CornerRadius" Value="{DynamicResource AvatarCircleCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type u:Avatar}">
+                <Border
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    ClipToBounds="True">
+                    <Panel>
+                        <Border
+                            IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Background="{TemplateBinding Background}" />
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Content="{TemplateBinding Content}"
+                            HorizontalContentAlignment="Center"
+                            VerticalContentAlignment="Center" />
+                        <Image Source="{TemplateBinding Source}" />
+                        <ContentPresenter
+                            Name="PART_HoverMask"
+                            IsVisible="False"
+                            Content="{TemplateBinding HoverMask}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            HorizontalContentAlignment="Center"
+                            VerticalContentAlignment="Center" />
+                    </Panel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_HoverMask">
+            <Setter Property="IsVisible"
+                    Value="{Binding HoverMask,RelativeSource={RelativeSource TemplatedParent},
+                        Converter={x:Static ObjectConverters.IsNotNull}}" />
+        </Style>
+        <Style Selector="^.Red">
+            <Setter Property="Background" Value="{DynamicResource AvatarRedBackground}" />
+        </Style>
+        <Style Selector="^.Pink">
+            <Setter Property="Background" Value="{DynamicResource AvatarPinkBackground}" />
+        </Style>
+        <Style Selector="^.Purple">
+            <Setter Property="Background" Value="{DynamicResource AvatarPurpleBackground}" />
+        </Style>
+        <Style Selector="^.Violet">
+            <Setter Property="Background" Value="{DynamicResource AvatarVioletBackground}" />
+        </Style>
+        <Style Selector="^.Indigo">
+            <Setter Property="Background" Value="{DynamicResource AvatarIndigoBackground}" />
+        </Style>
+        <Style Selector="^.Blue">
+            <Setter Property="Background" Value="{DynamicResource AvatarBlueBackground}" />
+        </Style>
+        <Style Selector="^.LightBlue">
+            <Setter Property="Background" Value="{DynamicResource AvatarLightBlueBackground}" />
+        </Style>
+        <Style Selector="^.Cyan">
+            <Setter Property="Background" Value="{DynamicResource AvatarCyanBackground}" />
+        </Style>
+        <Style Selector="^.Teal">
+            <Setter Property="Background" Value="{DynamicResource AvatarTealBackground}" />
+        </Style>
+        <Style Selector="^.Green">
+            <Setter Property="Background" Value="{DynamicResource AvatarGreenBackground}" />
+        </Style>
+        <Style Selector="^.LightGreen">
+            <Setter Property="Background" Value="{DynamicResource AvatarLightGreenBackground}" />
+        </Style>
+        <Style Selector="^.Lime">
+            <Setter Property="Background" Value="{DynamicResource AvatarLimeBackground}" />
+        </Style>
+        <Style Selector="^.Yellow">
+            <Setter Property="Background" Value="{DynamicResource AvatarYellowBackground}" />
+        </Style>
+        <Style Selector="^.Amber">
+            <Setter Property="Background" Value="{DynamicResource AvatarAmberBackground}" />
+        </Style>
+        <Style Selector="^.Orange">
+            <Setter Property="Background" Value="{DynamicResource AvatarOrangeBackground}" />
+        </Style>
+        <Style Selector="^.Grey">
+            <Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" />
+        </Style>
+
+        <Style Selector="^.Square">
+            <Setter Property="CornerRadius" Value="{DynamicResource AvatarSquareCornerRadius}" />
+        </Style>
+
+        <Style Selector="^.ExtraExtraSmall">
+            <Setter Property="Width" Value="{DynamicResource AvatarExtraExtraSmallWidth}" />
+            <Setter Property="FontSize" Value="{DynamicResource AvatarExtraExtraSmallFontSize}" />
+        </Style>
+        <Style Selector="^.ExtraSmall">
+            <Setter Property="Width" Value="{DynamicResource AvatarExtraSmallWidth}" />
+            <Setter Property="FontSize" Value="{DynamicResource AvatarExtraSmallFontSize}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="Width" Value="{DynamicResource AvatarSmallWidth}" />
+            <Setter Property="FontSize" Value="{DynamicResource AvatarSmallFontSize}" />
+        </Style>
+        <Style Selector="^.Default">
+            <Setter Property="Width" Value="{DynamicResource AvatarDefaultWidth}" />
+            <Setter Property="FontSize" Value="{DynamicResource AvatarDefaultFontSize}" />
+        </Style>
+        <Style Selector="^.Medium">
+            <Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" />
+            <Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" />
+        </Style>
+        <Style Selector="^.Large">
+            <Setter Property="Width" Value="{DynamicResource AvatarLargeWidth}" />
+            <Setter Property="FontSize" Value="{DynamicResource AvatarLargeFontSize}" />
+            <Style Selector="^.Square">
+                <Setter Property="CornerRadius" Value="{DynamicResource AvatarLargeSquareCornerRadius}" />
+            </Style>
+        </Style>
+        <Style Selector="^.ExtraLarge">
+            <Setter Property="Width" Value="{DynamicResource AvatarExtraLargeWidth}" />
+            <Setter Property="FontSize" Value="{DynamicResource AvatarExtraLargeFontSize}" />
+            <Style Selector="^.Square">
+                <Setter Property="CornerRadius" Value="{DynamicResource AvatarExtraLargeSquareCornerRadius}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Controls/_index.axaml b/src/Ursa.Themes.Semi/Controls/_index.axaml
index 05be946..0345044 100644
--- a/src/Ursa.Themes.Semi/Controls/_index.axaml
+++ b/src/Ursa.Themes.Semi/Controls/_index.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
     <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="Avatar.axaml" />
         <ResourceInclude Source="Badge.axaml" />
         <ResourceInclude Source="Banner.axaml" />
         <ResourceInclude Source="ButtonGroup.axaml" />
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Avatar.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Avatar.axaml
new file mode 100644
index 0000000..53516aa
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Avatar.axaml
@@ -0,0 +1,19 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <SolidColorBrush x:Key="AvatarForeground" Color="White" />
+    <SolidColorBrush x:Key="AvatarRedBackground" Color="#D73324" />
+    <SolidColorBrush x:Key="AvatarPinkBackground" Color="#C72261" />
+    <SolidColorBrush x:Key="AvatarPurpleBackground" Color="#89289F" />
+    <SolidColorBrush x:Key="AvatarVioletBackground" Color="#6439B5" />
+    <SolidColorBrush x:Key="AvatarIndigoBackground" Color="#3444A3" />
+    <SolidColorBrush x:Key="AvatarBlueBackground" Color="#1D75DB" />
+    <SolidColorBrush x:Key="AvatarLightBlueBackground" Color="#0A81CC" />
+    <SolidColorBrush x:Key="AvatarCyanBackground" Color="#0E8999" />
+    <SolidColorBrush x:Key="AvatarTealBackground" Color="#0A9588" />
+    <SolidColorBrush x:Key="AvatarGreenBackground" Color="#32953D" />
+    <SolidColorBrush x:Key="AvatarLightGreenBackground" Color="#679934" />
+    <SolidColorBrush x:Key="AvatarLimeBackground" Color="#84B00C" />
+    <SolidColorBrush x:Key="AvatarYellowBackground" Color="#D2AF0F" />
+    <SolidColorBrush x:Key="AvatarAmberBackground" Color="#CA8F1E" />
+    <SolidColorBrush x:Key="AvatarOrangeBackground" Color="#D56F0F" />
+    <SolidColorBrush x:Key="AvatarGreyBackground" Color="#555B61" />
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
index 05efaed..91ca159 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
+        <MergeResourceInclude Source="Avatar.axaml" />
         <MergeResourceInclude Source="Badge.axaml" />
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="ButtonGroup.axaml" />
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Avatar.axaml b/src/Ursa.Themes.Semi/Themes/Light/Avatar.axaml
new file mode 100644
index 0000000..9080891
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Themes/Light/Avatar.axaml
@@ -0,0 +1,19 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <SolidColorBrush x:Key="AvatarForeground" Color="White" />
+    <SolidColorBrush x:Key="AvatarRedBackground" Color="#FB9078" />
+    <SolidColorBrush x:Key="AvatarPinkBackground" Color="#F27396" />
+    <SolidColorBrush x:Key="AvatarPurpleBackground" Color="#C96FD1" />
+    <SolidColorBrush x:Key="AvatarVioletBackground" Color="#A67FDD" />
+    <SolidColorBrush x:Key="AvatarIndigoBackground" Color="#8090D3" />
+    <SolidColorBrush x:Key="AvatarBlueBackground" Color="#65B2FC" />
+    <SolidColorBrush x:Key="AvatarLightBlueBackground" Color="#62C3F5" />
+    <SolidColorBrush x:Key="AvatarCyanBackground" Color="#58CBD3" />
+    <SolidColorBrush x:Key="AvatarTealBackground" Color="#54D1C1" />
+    <SolidColorBrush x:Key="AvatarGreenBackground" Color="#7DD182" />
+    <SolidColorBrush x:Key="AvatarLightGreenBackground" Color="#ADD37E" />
+    <SolidColorBrush x:Key="AvatarLimeBackground" Color="#B7E35B" />
+    <SolidColorBrush x:Key="AvatarYellowBackground" Color="#FCE865" />
+    <SolidColorBrush x:Key="AvatarAmberBackground" Color="#F6D86F" />
+    <SolidColorBrush x:Key="AvatarOrangeBackground" Color="#FDC165" />
+    <SolidColorBrush x:Key="AvatarGreyBackground" Color="#A7ABB0" />
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Light/_index.axaml b/src/Ursa.Themes.Semi/Themes/Light/_index.axaml
index 05efaed..91ca159 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/_index.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/_index.axaml
@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
+        <MergeResourceInclude Source="Avatar.axaml" />
         <MergeResourceInclude Source="Badge.axaml" />
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="ButtonGroup.axaml" />
diff --git a/src/Ursa.Themes.Semi/Themes/Shared/Avatar.axaml b/src/Ursa.Themes.Semi/Themes/Shared/Avatar.axaml
new file mode 100644
index 0000000..ebd81a4
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Themes/Shared/Avatar.axaml
@@ -0,0 +1,29 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <FontWeight x:Key="AvatarFontWeight">600</FontWeight>
+    <CornerRadius x:Key="AvatarCircleCornerRadius">100</CornerRadius>
+
+    <CornerRadius x:Key="AvatarSquareCornerRadius">3</CornerRadius>
+
+    <x:Double x:Key="AvatarExtraExtraSmallWidth">20</x:Double>
+    <x:Double x:Key="AvatarExtraExtraSmallFontSize">10</x:Double>
+
+    <x:Double x:Key="AvatarExtraSmallWidth">24</x:Double>
+    <x:Double x:Key="AvatarExtraSmallFontSize">10</x:Double>
+
+    <x:Double x:Key="AvatarSmallWidth">32</x:Double>
+    <x:Double x:Key="AvatarSmallFontSize">12</x:Double>
+
+    <x:Double x:Key="AvatarDefaultWidth">40</x:Double>
+    <x:Double x:Key="AvatarDefaultFontSize">18</x:Double>
+
+    <x:Double x:Key="AvatarMediumWidth">48</x:Double>
+    <x:Double x:Key="AvatarMediumFontSize">20</x:Double>
+
+    <x:Double x:Key="AvatarLargeWidth">72</x:Double>
+    <x:Double x:Key="AvatarLargeFontSize">32</x:Double>
+    <CornerRadius x:Key="AvatarLargeSquareCornerRadius">6</CornerRadius>
+
+    <x:Double x:Key="AvatarExtraLargeWidth">128</x:Double>
+    <x:Double x:Key="AvatarExtraLargeFontSize">64</x:Double>
+    <CornerRadius x:Key="AvatarExtraLargeSquareCornerRadius">12</CornerRadius>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml b/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml
index 68ac463..a09a2aa 100644
--- a/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml
@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
+        <MergeResourceInclude Source="Avatar.axaml" />
         <MergeResourceInclude Source="Badge.axaml" />
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="ButtonGroup.axaml" />
diff --git a/src/Ursa/Controls/Avatar/Avatar.cs b/src/Ursa/Controls/Avatar/Avatar.cs
new file mode 100644
index 0000000..a3d134c
--- /dev/null
+++ b/src/Ursa/Controls/Avatar/Avatar.cs
@@ -0,0 +1,26 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
+namespace Ursa.Controls;
+
+public class Avatar : Button
+{
+    public static readonly StyledProperty<IImage?> SourceProperty = AvaloniaProperty.Register<Avatar, IImage?>(
+        nameof(Source));
+
+    public static readonly StyledProperty<object?> HoverMaskProperty = AvaloniaProperty.Register<Avatar, object?>(
+        nameof(HoverMask));
+
+    public IImage? Source
+    {
+        get => GetValue(SourceProperty);
+        set => SetValue(SourceProperty, value);
+    }
+
+    public object? HoverMask
+    {
+        get => GetValue(HoverMaskProperty);
+        set => SetValue(HoverMaskProperty, value);
+    }
+}
\ No newline at end of file
diff --git a/src/Ursa/Converters/DivideByTwoConverter.cs b/src/Ursa/Converters/DivideByTwoConverter.cs
new file mode 100644
index 0000000..1fc2c74
--- /dev/null
+++ b/src/Ursa/Converters/DivideByTwoConverter.cs
@@ -0,0 +1,22 @@
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace Ursa.Converters;
+
+public class DivideByTwoConverter : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is double d)
+        {
+            return d / 2;
+        }
+
+        return value;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}
\ No newline at end of file