diff --git a/resources/frontend_client/app/components/icons/gear.html b/resources/frontend_client/app/components/icons/gear.html
new file mode 100644
index 0000000000000000000000000000000000000000..6b25c63fa6706ac35d25f21257ab78ed396a6ad5
--- /dev/null
+++ b/resources/frontend_client/app/components/icons/gear.html
@@ -0,0 +1,3 @@
+<svg id="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentcolor" ng-attr-width="{{width}}" ng-attr-height="{{height}}">
+ <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
+</svg>
\ No newline at end of file
diff --git a/resources/frontend_client/app/components/icons/icons.js b/resources/frontend_client/app/components/icons/icons.js
index c2bd8c8cd157cd80844a0fcd5c84299a57380eca..a2b0fce012fd48e68fc5e79da1949b0d1f565152 100644
--- a/resources/frontend_client/app/components/icons/icons.js
+++ b/resources/frontend_client/app/components/icons/icons.js
@@ -11,6 +11,7 @@
'ChevronRight',
'Dashboards',
'Explore',
+ 'Gear',
'Grid',
'List',
'Loading',
diff --git a/resources/frontend_client/index.html b/resources/frontend_client/index.html
index 420e90adfd08bf2037763c0251059df1007047e5..dbac0f4948e0548b5024693f18d5648926bbeb7d 100644
--- a/resources/frontend_client/index.html
+++ b/resources/frontend_client/index.html
@@ -89,18 +89,12 @@
<div class="wrapper flex align-center">
<!-- org title -->
<div class="NavTitle flex align-center" ng-if="!user.is_multi_org">
- <!-- TODO: this should be an icon directive -->
- <svg id="cog" class="mr1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="22px" height="22px" fill="currentcolor">
- <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
- </svg>
- <span class="NavItem-text">{{currentOrg.name}} Admin</span>
+ <cv-gear-icon width="22px" height="22px"></cv-gear-icon>
+ <span class="ml1 NavItem-text">{{currentOrg.name}} Admin</span>
</div>
<div class="NavTitle Dropdown" dropdown on-toggle="toggled(open)" ng-if="user.is_multi_org">
- <!-- TODO: this should be an icon directive -->
- <svg class="mr1" id="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="22px" height="22px"fill="currentcolor">
- <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
- </svg>
- <span dropdown-toggle>
+ <cv-gear-icon width="22px" height="22px"></cv-gear-icon>
+ <span class="ml1" dropdown-toggle>
<span class="NavItem-text">{{currentOrg.name}} Admin</span>
<cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>
</span>