diff --git a/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap b/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap
index f0ea1c75..1b499f3b 100644
--- a/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap
+++ b/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap
@@ -47,27 +47,12 @@ exports[`renders NavigationPills correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -357,27 +342,12 @@ exports[`renders NavigationPills correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -444,27 +414,12 @@ exports[`renders NavigationPills wihtout label correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -744,27 +699,12 @@ exports[`renders NavigationPills wihtout label correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -831,27 +771,12 @@ exports[`renders NavigationPills with each pill's elementAttributes correctly 1`
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -1153,27 +1078,12 @@ exports[`renders NavigationPills with each pill's elementAttributes correctly 1`
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -1240,27 +1150,12 @@ exports[`renders NavigationPills with elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -1552,27 +1447,12 @@ exports[`renders NavigationPills with elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -1639,27 +1519,12 @@ exports[`renders NavigationPills with inner elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -1951,27 +1816,12 @@ exports[`renders NavigationPills with inner elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
diff --git a/src/components/ScrollTrack/ScrollTrack.js b/src/components/ScrollTrack/ScrollTrack.js
index 7c3defb5..2f89ba07 100644
--- a/src/components/ScrollTrack/ScrollTrack.js
+++ b/src/components/ScrollTrack/ScrollTrack.js
@@ -9,7 +9,7 @@ import ScrollTrackPropTypes from './ScrollTrackPropTypes'
 import { isNodeEnv } from '../../utils/detectFeature'
 import debounce from '../../utils/debounce'
 import CircleButton from '../Buttons/CircleButton'
-import Icon from '../Icon/Icon'
+import SVGIcon from '../SVGIcon/SVGIcon'
 
 const noOp = () => {} // eslint-disable-line no-empty-function
 
@@ -372,7 +372,7 @@ class ScrollTrack extends Component {
         ]}
         ref={node => (this.nextButton = node)}
       >
-        {nextButtonContent || <Icon name="arrowRightSmallBold" style={{ fontSize: '20px' }} />}
+        {nextButtonContent || <SVGIcon name="arrowRight" size="small" />}
       </CircleButton>
     )
   }
@@ -397,7 +397,7 @@ class ScrollTrack extends Component {
         ]}
         ref={node => (this.backButton = node)}
       >
-        {backButtonContent || <Icon name="arrowLeftSmallBold" style={{ fontSize: '20px' }} />}
+        {backButtonContent || <SVGIcon name="arrowLeft" size="small" />}
       </CircleButton>
     )
   }
diff --git a/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap b/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap
index 84acbaf2..6bc567b9 100644
--- a/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap
+++ b/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap
@@ -47,27 +47,12 @@ exports[`renders ScrollTrack correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -140,27 +125,12 @@ exports[`renders ScrollTrack correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -227,27 +197,12 @@ exports[`renders ScrollTrack with animation props correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -320,27 +275,12 @@ exports[`renders ScrollTrack with animation props correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -495,27 +435,12 @@ exports[`renders custom ScrollTrack buttons correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>