diff --git a/browser/src/Services/VersionControl/VersionControlView.tsx b/browser/src/Services/VersionControl/VersionControlView.tsx
index 253bb821d..9e8bd614c 100644
--- a/browser/src/Services/VersionControl/VersionControlView.tsx
+++ b/browser/src/Services/VersionControl/VersionControlView.tsx
@@ -183,7 +183,7 @@ export class VersionControlView extends React.Component<ConnectedProps, State> {
                             />
                             <StagedSection
                                 titleId={IDs.staged}
-                                icon="plus-circle"
+                                icon="diff-added"
                                 files={staged}
                                 selectedId={selectedId}
                                 filesToCommit={filesToCommit}
@@ -198,7 +198,7 @@ export class VersionControlView extends React.Component<ConnectedProps, State> {
                                 handleCommitCancel={this.handleCommitCancel}
                             />
                             <VersionControlStatus
-                                icon="minus-circle"
+                                icon="diff-modified"
                                 files={modified}
                                 titleId={IDs.modified}
                                 selectedId={selectedId}
@@ -208,7 +208,7 @@ export class VersionControlView extends React.Component<ConnectedProps, State> {
                             />
                             <VersionControlStatus
                                 files={untracked}
-                                icon="question-circle"
+                                icon="diff-ignored"
                                 titleId={IDs.untracked}
                                 selectedId={selectedId}
                                 visibility={this.state.untracked}
diff --git a/browser/src/UI/components/Octicon.tsx b/browser/src/UI/components/Octicon.tsx
new file mode 100644
index 000000000..73c4026e2
--- /dev/null
+++ b/browser/src/UI/components/Octicon.tsx
@@ -0,0 +1,13 @@
+import Octicon, { getIconByName, iconsByName } from "@githubprimer/octicons-react"
+import * as React from "react"
+
+export type Icons = keyof iconsByName
+
+interface IProps {
+    name: Icons
+    props?: {}
+}
+
+export default function OcticonByName({ name, ...props }: IProps) {
+    return <Octicon {...props} icon={getIconByName(name)} />
+}
diff --git a/browser/src/UI/components/VersionControl/Branch.tsx b/browser/src/UI/components/VersionControl/Branch.tsx
index 9d0d06c65..bbf026dd5 100644
--- a/browser/src/UI/components/VersionControl/Branch.tsx
+++ b/browser/src/UI/components/VersionControl/Branch.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
 
 import { Diff } from "./../../../Services/VersionControl"
-import styled, { IThemeColors, withProps } from "./../../../UI/components/common"
-import { Icon } from "./../../../UI/Icon"
+import styled from "./../../../UI/components/common"
+import Octicon, { Icons } from "./../../../UI/components/Octicon"
 
 type ChangeTypes = "change" | "addition" | "deletion"
 
@@ -31,20 +31,9 @@ export const BranchNameContainer = styled.span`
     margin-left: 4px;
 `
 
-const selectColorByType = (type: ChangeTypes, theme: IThemeColors) => {
-    switch (type) {
-        case "addition":
-        case "deletion":
-        case "change":
-        default:
-            return ""
-    }
-}
-
-const ChangeSpanContainer = withProps<{ type: ChangeTypes }>(styled.span)`
+const ChangeSpanContainer = styled.span`
     font-size: 0.7rem;
     padding: 0 0.15rem;
-    color: ${({ type, theme }) => selectColorByType(type, theme)};
 `
 
 const ChangeSpan = styled.span`
@@ -61,7 +50,7 @@ export const Branch: React.SFC<BranchProps> = ({ diff, branch, children }) =>
     branch && (
         <BranchContainer>
             <BranchText>
-                <Icon name="code-fork" />
+                <Octicon name="git-branch" />
                 <BranchNameContainer>
                     {`${branch} `}
                     {diff && (
@@ -76,15 +65,16 @@ export const Branch: React.SFC<BranchProps> = ({ diff, branch, children }) =>
         </BranchContainer>
     )
 
-const getClassNameForType = (type: ChangeTypes) => {
+const getClassNameForType = (type: ChangeTypes): Icons => {
     switch (type) {
         case "addition":
-            return "plus-circle"
+            return "diff-added"
         case "deletion":
-            return "minus-circle"
+            return "diff-removed"
         case "change":
+            return "diff-modified"
         default:
-            return "question-circle"
+            return "diff-ignored"
     }
 }
 
@@ -104,8 +94,8 @@ export const DeletionsAndInsertions: React.SFC<ChangesProps> = ({ deletions, ins
 export const VCSIcon: React.SFC<ICreateIconArgs> = ({ type, num }) =>
     !!num && (
         <span>
-            <ChangeSpanContainer type={type}>
-                <Icon name={getClassNameForType(type)} />
+            <ChangeSpanContainer>
+                <Octicon name={getClassNameForType(type)} />
             </ChangeSpanContainer>
             <ChangeSpan data-test={`${type}-${num}`}>{num}</ChangeSpan>
         </span>
diff --git a/browser/src/UI/components/VersionControl/Commits.tsx b/browser/src/UI/components/VersionControl/Commits.tsx
index 153da5796..887695baf 100644
--- a/browser/src/UI/components/VersionControl/Commits.tsx
+++ b/browser/src/UI/components/VersionControl/Commits.tsx
@@ -1,7 +1,8 @@
 import * as React from "react"
 
 import { Logs } from "../../../Services/VersionControl/VersionControlProvider"
-import { sidebarItemSelected, styled, withProps } from "./../../../UI/components/common"
+import styled, { getSelectedBorder } from "./../../../UI/components/common"
+import Octicon from "./../../../UI/components/Octicon"
 import { formatDate } from "./../../../Utility"
 import VCSSectionTitle from "./../SectionTitle"
 
@@ -22,8 +23,8 @@ const List = styled.ul`
     overflow-x: hidden;
     max-height: 30em;
 `
-export const ListItem = withProps<{ isSelected?: boolean }>(styled.li)`
-    ${({ isSelected }) => isSelected && sidebarItemSelected};
+export const ListItem = styled<{ isSelected?: boolean }, "li">("li")`
+    border: ${getSelectedBorder};
     padding: 0.4rem;
 `
 
@@ -57,6 +58,7 @@ const CommitsSection: React.SFC<ICommitsSection> = ({ commits, ...props }) => {
                             isSelected={props.selectedId === prevCommit.hash}
                         >
                             <Detail>
+                                <Octicon name="git-commit" />
                                 <strong> {prevCommit.message}</strong>
                             </Detail>
                             <Detail>{prevCommit.hash.slice(0, 6)}</Detail>
diff --git a/browser/src/UI/components/VersionControl/File.tsx b/browser/src/UI/components/VersionControl/File.tsx
index 1cde0c553..3d80bfcb7 100644
--- a/browser/src/UI/components/VersionControl/File.tsx
+++ b/browser/src/UI/components/VersionControl/File.tsx
@@ -1,22 +1,21 @@
 import * as path from "path"
 import * as React from "react"
 
-import { Sneakable } from "../Sneakable"
-import { Icon } from "./../../Icon"
-import styled, { sidebarItemSelected, withProps } from "./../common"
+import styled, { getSelectedBorder } from "./../common"
+import Octicon, { Icons } from "./../Octicon"
+import { Sneakable } from "./../Sneakable"
 
 interface IProps {
     onClick: (path: string) => void
     file: string
-    icon: string
+    icon: Icons
     isSelected: boolean
 }
 
 const Row = styled.div`
+    border: ${getSelectedBorder};
     display: flex;
-    span > {
-        margin-right: 0.2em;
-    }
+    padding: 0.3em;
 `
 
 const truncate = (str: string) =>
@@ -25,30 +24,22 @@ const truncate = (str: string) =>
         .slice(-2)
         .join(path.sep)
 
-interface SelectionProps {
-    isSelected?: boolean
-}
-
-const Column = withProps<SelectionProps>(styled.div)`
-    ${sidebarItemSelected};
-    display: flex;
-    flex-direction: column;
-    padding: 0.3em;
+const Name = styled.span`
+    word-wrap: break-word;
 `
 
-const Name = styled.span`
-    margin-left: 0.5em;
-    word-wrap: break-word;
+const IconContainer = styled.div`
+    margin-right: 0.5rem;
 `
 
 const File: React.SFC<IProps> = ({ file, icon, onClick, isSelected }) => (
     <Sneakable callback={() => onClick(file)} key={file}>
-        <Column onClick={() => onClick(file)} isSelected={isSelected}>
-            <Row>
-                <Icon name={icon} />
-                <Name>{truncate(file)}</Name>
-            </Row>
-        </Column>
+        <Row onClick={() => onClick(file)} isSelected={isSelected}>
+            <IconContainer>
+                <Octicon name={icon} />
+            </IconContainer>
+            <Name>{truncate(file)}</Name>
+        </Row>
     </Sneakable>
 )
 
diff --git a/browser/src/UI/components/VersionControl/Staged.tsx b/browser/src/UI/components/VersionControl/Staged.tsx
index 40aa90e96..d97e4fd59 100644
--- a/browser/src/UI/components/VersionControl/Staged.tsx
+++ b/browser/src/UI/components/VersionControl/Staged.tsx
@@ -1,8 +1,9 @@
 import * as React from "react"
 
-import styled, { Center, sidebarItemSelected, withProps } from "../common"
+import styled, { Center, getSelectedBorder, withProps } from "../common"
 import SectionTitle from "../SectionTitle"
 import { LoadingSpinner } from "./../../../UI/components/LoadingSpinner"
+import { Icons } from "./../../../UI/components/Octicon"
 import CommitMessage from "./CommitMessage"
 import File from "./File"
 
@@ -18,7 +19,7 @@ interface IProps {
     files?: string[]
     titleId: string
     selectedId: string
-    icon: string
+    icon: Icons
     loading: boolean
     handleSelection: (id: string) => void
     filesToCommit: string[]
@@ -32,7 +33,7 @@ interface IProps {
 }
 
 const OptionsBar = withProps<{ isSelected: boolean }>(styled.span)`
-    ${p => p.isSelected && sidebarItemSelected};
+    border: ${getSelectedBorder};
     display: block;
     width: 100%;
 `
diff --git a/browser/src/UI/components/VersionControl/Status.tsx b/browser/src/UI/components/VersionControl/Status.tsx
index 776ae8ca0..1d24178d8 100644
--- a/browser/src/UI/components/VersionControl/Status.tsx
+++ b/browser/src/UI/components/VersionControl/Status.tsx
@@ -1,13 +1,14 @@
 import * as React from "react"
 
-import VCSSectionTitle from "../SectionTitle"
+import { Icons } from "./../Octicon"
+import VCSSectionTitle from "./../SectionTitle"
 import File from "./File"
 
 interface IModifiedFilesProps {
     files?: string[]
     titleId: string
     selectedId: string
-    icon: string
+    icon: Icons
     onClick: (id: string) => void
     toggleVisibility: () => void
     visibility: boolean
diff --git a/browser/src/UI/components/common.ts b/browser/src/UI/components/common.ts
index 6d3e45d13..a6fe6ae21 100644
--- a/browser/src/UI/components/common.ts
+++ b/browser/src/UI/components/common.ts
@@ -87,6 +87,13 @@ type GetBorder = (
     },
 ) => string
 
+export const showScrollbarOnHover = css`
+    overflow: hidden;
+    &:hover {
+        overflow: overlay;
+    }
+`
+
 export const getSelectedBorder: GetBorder = ({ isSelected, borderSize = "1px", theme }) =>
     isSelected
         ? `${borderSize} solid ${theme["highlight.mode.normal.background"]}`
diff --git a/jest.config.js b/jest.config.js
index effa33776..98d96f548 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
     bail: true,
-    verbose: true,
+    verbose: false,
     collectCoverage: true,
     coverageDirectory: "<rootDir>/coverage/jest/",
     setupFiles: ["<rootDir>/ui-tests/jestsetup.ts"],
diff --git a/package.json b/package.json
index c1d59dd75..cb5a78ef8 100644
--- a/package.json
+++ b/package.json
@@ -856,6 +856,7 @@
     },
     "license": "MIT",
     "dependencies": {
+        "@githubprimer/octicons-react": "^8.1.0",
         "chokidar": "^2.0.3",
         "color-normalize": "^1.0.3",
         "dompurify": "^1.0.3",
diff --git a/ui-tests/VersionControl/VersionControlComponents.test.tsx b/ui-tests/VersionControl/VersionControlComponents.test.tsx
index 4fc6d3771..94ae3cfcf 100644
--- a/ui-tests/VersionControl/VersionControlComponents.test.tsx
+++ b/ui-tests/VersionControl/VersionControlComponents.test.tsx
@@ -2,6 +2,8 @@ import { mount, shallow } from "enzyme"
 import { shallowToJson } from "enzyme-to-json"
 import * as React from "react"
 
+import Octicon from "./../../browser/src/UI/components/Octicon"
+
 import {
     Branch,
     BranchNameContainer,
@@ -46,25 +48,25 @@ describe("<Branch />", () => {
 
     it("should render the correct icon for additions", () => {
         const wrapper = mount(<Branch branch="test-branch" diff={diff} />)
-        const icon = wrapper.find("i.fa-plus-circle")
-        expect(icon.length).toBe(1)
+        const hasAdded = wrapper.contains(<Octicon name="diff-added" />)
+        expect(hasAdded).toBe(true)
     })
 
     it("should render the correct icon for deletions", () => {
         const wrapper = mount(<Branch branch="test-branch" diff={diff} />)
-        const icon = wrapper.find("i.fa-minus-circle")
-        expect(icon.length).toBe(1)
+        const hasDeleted = wrapper.contains(<Octicon name="diff-removed" />)
+        expect(hasDeleted).toBe(true)
     })
 
     it("Should not render an icon if there were no insertions", () => {
         const wrapper = mount(<Branch branch="test-branch" diff={{ ...diff, insertions: 0 }} />)
-        const icon = wrapper.find("i.fa-plus-circle")
-        expect(icon.length).toBe(0)
+        const icon = wrapper.contains(<Octicon name="diff-added" />)
+        expect(icon).toBe(false)
     })
 
     it("Should not render an icon if there were no deletions", () => {
         const wrapper = mount(<Branch branch="test-branch" diff={{ ...diff, deletions: 0 }} />)
-        const icon = wrapper.find("i.fa-minus-circle")
-        expect(icon.length).toBe(0)
+        const icon = wrapper.contains(<Octicon name="diff-removed" />)
+        expect(icon).toBe(false)
     })
 })
diff --git a/ui-tests/VersionControl/__snapshots__/VersionControlComponents.test.tsx.snap b/ui-tests/VersionControl/__snapshots__/VersionControlComponents.test.tsx.snap
index 23bc2c887..c0ef5fb92 100644
--- a/ui-tests/VersionControl/__snapshots__/VersionControlComponents.test.tsx.snap
+++ b/ui-tests/VersionControl/__snapshots__/VersionControlComponents.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<Branch /> should match last known snapshot unless we make a change 1`] = `
 <styled.div>
   <styled.span>
-    <Icon
-      name="code-fork"
+    <OcticonByName
+      name="git-branch"
     />
     <styled.span>
       test-branch 
diff --git a/yarn.lock b/yarn.lock
index fecd125c0..06d6e0ee2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -40,6 +40,12 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@githubprimer/octicons-react@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@githubprimer/octicons-react/-/octicons-react-8.1.0.tgz#731c40b6b231dcee731f0f2d37c67e7ee857bd6a"
+  dependencies:
+    prop-types "^15.6.1"
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"