diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 8afa98bac..971957321 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -942,21 +942,20 @@ StScrollBar StButton#vhandle:active {
 }
 
 .page-indicator {
+    padding: 15px 30px;
+}
+
+.page-indicator .page-indicator-icon {
     width: 18px;
     height: 18px;
     background-image: url(page-indicator-inactive.svg);
 }
 
-.page-indicator:hover,
-.page-indicator:checked{
+.page-indicator:hover .page-indicator-icon,
+.page-indicator:checked .page-indicator-icon {
     background-image: url(page-indicator-active.svg);
 }
 
-.page-indicators {
-    spacing: 30px;
-    padding: 0px 30px;
-}
-
 .no-frequent-applications-label {
     font-size: 18pt;
     color: #999999;
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c1e44dc47..bc4afee40 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -211,6 +211,7 @@ const PageIndicators = new Lang.Class({
                                                              St.ButtonMask.THREE,
                                                 toggle_mode: true,
                                                 checked: pageIndex == this._currentPage });
+                indicator.child = new St.Widget({ style_class: 'page-indicator-icon' });
                 indicator.connect('clicked', Lang.bind(this,
                     function() {
                         this.emit('page-activated', pageIndex);