diff --git a/app/javascript/components/settings-tasks-form/icons.jsx b/app/javascript/components/settings-tasks-form/icons.jsx
index eca4ca2e2c7..3263975bee8 100644
--- a/app/javascript/components/settings-tasks-form/icons.jsx
+++ b/app/javascript/components/settings-tasks-form/icons.jsx
@@ -5,7 +5,7 @@ import { carbonizeIcon } from '../../menu/icon';
 const Icon = ({
   text, icon, color, size,
 }) => {
-  const IconElement = carbonizeIcon(icon, size);
+  const IconElement = carbonizeIcon(icon, { size });
   return (
     <div id="icon">
       <IconElement aria-label={text} className="my-custom-class" color={color} />
diff --git a/app/javascript/components/toolbar/MenuIcon.js b/app/javascript/components/toolbar/MenuIcon.js
index ab4770735f7..a81dfffa9d9 100644
--- a/app/javascript/components/toolbar/MenuIcon.js
+++ b/app/javascript/components/toolbar/MenuIcon.js
@@ -1,10 +1,11 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { carbonizeIcon } from '../../menu/icon';
 
 export const MenuIcon = (props) => (
   <div>
-    { props.icon && <i className={props.icon} style={{ color: props.color }} /> }
+    { props.icon && carbonizeIcon(props.icon, { color: props.color }) }
     {' '}
     <span>{ props.text }</span>
   </div>
diff --git a/app/javascript/components/toolbar/ToolbarButton.jsx b/app/javascript/components/toolbar/ToolbarButton.jsx
index 5eb46282183..26efacd3158 100644
--- a/app/javascript/components/toolbar/ToolbarButton.jsx
+++ b/app/javascript/components/toolbar/ToolbarButton.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { adjustColor, isEnabled } from './utility';
 import CountContext from './ToolbarContext';
+import { carbonizeIcon } from '../../menu/icon';
 
 const classNames = require('classnames');
 
@@ -10,7 +11,10 @@ const ButtonIcon = ({
   img_url: imgUrl, icon, color, enabled,
 }) => {
   if (icon) {
-    return <i className={icon} style={{ color: adjustColor(color, enabled) }} />;
+    const options = {
+      color: adjustColor(color, enabled),
+    };
+    return carbonizeIcon(icon, options);
   }
 
   if (imgUrl && !icon) {
diff --git a/app/javascript/components/toolbar/ToolbarList.jsx b/app/javascript/components/toolbar/ToolbarList.jsx
index 496135c3240..d857517ae38 100644
--- a/app/javascript/components/toolbar/ToolbarList.jsx
+++ b/app/javascript/components/toolbar/ToolbarList.jsx
@@ -6,6 +6,7 @@ import { MenuIcon } from './MenuIcon';
 import { isEnabled } from './utility';
 import { ToolbarClick } from './ToolbarClick';
 import CountContext from './ToolbarContext';
+import { carbonizeIcon } from '../../menu/icon';
 
 export const ToolbarList = (props) => {
   const count = useContext(CountContext);
@@ -58,7 +59,7 @@ export const ToolbarList = (props) => {
       onClose={closeFunc}
       renderIcon={() => (
         <div className="toolbar-overflow">
-          { props.icon && <i className={props.icon} style={{ color: props.color }} /> }
+          { props.icon && carbonizeIcon(props.icon, { color: props.color }) }
           <ChevronDown20 />
           {' '}
           <span>{ props.text ? props.text : (props.title && props.title)}</span>
diff --git a/app/javascript/menu/icon.jsx b/app/javascript/menu/icon.jsx
index d91be92cb1b..431ae455fb5 100644
--- a/app/javascript/menu/icon.jsx
+++ b/app/javascript/menu/icon.jsx
@@ -2,13 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as icons from '@carbon/icons-react';
 
-export const carbonizeIcon = (classname, size = 20) => {
+export const carbonizeIcon = (classname, options = undefined) => {
+  const size = (options && options.size) || 20; // Default size is 16px
+  console.log(classname);
+  console.log(size);
+
   if (!classname) {
     return null;
   }
 
   if (!classname.startsWith('carbon--')) {
-    return props => <i className={classname} {...props} />;
+    if (options && options.color) {
+      return <i className={classname} style={{ color: options.color }} />;
+    }
+    return <i className={classname} />;
   }
 
   const name = classname.replace(/^carbon--/, '');
@@ -17,7 +24,7 @@ export const carbonizeIcon = (classname, size = 20) => {
 };
 
 const MiqIcon = ({ icon, size }) => {
-  const IconElement = carbonizeIcon(icon, size);
+  const IconElement = carbonizeIcon(icon, { size });
   return <IconElement style={{ marginBottom: '-4px' }} />;
 };