diff --git a/app/src/main/java/org/thoughtcrime/securesms/components/settings/conversation/preferences/AvatarPreference.kt b/app/src/main/java/org/thoughtcrime/securesms/components/settings/conversation/preferences/AvatarPreference.kt
index 3d599501b..76f5afcb3 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/components/settings/conversation/preferences/AvatarPreference.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/settings/conversation/preferences/AvatarPreference.kt
@@ -5,9 +5,12 @@ import androidx.core.view.ViewCompat
 import org.thoughtcrime.securesms.R
 import org.thoughtcrime.securesms.components.AvatarImageView
 import org.thoughtcrime.securesms.components.settings.PreferenceModel
+import org.thoughtcrime.securesms.contacts.avatars.FallbackContactPhoto
+import org.thoughtcrime.securesms.contacts.avatars.FallbackPhoto
 import org.thoughtcrime.securesms.recipients.Recipient
 import org.thoughtcrime.securesms.util.MappingAdapter
 import org.thoughtcrime.securesms.util.MappingViewHolder
+import org.thoughtcrime.securesms.util.ViewUtil
 
 /**
  * Renders a large avatar (80dp) for a given Recipient.
@@ -34,6 +37,7 @@ object AvatarPreference {
   private class ViewHolder(itemView: View) : MappingViewHolder<Model>(itemView) {
     private val avatar: AvatarImageView = itemView.findViewById<AvatarImageView>(R.id.bio_preference_avatar).apply {
       ViewCompat.setTransitionName(this, "avatar")
+      setFallbackPhotoProvider(AvatarPreferenceFallbackPhotoProvider())
     }
 
     override fun bind(model: Model) {
@@ -42,4 +46,10 @@ object AvatarPreference {
       avatar.setOnClickListener { model.onAvatarClick(avatar) }
     }
   }
+
+  private class AvatarPreferenceFallbackPhotoProvider : Recipient.FallbackPhotoProvider() {
+    override fun getPhotoForGroup(): FallbackContactPhoto {
+      return FallbackPhoto(R.drawable.ic_group_outline_40, ViewUtil.dpToPx(8))
+    }
+  }
 }
diff --git a/app/src/main/java/org/thoughtcrime/securesms/contacts/avatars/FallbackPhoto.java b/app/src/main/java/org/thoughtcrime/securesms/contacts/avatars/FallbackPhoto.java
new file mode 100644
index 000000000..586c0f7fa
--- /dev/null
+++ b/app/src/main/java/org/thoughtcrime/securesms/contacts/avatars/FallbackPhoto.java
@@ -0,0 +1,65 @@
+package org.thoughtcrime.securesms.contacts.avatars;
+
+import android.content.Context;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.LayerDrawable;
+
+import androidx.annotation.DrawableRes;
+import androidx.annotation.NonNull;
+import androidx.annotation.Px;
+import androidx.appcompat.content.res.AppCompatResources;
+import androidx.core.graphics.drawable.DrawableCompat;
+
+import org.thoughtcrime.securesms.R;
+import org.thoughtcrime.securesms.avatar.Avatars;
+import org.thoughtcrime.securesms.conversation.colors.AvatarColor;
+import org.thoughtcrime.securesms.util.ViewUtil;
+
+import java.util.Objects;
+
+/**
+ * Fallback resource based contact photo with a 20dp icon
+ */
+public final class FallbackPhoto implements FallbackContactPhoto {
+
+  @DrawableRes private final int drawableResource;
+  @Px          private final int foregroundInset;
+
+  public FallbackPhoto(@DrawableRes int drawableResource, @Px int foregroundInset) {
+    this.drawableResource = drawableResource;
+    this.foregroundInset  = foregroundInset;
+  }
+
+  @Override
+  public Drawable asDrawable(@NonNull Context context, @NonNull AvatarColor color) {
+    return buildDrawable(context, color);
+  }
+
+  @Override
+  public Drawable asDrawable(@NonNull Context context, @NonNull AvatarColor color, boolean inverted) {
+    return buildDrawable(context, color);
+  }
+
+  @Override
+  public Drawable asSmallDrawable(@NonNull Context context, @NonNull AvatarColor color, boolean inverted) {
+    return buildDrawable(context, color);
+  }
+
+  @Override
+  public Drawable asCallCard(@NonNull Context context) {
+    throw new UnsupportedOperationException();
+  }
+
+  private @NonNull Drawable buildDrawable(@NonNull Context context, @NonNull AvatarColor color) {
+    Drawable      background      = DrawableCompat.wrap(Objects.requireNonNull(AppCompatResources.getDrawable(context, R.drawable.circle_tintable))).mutate();
+    Drawable      foreground      = Objects.requireNonNull(AppCompatResources.getDrawable(context, drawableResource));
+    LayerDrawable drawable        = new LayerDrawable(new Drawable[]{background, foreground});
+
+    DrawableCompat.setTint(background, color.colorInt());
+    DrawableCompat.setTint(foreground, Avatars.getForegroundColor(color).getColorInt());
+
+    drawable.setLayerInset(1, foregroundInset, foregroundInset, foregroundInset, foregroundInset);
+
+    return drawable;
+  }
+}