diff --git a/web/ASC.Web.Components/example/package.json b/web/ASC.Web.Components/example/package.json
index 2a71ce8ff1..b8414c3d69 100644
--- a/web/ASC.Web.Components/example/package.json
+++ b/web/ASC.Web.Components/example/package.json
@@ -46,7 +46,7 @@
     "@storybook/addon-storysource": "^5.0.11",
     "@storybook/addon-viewport": "^5.0.11",
     "@storybook/addons": "^5.0.11",
-    "@storybook/cli": "^5.0.11",
+    "@storybook/cli": "^5.1.8",
     "@storybook/react": "^5.0.11",
     "babel-loader": "^8.0.6",
     "install-peers": "^1.0.3",
diff --git a/web/ASC.Web.Components/example/stories/avatar/base/README.md b/web/ASC.Web.Components/example/stories/avatar/base/README.md
new file mode 100644
index 0000000000..9fdb71ee54
--- /dev/null
+++ b/web/ASC.Web.Components/example/stories/avatar/base/README.md
@@ -0,0 +1,27 @@
+# Avatar
+
+## Usage
+
+```js
+import { Avatar } from 'asc-web-components';
+```
+
+#### Description
+
+Required to display user avatar on page.
+
+#### Usage
+
+```js
+<Avatar size='max' role='admin' source='' pending={false} disabled={false} />
+```
+
+#### Properties
+
+| Props              | Type     | Required | Values                                    | Default   | Description                                           |
+| ------------------ | -------- | :------: | ----------------------------------------- | --------- | ----------------------------------------------------- |
+| `size`             | `oneOf`  |    -     | `retina`, `max`, `big`, `medium`, `small` | `medium`  | Tells what size avatar should be displayed            |
+| `role`             | `oneOf`  |    -     | `owner`, `admin`, `guest`, `user`         | ` `       | Adds a user role table                                |
+| `source`           | `string` |    -     | -                                         | ` `       | Avatar image source                                   |
+| `pending`          | `bool`   |    -     | -                                         | `false`   | Reports account pending                               |
+| `disabled`         | `bool`   |    -     | -                                         | `false`   | Reports that account is disabled                      |
\ No newline at end of file
diff --git a/web/ASC.Web.Components/example/stories/avatar/base/avatar.stories.js b/web/ASC.Web.Components/example/stories/avatar/base/avatar.stories.js
new file mode 100644
index 0000000000..623566afb4
--- /dev/null
+++ b/web/ASC.Web.Components/example/stories/avatar/base/avatar.stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import { Avatar } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+
+const roleOptions = ['owner', 'admin','guest','user'];
+const sizeOptions = ['retina', 'max', 'big', 'medium', 'small'];
+
+storiesOf('Components|Avatar', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withReadme(Readme))
+  .add('base', () => (
+    <Section>
+        <Avatar
+            size={select('size', sizeOptions, 'max')}
+            role={select('role', roleOptions, 'admin')}
+            source={text('source', '')}
+            pending={boolean('pending', false)}
+            disabled={boolean('disabled', false)}
+        />
+    </Section>
+  ));
\ No newline at end of file
diff --git a/web/ASC.Web.Components/src/components/avatar/index.js b/web/ASC.Web.Components/src/components/avatar/index.js
new file mode 100644
index 0000000000..47186207a2
--- /dev/null
+++ b/web/ASC.Web.Components/src/components/avatar/index.js
@@ -0,0 +1,140 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import PropTypes from 'prop-types'
+import { Icons } from '../icons'
+
+const StyledAvatar = styled.div`
+    position: relative;
+    width: ${props =>
+        (props.size === 'retina' && '360px') ||
+        (props.size === 'max' && '200px') ||
+        (props.size === 'big' && '82px') ||
+        (props.size === 'medium' && '48px') ||
+        (props.size === 'small' && '32px')
+      };
+    height: ${props =>
+        (props.size === 'retina' && '360px') ||
+        (props.size === 'max' && '200px') ||
+        (props.size === 'big' && '82px') ||
+        (props.size === 'medium' && '48px') ||
+        (props.size === 'small' && '32px')
+      };
+    border: 1px solid ${props => (props.size === 'max') ? '#bfbfbf' : '#c7c7c7'};
+    border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
+    -moz-border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
+    -webkit-border-radius: ${props => (props.size === 'max') ? '3px' : '0px'};
+`;
+
+const Role = styled.div`
+    position: absolute;
+    left: ${props =>
+        (props.size === 'retina' && '8px') ||
+        (props.size === 'max' && '6px') ||
+        (props.size === 'big' && '-2px') ||
+        (props.size === 'medium' && '-2px') ||
+        (props.size === 'small' && '-2px')
+      };
+    bottom: ${props =>
+        (props.size === 'retina' && '8px') ||
+        (props.size === 'max' && '6px') ||
+        (props.size === 'big' && '4px') ||
+        (props.size === 'medium' && '4px') ||
+        (props.size === 'small' && '4px')
+      };
+    width: ${props =>
+        (props.size === 'retina' && '40px') ||
+        (props.size === 'max' && '22px') ||
+        (props.size === 'big' && '12px') ||
+        (props.size === 'medium' && '12px') ||
+        (props.size === 'small' && '12px')
+      };
+    height: ${props =>
+        (props.size === 'retina' && '40px') ||
+        (props.size === 'max' && '22px') ||
+        (props.size === 'big' && '12px') ||
+        (props.size === 'medium' && '12px') ||
+        (props.size === 'small' && '12px')
+      };
+`;
+
+const Pending = styled.div`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: ${props => (props.size === 'retina' || props.size === 'max') ? 'none repeat scroll 0 0 white' : 'transparent'};
+    border: ${props => (props.size === 'retina' || props.size === 'max') ? '1px solid #919191' : 'none'};
+    color: #7D7D7D;
+    opacity: ${props => (props.size === 'retina' || props.size === 'max') ? '0.9' : '1'};
+    text-align: center;
+    width: auto;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    padding: 42px 16px 5px;
+
+    & > svg {
+        position: absolute;
+        top: ${props => (props.size === 'retina' || props.size === 'max') ? '40%' : '50%'};
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+`;
+
+const Disabled = styled(Pending)`
+    color: #a83200;
+`;
+
+const ImageStyled = styled.img`
+    max-width: 100%; 
+    height: auto;
+`;
+
+const Avatar = props => {
+    const {size, source, role, pending, disabled, pendingLabel, disabledLabel} = props;
+
+    return (
+        <StyledAvatar {... props}>
+            {source === '' && <Icons.PeopleIcon size='scale' />}
+            {source !== '' && <ImageStyled src={source} />}
+            <Role {... props}>
+                {role === 'guest' && <Icons.GuestIcon size='scale' />}
+                {role === 'admin' && <Icons.AdministratorIcon size='scale' />}
+                {role === 'owner' && <Icons.OwnerIcon size='scale' />}
+            </Role>
+            {pending && 
+                <Pending {... props}>
+                    {(size !== 'max' || size !== 'retina') && <Icons.CalendarIcon size={size === 'small' ? 'small' : 'big'}/>}
+                    {(size === 'max' || size === 'retina') && pendingLabel}
+                </Pending>}
+            {disabled && 
+                <Disabled {... props}>
+                    {(size !== 'max' || size !== 'retina') && <Icons.CalendarIcon size={size === 'small' ? 'small' : 'big'} color='#a83200' />}
+                    {(size === 'max' || size === 'retina') && disabledLabel}
+                </Disabled>}
+        </StyledAvatar>
+    );
+};
+
+Avatar.propTypes = {
+    size: PropTypes.oneOf(['retina', 'max', 'big', 'medium', 'small']),
+    role: PropTypes.oneOf(['owner', 'admin','guest', 'user']),
+    pending: PropTypes.bool,
+    disabled: PropTypes.bool,
+    source: PropTypes.string,
+    pendingLabel: PropTypes.string,
+    disabledLabel: PropTypes.string
+};
+
+Avatar.defaultProps = {
+    size: 'medium',
+    role: '',
+    pending: false,
+    disabled: false,
+    source: '',
+    pendingLabel: 'Pending',
+    disabledLabel: 'Disabled'
+};
+
+export default Avatar;
\ No newline at end of file
diff --git a/web/ASC.Web.Components/src/index.js b/web/ASC.Web.Components/src/index.js
index 15b846d12f..796db39af2 100644
--- a/web/ASC.Web.Components/src/index.js
+++ b/web/ASC.Web.Components/src/index.js
@@ -11,3 +11,4 @@ export { default as DropDown } from './components/drop-down'
 export { default as GroupButtonsMenu } from './components/group-buttons-menu'
 export { default as TreeMenu } from './components/tree-menu'
 export { default as TreeNode } from './components/tree-menu-node'
+export { default as Avatar } from './components/avatar'
\ No newline at end of file