diff --git a/app/gabsocial/features/ui/index.js b/app/gabsocial/features/ui/index.js
index abc1eae51..b9c9efb06 100644
--- a/app/gabsocial/features/ui/index.js
+++ b/app/gabsocial/features/ui/index.js
@@ -33,6 +33,7 @@ import HomePage from 'gabsocial/pages/home_page';
 import SidebarMenu from '../../components/sidebar_menu';
 import { connectUserStream } from '../../actions/streaming';
 import { Redirect } from 'react-router-dom';
+import Icon from 'gabsocial/components/icon';
 
 import {
   Status,
@@ -574,7 +575,7 @@ class UI extends React.PureComponent {
       goToRequests: this.handleHotkeyGoToRequests,
     } : {};
 
-    const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)} />;
+    const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' fixedWidth /></button>;
 
     return (
       <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
diff --git a/app/images/sprite-main-navigation.png b/app/images/sprite-main-navigation.png
deleted file mode 100644
index a3e60ed16..000000000
Binary files a/app/images/sprite-main-navigation.png and /dev/null differ
diff --git a/app/styles/azure.scss b/app/styles/azure.scss
index fbef4bbb9..c7c0b1763 100644
--- a/app/styles/azure.scss
+++ b/app/styles/azure.scss
@@ -13,10 +13,6 @@ $ui-base-lighter-color: #b0c0cf;
 @import 'application';
 @import 'gabsocial-light/diff';
 
-.floating-action-button {
-  filter: hue-rotate(-48deg);
-}
-
 .tabs-bar__link {
   font-weight: bold;
   transition: 0.1s;
diff --git a/app/styles/gabsocial/components.scss b/app/styles/gabsocial/components.scss
index ddf707a9a..05a4d0511 100644
--- a/app/styles/gabsocial/components.scss
+++ b/app/styles/gabsocial/components.scss
@@ -1531,16 +1531,20 @@ a.account__display-name {
   bottom: 14px;
   right: 14px;
   width: 61px;
-  height: 52px;
-  background-image: url('../images/sprite-main-navigation.png');
-  background-repeat: no-repeat;
-  background-size: 161px 152px;
-  background-position: -100px 0;
-  background-color: transparent;
+  height: 61px;
+  background-color: $nav-ui-highlight-color;
   border: none;
+  border-radius: 999px;
+  box-shadow: 2px 5px 5px #999;
+  font-size: 30px;
   &:hover,
   &:focus,
-  &:active {background-position: -100px -100px;}
+  &:active {background-color: darken($nav-ui-highlight-color, 10%) !important;}
+  
+  .fa-pencil {
+      margin-right: 0;
+      transform: translate(1px, 2px);
+  }
 }
 
 @media screen and (min-width: 360px) {
diff --git a/app/styles/gabsocial/components/tabs-bar.scss b/app/styles/gabsocial/components/tabs-bar.scss
index f9fffad7f..5d30ea91a 100644
--- a/app/styles/gabsocial/components/tabs-bar.scss
+++ b/app/styles/gabsocial/components/tabs-bar.scss
@@ -116,24 +116,20 @@ $nav-ui-background-color: $gab-brand-default !default;
   &__button-compose {
     display: block;
     @media screen and (max-width: $nav-breakpoint-3) {display: none;}
-    width: 70px;
+    width: 65px;
     height: 34px;
     margin-left: 20px;
     border-radius: 4px;
-    background-image: url('../images/sprite-main-navigation.png');
     background-color: $nav-ui-highlight-color !important;
-    background-repeat: no-repeat;
-    background-size: 161px 152px;
-    background-position: 18px 2px;
     transition: background-color 0.2s;
+    font-weight: bold;
+    font-size: 16px;
 
     &:hover {
       background-color: darken($nav-ui-highlight-color, 10%) !important;
-      background-position: 18px -98px;
       box-shadow: inset 0 0 6px darken($gab-brand-default, 10%);
     }
 
-    span {display: none;}
   }
 
   &__button {
diff --git a/app/styles/glinner.scss b/app/styles/glinner.scss
index d7500b5f1..c53408833 100644
--- a/app/styles/glinner.scss
+++ b/app/styles/glinner.scss
@@ -93,10 +93,6 @@ body {
   background: $ui-highlight-color;
 }
 
-.floating-action-button {
-  filter: hue-rotate(-100deg);
-}
-
 @media screen and (max-width: 767px) {
   .public-layout .header {
     margin-bottom: 70px;
diff --git a/app/styles/halloween/diff.scss b/app/styles/halloween/diff.scss
index 9d4a0220e..4dbaf10ee 100644
--- a/app/styles/halloween/diff.scss
+++ b/app/styles/halloween/diff.scss
@@ -113,10 +113,6 @@ body.app-body::after {
   background-color: $nav-ui-highlight-color !important;
 }
 
-.floating-action-button {
-  filter: hue-rotate(120deg);
-}
-
 .button {
   background-color: $halloween-orange;
   &:focus, &:hover { background-color: darken($halloween-orange, 10%);}
diff --git a/app/styles/lime.scss b/app/styles/lime.scss
index a8a127998..3ff6de7b1 100644
--- a/app/styles/lime.scss
+++ b/app/styles/lime.scss
@@ -14,7 +14,3 @@ $ui-base-lighter-color: darken(#69f31f, 35%);
 .public-layout .footer ul li a {
   color: lighten($gab-brand-default, 10%);
 }
-
-.floating-action-button {
-  filter: hue-rotate(-175deg);
-}
diff --git a/app/styles/neenster.scss b/app/styles/neenster.scss
index 139eb6428..47f302019 100644
--- a/app/styles/neenster.scss
+++ b/app/styles/neenster.scss
@@ -29,7 +29,3 @@ $ui-base-lighter-color: darken(#2da8be, 35%);
     }
   }
 }
-
-.floating-action-button {
-  filter: hue-rotate(-108deg);
-}