diff --git a/web/ASC.Web.Components/example/stories/icons/index.stories.js b/web/ASC.Web.Components/example/stories/icons/index.stories.js
index 252a3b691c..7af2b5a11e 100644
--- a/web/ASC.Web.Components/example/stories/icons/index.stories.js
+++ b/web/ASC.Web.Components/example/stories/icons/index.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
 import styled from '@emotion/styled';
-import { withKnobs, select, color } from '@storybook/addon-knobs/react';
+import { withKnobs, select, color, boolean } from '@storybook/addon-knobs/react';
 import Readme from './README.md';
 
 import {Icons} from 'asc-web-components';
@@ -33,6 +33,10 @@ storiesOf('Components|Icons', module)
     <IconList>
       {Object.values(Icons).map((Icon, index) => {
         const sizeValue = select('size', ['small', 'medium', 'big', 'scale'], 'big');
+
+        let isFill = boolean('isfill', false);
+        let iconColor = isFill ? {color: `${color('color', "dimgray")}`} : {};
+
         const containerWidth =
           sizeValue === 'scale'
             ? {
@@ -43,8 +47,9 @@ storiesOf('Components|Icons', module)
           <IconItem key={index}>
             <IconContainer style={containerWidth}>
               <Icon
+                isfill={isFill}
                 size={sizeValue}
-                color={color('color', "dimgray")}
+                {...iconColor}
               />
             </IconContainer>
             <span>{iconNames[index]}</span>
diff --git a/web/ASC.Web.Components/src/components/icons/svg/create-styled-icon.js b/web/ASC.Web.Components/src/components/icons/svg/create-styled-icon.js
index 104ada41ea..74082b0dc1 100644
--- a/web/ASC.Web.Components/src/components/icons/svg/create-styled-icon.js
+++ b/web/ASC.Web.Components/src/components/icons/svg/create-styled-icon.js
@@ -32,10 +32,14 @@ const getSizeStyle = size => {
 };
 
 export default function createStyledIcon(Component, displayName) {
-  const StyledComponent = styled(Component)(
+
+  const Icon = ({ isfill, ...props }) => (
+    <Component {...props}></Component>
+  )
+  const StyledComponent = styled(Icon)(
     props => `
     * {
-      fill: ${props.color};
+      ${props.isfill ? 'fill:' + props.color : ''};
     }
     ${getSizeStyle(props.size)}
   `
@@ -44,6 +48,7 @@ export default function createStyledIcon(Component, displayName) {
   StyledComponent.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOf(['small', 'medium', 'big', 'scale']),
+    isfill: PropTypes.bool
   };
   return StyledComponent;
 }
\ No newline at end of file