diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index 6685296c16..5339c8999f 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -1,8 +1,16 @@
 <template>
-	<span class="mk-avatar" :title="user | acct" :style="style" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick"></span>
-	<span class="mk-avatar" :title="user | acct" :style="style" v-else-if="disableLink && disablePreview" @click="onClick"></span>
-	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id"></router-link>
-	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && disablePreview"></router-link>
+	<span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
+		<span class="inner" :style="style"></span>
+	</span>
+	<span :class="{ mk-avatar: true, cat: cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
+		<span class="inner" :style="style"></span>
+	</span>
+	<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
+		<span class="inner" :style="style"></span>
+	</router-link>
+	<router-link :class="{ mk-avatar: true, cat: cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
+		<span class="inner" :style="style"></span>
+	</router-link>
 </template>
 
 <script lang="ts">
@@ -30,6 +38,9 @@ export default Vue.extend({
 		lightmode(): boolean {
 			return this.$store.state.device.lightmode;
 		},
+		cat(): boolean {
+			return this.user.isCat && this.$store.state.settings.circleIcons;
+		}
 		style(): any {
 			return {
 				backgroundColor: this.lightmode
@@ -54,7 +65,32 @@ export default Vue.extend({
 .mk-avatar
 	display inline-block
 	vertical-align bottom
-	background-size cover
-	background-position center center
-	transition border-radius 1s ease
+
+	&::before,
+	&::after
+		background #df548f
+		border solid 4px #ffffff
+		box-sizing border-box
+		content ''
+		display inline-block
+		height 50%
+		width 50%
+
+	&::before
+		border-radius 0 75% 75%
+		transform rotate(37.5deg) skew(30deg)
+
+	&::after
+		border-radius 75% 0 75% 75%
+		transform rotate(-37.5deg) skew(-30deg)
+
+	.inner
+		background-position center center
+		background-size cover
+		bottom 0
+		left 0
+		position absolute
+		right 0
+		top 0
+		transition border-radius 1s ease
 </style>