diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..15febd7
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,40 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "parserOptions": {
+        "project": ["libs/common-ui/tsconfig.*?.json"]
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "iqser",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "iqser",
+            "style": "kebab-case"
+          }
+        ]
+      },
+      "plugins": ["@angular-eslint/eslint-plugin", "@typescript-eslint"]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
new file mode 100644
index 0000000..2d6e7ea
--- /dev/null
+++ b/src/assets/styles/_buttons.scss
@@ -0,0 +1,111 @@
+// This rebel line is crying (in WebStorm) but it actually works
+@import '~/src/assets/styles/variables';
+
+$dark-bg-hover: #e2e4e9 !default;
+
+.mat-button,
+.mat-flat-button {
+    border-radius: 17px !important;
+    font-size: 13px !important;
+    height: 34px;
+    display: flex !important;
+    align-items: center;
+
+    .mat-button-wrapper {
+        display: flex;
+        align-items: center;
+        line-height: 34px;
+        transition: opacity 0.2s;
+        width: 100%;
+
+        > *:not(:last-child) {
+            margin-right: 6px;
+        }
+
+        > span {
+            margin: auto;
+        }
+    }
+
+    &.mat-button-disabled {
+        .mat-button-wrapper {
+            opacity: 0.3;
+        }
+    }
+}
+
+.mat-flat-button.mat-primary,
+.mat-button.primary {
+    padding: 0 14px;
+    transition: background-color 0.2s, color 0.2s;
+
+    background-color: $primary;
+
+    &.mat-button-disabled {
+        background-color: $primary;
+
+        .mat-button-wrapper {
+            color: $white;
+            opacity: 0.5;
+        }
+    }
+
+    &:not(.mat-button-disabled):hover {
+        background-color: $primary-2;
+    }
+}
+
+iqser-icon-button,
+redaction-chevron-button,
+redaction-user-button,
+redaction-circle-button {
+    position: relative;
+    display: flex;
+
+    button {
+        font-weight: 400 !important;
+        transition: background-color 0.2s;
+
+        &.overlay {
+            background: rgba($primary, 0.1);
+        }
+
+        &.primary {
+            font-weight: 500 !important;
+            background-color: $primary;
+            color: $white;
+
+            &:hover {
+                background-color: $primary-2;
+            }
+        }
+
+        &.dark-bg:hover {
+            background-color: $dark-bg-hover;
+        }
+    }
+
+    .dot {
+        background: $primary;
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
+redaction-chevron-button,
+redaction-circle-button,
+iqser-icon-button {
+    &[aria-expanded='true'] {
+        button {
+            background: rgba($primary, 0.1);
+
+            &.primary {
+                background: $primary-2;
+            }
+        }
+    }
+}
diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
new file mode 100644
index 0000000..46e81fc
--- /dev/null
+++ b/src/assets/styles/common.scss
@@ -0,0 +1 @@
+@import 'buttons';
diff --git a/src/index.ts b/src/index.ts
index 3b5ad4f..e92fee3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,3 @@
 export * from './lib/common-ui.module';
+export * from './lib/buttons/icon-button/icon-button.component';
+export * from './lib/buttons/icon-button/icon-button-type.model';
diff --git a/src/lib/buttons/icon-button/icon-button-type.model.ts b/src/lib/buttons/icon-button/icon-button-type.model.ts
new file mode 100644
index 0000000..0b0646e
--- /dev/null
+++ b/src/lib/buttons/icon-button/icon-button-type.model.ts
@@ -0,0 +1,7 @@
+export const IconButtonTypes = {
+    default: 'default',
+    show_bg: 'show_bg',
+    primary: 'primary'
+} as const;
+
+export type IconButtonType = keyof typeof IconButtonTypes;
diff --git a/src/lib/buttons/icon-button/icon-button.component.html b/src/lib/buttons/icon-button/icon-button.component.html
new file mode 100644
index 0000000..eba6a0b
--- /dev/null
+++ b/src/lib/buttons/icon-button/icon-button.component.html
@@ -0,0 +1,14 @@
+<button
+    (click)="action.emit($event)"
+    [class.has-icon]="!!icon"
+    [class.overlay]="showDot"
+    [class.primary]="type === iconButtonTypes.primary"
+    [class.show-bg]="type === iconButtonTypes.show_bg"
+    [disabled]="disabled"
+    mat-button
+    type="button"
+>
+    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
+    <span>{{ label }}</span>
+</button>
+<div *ngIf="showDot" class="dot"></div>
diff --git a/src/lib/buttons/icon-button/icon-button.component.scss b/src/lib/buttons/icon-button/icon-button.component.scss
new file mode 100644
index 0000000..c8de10e
--- /dev/null
+++ b/src/lib/buttons/icon-button/icon-button.component.scss
@@ -0,0 +1,22 @@
+@import '../../../assets/styles/common';
+
+button {
+    padding: 0 14px;
+    width: 100%;
+
+    &.has-icon {
+        padding: 0 14px 0 10px;
+    }
+
+    &.show-bg {
+        background-color: $grey-6;
+
+        &:not(.mat-button-disabled):hover {
+            background-color: $dark-bg-hover;
+        }
+    }
+
+    mat-icon {
+        width: 14px;
+    }
+}
diff --git a/src/lib/buttons/icon-button/icon-button.component.ts b/src/lib/buttons/icon-button/icon-button.component.ts
new file mode 100644
index 0000000..7a3756b
--- /dev/null
+++ b/src/lib/buttons/icon-button/icon-button.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconButtonType, IconButtonTypes } from './icon-button-type.model';
+
+@Component({
+    selector: 'iqser-icon-button',
+    templateUrl: './icon-button.component.html',
+    styleUrls: ['./icon-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IconButtonComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+
+    @Input() icon!: string;
+    @Input() label!: string;
+    @Input() showDot = false;
+    @Input() disabled = false;
+    @Input() type: IconButtonType = IconButtonTypes.default;
+    @Output() action = new EventEmitter<any>();
+}
diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts
index e4e6413..b7ecde0 100644
--- a/src/lib/common-ui.module.ts
+++ b/src/lib/common-ui.module.ts
@@ -1,7 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { IconButtonComponent } from './buttons/icon-button/icon-button.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+const buttons = [IconButtonComponent];
+
+const matModules = [MatIconModule, MatButtonModule];
 
 @NgModule({
-    imports: [CommonModule]
+    declarations: [...buttons],
+    imports: [CommonModule, ...matModules],
+    exports: [...buttons, ...matModules]
 })
 export class CommonUiModule {}