diff --git a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt
index 5ee55eb98..e337a2b4b 100644
--- a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolder.kt
@@ -64,10 +64,11 @@ class TopSiteItemViewHolder(
     fun bind(topSite: TopSite) {
         top_site_title.text = topSite.title
 
-        pin_indicator.visibility = if (topSite.type == PINNED || topSite.type == DEFAULT) {
-            View.VISIBLE
+        if (topSite.type == PINNED || topSite.type == DEFAULT) {
+            val pinIndicator = getDrawable(itemView.context, R.drawable.ic_new_pin)
+            top_site_title.setCompoundDrawablesWithIntrinsicBounds(pinIndicator, null, null, null)
         } else {
-            View.GONE
+            top_site_title.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null)
         }
 
         when (topSite.url) {
diff --git a/app/src/main/res/drawable/ic_new_pin.xml b/app/src/main/res/drawable/ic_new_pin.xml
new file mode 100644
index 000000000..15940a2a2
--- /dev/null
+++ b/app/src/main/res/drawable/ic_new_pin.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
+    <path
+        android:fillColor="@color/top_site_pin_icon_color"
+        android:pathData="M9.05,4.055H7.6L7.156,3.89C7.156,3.89 6.19,2.926 5.612,2.349L6.106,1.855C6.302,1.659 6.302,1.342 6.106,1.147C5.91,0.951 5.593,0.951 5.398,1.147L4.689,1.855L1.147,5.398C0.951,5.594 0.951,5.911 1.147,6.106C1.343,6.302 1.66,6.302 1.855,6.106L2.349,5.612C2.93,6.194 3.904,7.17 3.904,7.17L4.054,7.597L4.055,9.049C4.055,9.425 4.279,9.76 4.626,9.904C4.742,9.952 4.862,9.975 4.981,9.975C5.221,9.975 5.457,9.881 5.634,9.703L7.314,8.023L10.144,10.853C10.34,11.049 10.657,11.049 10.852,10.853C11.048,10.657 11.048,10.34 10.852,10.145L8.022,7.315L9.702,5.635C9.968,5.369 10.046,4.974 9.903,4.627C9.761,4.279 9.425,4.055 9.05,4.055Z" />
+</vector>
diff --git a/app/src/main/res/layout/top_site_item.xml b/app/src/main/res/layout/top_site_item.xml
index f02af96fd..65675bb34 100644
--- a/app/src/main/res/layout/top_site_item.xml
+++ b/app/src/main/res/layout/top_site_item.xml
@@ -23,37 +23,20 @@
 
     <TextView
         android:id="@+id/top_site_title"
-        android:layout_width="64dp"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:maxWidth="84dp"
         android:layout_gravity="center_horizontal"
         android:layout_marginTop="@dimen/top_sites_text_margin_top"
+        android:drawablePadding="2dp"
         android:gravity="center"
+        android:textAlignment="center"
         android:singleLine="true"
         android:textColor="@color/top_site_title_text"
         android:textSize="12sp"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toBottomOf="@id/favicon_image"
-        tools:ignore="SmallSp" />
-
-    <FrameLayout
-        android:id="@+id/pin_indicator"
-        android:layout_width="16dp"
-        android:layout_height="16dp"
-        android:elevation="7dp"
-        android:translationX="8dp"
-        android:translationY="-8dp"
-        android:visibility="gone"
-        app:layout_constraintRight_toLeftOf="@id/favicon_image"
-        app:layout_constraintTop_toTopOf="@id/favicon_image">
-
-        <View
-            android:id="@+id/pin_icon"
-            android:layout_width="16dp"
-            android:layout_height="16dp"
-            android:layout_gravity="center"
-            android:background="@drawable/ic_pin"
-            android:backgroundTint="@color/top_site_pin_icon_background_tint"/>
-    </FrameLayout>
+        tools:ignore="RtlCompat,SmallSp" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 48ef9fdc8..15fbe257e 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -80,7 +80,7 @@
     <color name="top_site_title_text">@color/top_site_title_text_dark_theme</color>
     <color name="top_site_pager_dot">#3A3944</color>
     <color name="top_site_pager_dot_selected">#5B5B66</color>
-    <color name="top_site_pin_icon_background_tint">@color/photonViolet50</color>
+    <color name="top_site_pin_icon_color">@color/foundation_light_theme</color>
     <color name="top_sites_border_color">@color/photonDarkGrey90</color>
 
     <!-- Synced tabs colors-->
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index da6322747..2e92a20e5 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -277,7 +277,7 @@
     <color name="top_site_title_text">@color/top_site_title_text_light_theme</color>
     <color name="top_site_pager_dot">@color/photonLightGrey30</color>
     <color name="top_site_pager_dot_selected">@color/photonLightGrey50</color>
-    <color name="top_site_pin_icon_background_tint">@color/photonInk20</color>
+    <color name="top_site_pin_icon_color">@color/foundation_dark_theme</color>
     <color name="top_sites_border_color">@color/photonLightGrey30</color>
 
     <!-- Synced tabs colors-->
diff --git a/app/src/test/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolderTest.kt b/app/src/test/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolderTest.kt
index 02b5f5a6c..2b2154fd3 100644
--- a/app/src/test/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolderTest.kt
+++ b/app/src/test/java/org/mozilla/fenix/home/sessioncontrol/viewholders/topsites/TopSiteItemViewHolderTest.kt
@@ -6,15 +6,14 @@ package org.mozilla.fenix.home.sessioncontrol.viewholders.topsites
 
 import android.view.LayoutInflater
 import android.view.View
-import android.widget.FrameLayout
-import androidx.core.view.isVisible
+import android.widget.TextView
 import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.android.synthetic.main.top_site_item.view.*
 import mozilla.components.feature.top.sites.TopSite
 import mozilla.components.support.test.robolectric.testContext
-import org.junit.Assert.assertFalse
-import org.junit.Assert.assertTrue
+import org.junit.Assert.assertNotNull
+import org.junit.Assert.assertNull
 import org.junit.Before
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -59,7 +58,7 @@ class TopSiteItemViewHolderTest {
     }
 
     @Test
-    fun `pin indicator is visible for default top sites`() {
+    fun `GIVEN a default top site WHEN bind is called THEN the title has a pin indicator`() {
         val defaultTopSite = TopSite(
             id = 1L,
             title = "Pocket",
@@ -69,13 +68,13 @@ class TopSiteItemViewHolderTest {
         )
 
         TopSiteItemViewHolder(view, interactor).bind(defaultTopSite)
-        val pinIndicator = view.findViewById<FrameLayout>(R.id.pin_indicator)
+        val pinIndicator = view.findViewById<TextView>(R.id.top_site_title).compoundDrawables[0]
 
-        assertTrue(pinIndicator.isVisible)
+        assertNotNull(pinIndicator)
     }
 
     @Test
-    fun `pin indicator is visible for pinned top sites`() {
+    fun `GIVEN a pinned top site WHEN bind is called THEN the title has a pin indicator`() {
         val pinnedTopSite = TopSite(
             id = 1L,
             title = "Mozilla",
@@ -85,13 +84,13 @@ class TopSiteItemViewHolderTest {
         )
 
         TopSiteItemViewHolder(view, interactor).bind(pinnedTopSite)
-        val pinIndicator = view.findViewById<FrameLayout>(R.id.pin_indicator)
+        val pinIndicator = view.findViewById<TextView>(R.id.top_site_title).compoundDrawables[0]
 
-        assertTrue(pinIndicator.isVisible)
+        assertNotNull(pinIndicator)
     }
 
     @Test
-    fun `pin indicator is not visible for frecent top sites`() {
+    fun `GIVEN a frecent top site WHEN bind is called THEN the title does not have a pin indicator`() {
         val frecentTopSite = TopSite(
             id = 1L,
             title = "Mozilla",
@@ -101,8 +100,8 @@ class TopSiteItemViewHolderTest {
         )
 
         TopSiteItemViewHolder(view, interactor).bind(frecentTopSite)
-        val pinIndicator = view.findViewById<FrameLayout>(R.id.pin_indicator)
+        val pinIndicator = view.findViewById<TextView>(R.id.top_site_title).compoundDrawables[0]
 
-        assertFalse(pinIndicator.isVisible)
+        assertNull(pinIndicator)
     }
 }