diff --git a/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.html b/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.html
index 4349835..26132aa 100644
--- a/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.html
+++ b/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.html
@@ -1,12 +1,20 @@
 <div [ngClass]="className">
   <div class="toast__icon-wrapper">
-    <msfa-icon [icon]="iconType.INFO" size="l" *ngIf="error.severity === errorSeverity.HIGH"></msfa-icon>
-    <msfa-icon [icon]="iconType.WARNING" size="l" *ngIf="error.severity === errorSeverity.MEDIUM"></msfa-icon>
-    <msfa-icon [icon]="iconType.APPROVED" size="l" *ngIf="error.severity === errorSeverity.LOW"></msfa-icon>
+    <ui-icon [uiType]="UiIconType.INFO" [uiSize]="UiIconSize.L" *ngIf="error.severity === ErrorSeverity.HIGH"></ui-icon>
+    <ui-icon
+      [uiType]="UiIconType.WARNING"
+      [uiSize]="UiIconSize.L"
+      *ngIf="error.severity === ErrorSeverity.MEDIUM"
+    ></ui-icon>
+    <ui-icon
+      [uiType]="UiIconType.APPROVED"
+      [uiSize]="UiIconSize.L"
+      *ngIf="error.severity === ErrorSeverity.LOW"
+    ></ui-icon>
   </div>
   <div class="toast__content">
     <button class="toast__close-button" aria-label="Stäng meddelandet" (click)="emitCloseEvent()">
-      <msfa-icon [icon]="iconType.X" size="l"></msfa-icon>
+      <ui-icon [uiType]="UiIconType.X" [uiSize]="UiIconSize.L"></ui-icon>
     </button>
     <h3 class="toast__heading">{{ error.name }}</h3>
     <p class="toast__message">{{ error.message }}</p>
diff --git a/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.ts b/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.ts
index 51601cb..debe007 100644
--- a/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.ts
+++ b/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.component.ts
@@ -1,7 +1,8 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ErrorSeverity } from '@msfa-enums/error-severity.enum';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { CustomError } from '@msfa-models/error/custom-error';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-toast',
@@ -13,8 +14,9 @@ export class ToastComponent implements AfterViewInit {
   @Input() error: CustomError;
   @Output() closeToast = new EventEmitter<CustomError>();
 
-  iconType = IconType;
-  errorSeverity = ErrorSeverity;
+  UiIconType = UiIconType;
+  UiIconSize = UiIconSize;
+  ErrorSeverity = ErrorSeverity;
 
   ngAfterViewInit(): void {
     if (this.error.removeAfter) {
diff --git a/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.module.ts b/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.module.ts
index 849da7c..c191fc6 100644
--- a/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.module.ts
+++ b/apps/mina-sidor-fa/src/app/components/toast-list/toast/toast.module.ts
@@ -1,15 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { ToastComponent } from './toast.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ToastComponent],
-  imports: [
-    CommonModule,
-    IconModule,
-  ],
+  imports: [CommonModule, UiIconModule],
   exports: [ToastComponent],
 })
 export class ToastModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.ts
index 82ddace..21e1fa8 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/employees.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { EmployeeCompactResponse } from '@msfa-models/api/employee.response.model';
 import { Employee, EmployeesData } from '@msfa-models/employee.model';
 import { Sort } from '@msfa-models/sort.model';
@@ -20,7 +20,7 @@ export class EmployeesComponent implements OnDestroy {
   employeesData$: Observable<EmployeesData> = this.employeeService.employeesData$;
   employeesLoading$: Observable<boolean> = this.employeeService.employeesLoading$;
   sort$: Observable<Sort<keyof EmployeeCompactResponse>> = this.employeeService.sort$;
-  iconType = IconType;
+  iconType = UiIconType;
 
   constructor(private employeeService: EmployeeService) {}
 
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html
index 39d5250..223538f 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html
@@ -82,7 +82,7 @@
         <ng-container *ngIf="avropInformation.hasAvbrott">
           <dt>Status:</dt>
           <dd class="deltagare-tab-personal-information__avbrott">
-            <msfa-icon icon="warning" size="l"></msfa-icon>
+            <ui-icon [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
             Avbrott
           </dd>
           <dt>Original datum för tjänstens slut:</dt>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.ts
index 9bf63e0..5c280ab 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.ts
@@ -7,6 +7,8 @@ import { HandledareService } from '@msfa-services/handledare.service';
 import { combineLatest, Observable } from 'rxjs';
 import { distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs/operators';
 import { DeltagareCardService } from '../../deltagare-card.service';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-deltagare-tab-personal-information',
@@ -17,6 +19,8 @@ import { DeltagareCardService } from '../../deltagare-card.service';
 export class DeltagareTabPersonalInformationComponent {
   @Input() userRoles: Role[];
   @Input() handledarePickerVisible: boolean;
+  IconType = UiIconType;
+  IconSize = UiIconSize;
 
   avropInformation$: Observable<DeltagareAvrop> = this.deltagareCardService.avropInformation$;
   contactInformation$: Observable<ContactInformation> = this.deltagareCardService.contactInformation$;
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts
index 8b450f2..dd33552 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts
@@ -6,7 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { HandledarePickerFormModule } from '@msfa-shared/components/handledare-picker-form/handledare-picker-form.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
@@ -42,7 +42,7 @@ import { DeltagareCardService } from './deltagare-card.service';
     DigiNgLayoutExpansionPanelModule,
     DigiNgPopoverModule,
     UiSkeletonModule,
-    IconModule,
+    UiIconModule,
     UiLinkButtonModule,
   ],
   providers: [DeltagareCardService],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.html
index 0324e85..e8326fd 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.html
@@ -15,7 +15,7 @@
           af-variation="tertiary"
           (afOnClick)="addNewFormGroupToFormArray()"
         >
-          <msfa-icon icon="plus" size="s" slot="icon"></msfa-icon>
+          <ui-icon [uiType]="UiIconType.PLUS" [uiSize]="UiIconSize.S" slot="icon"></ui-icon>
           Lägg till yrke
         </digi-button>
         <digi-button
@@ -24,7 +24,7 @@
           af-variation="tertiary"
           (afOnClick)="removeGroup(index)"
         >
-          <msfa-icon icon="x" size="s" slot="icon"></msfa-icon>
+          <ui-icon [uiType]="UiIconType.X" [uiSize]="UiIconSize.S" slot="icon"></ui-icon>
           Ta bort yrket
         </digi-button>
       </div>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.ts
index 6cd1a3a..69b62f5 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.ts
@@ -11,6 +11,8 @@ import { map } from 'rxjs/operators';
 import { SlutredovisningFormService } from '../../slutredovisning-form.service';
 import { SlutredovisningFormStep0WorkFormData } from './slutredovisning-form-step0-work.model';
 import { SlutredovisningFormStep0WorkValidator } from './slutredovisning-form-step0-work.validator';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-slutredovisning-form-step0-work',
@@ -20,6 +22,8 @@ import { SlutredovisningFormStep0WorkValidator } from './slutredovisning-form-st
 })
 export class SlutredovisningFormStep0WorkComponent implements OnInit {
   readonly formGroupKey: MainOccupation = MainOccupation.Work;
+  readonly UiIconType = UiIconType;
+  readonly UiIconSize = UiIconSize;
   @Input() formGroupRef: FormGroup;
   @Input() formData: SlutredovisningFormStep0WorkFormData;
   @Input() shouldValidate: boolean;
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts
index 9b8b58e..c635021 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts
@@ -9,7 +9,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
 import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
@@ -70,7 +70,7 @@ import { SlutredovisningFormService } from './slutredovisning-form.service';
     DigiNgFormInputModule,
     DigiNgDialogModule,
     DigiNgFormRangeModule,
-    IconModule,
+    UiIconModule,
     UiErrorListModule,
     UiInputModule,
     SlutredovisningViewDescriptionListModule,
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html
index 4e4a22d..be1f3d4 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html
@@ -30,7 +30,7 @@
             </td>
             <ng-template #isAvbrottCell>
               <td class="deltagare-list-handelser__avbrott-cell">
-                <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
+                <ui-icon [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
                 {{handelse.description}}
               </td>
             </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts
index 76b008b..2298f7e 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts
@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { DeltagareHandelse, DeltagareHandelseData } from '@msfa-models/deltagare-handelse.model';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { DeltagareHandelserService } from '@msfa-services/deltagare-handelser.service';
 import { Observable } from 'rxjs';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-deltagare-list-handelser-dialog',
@@ -14,7 +15,8 @@ import { Observable } from 'rxjs';
 })
 export class DeltagareListHandelserDialogComponent implements OnInit, OnDestroy {
   @Input() deltagare: DeltagareCompact;
-  iconType = IconType;
+  IconType = UiIconType;
+  IconSize = UiIconSize;
   deltagareHandelserData$: Observable<DeltagareHandelseData>;
 
   constructor(private deltagareHandelserService: DeltagareHandelserService) {}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html
index 70fda39..5cd580b 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html
@@ -49,7 +49,7 @@
           <td>
             <digi-typography-time [afDateTime]="getAvropDate(singleDeltagare)"></digi-typography-time>
             <div class="deltagare-list__avbrott-alert" *ngIf="singleDeltagare.hasAvbrott">
-              <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
+              <ui-icon [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
               Avbrott
             </div>
           </td>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.ts
index ea82881..7fee26d 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.ts
@@ -1,12 +1,13 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ErrorSeverity } from '@msfa-enums/error-severity.enum';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { SortOrder } from '@msfa-enums/sort-order.enum';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { Sort } from '@msfa-models/sort.model';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-deltagare-list-table',
@@ -25,7 +26,8 @@ export class DeltagareListTableComponent {
 
   handelserDialogIsOpen$ = this.handelserDialogDeltagare$.pipe(map(genomforandereferens => !!genomforandereferens));
 
-  iconType = IconType;
+  IconType = UiIconType;
+  IconSize = UiIconSize;
   errorSeverity = ErrorSeverity;
 
   columnHeaders: { label: string; key: keyof DeltagareCompact }[] = [
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts
index eb9007f..645794d 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts
@@ -2,7 +2,7 @@ import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { DeltagareListHandelserDialogComponent } from '../deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';
 import { DeltagareListTableComponent } from './deltagare-list-table.component';
@@ -10,7 +10,7 @@ import { DeltagareListTableComponent } from './deltagare-list-table.component';
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [DeltagareListTableComponent, DeltagareListHandelserDialogComponent],
-  imports: [CommonModule, RouterModule, IconModule, UiLoaderModule, DigiNgDialogModule],
+  imports: [CommonModule, RouterModule, UiIconModule, UiLoaderModule, DigiNgDialogModule],
   exports: [DeltagareListTableComponent],
 })
 export class DeltagareListTableModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.component.html b/apps/mina-sidor-fa/src/app/pages/login/login.component.html
index 95324c0..f0fc72c 100644
--- a/apps/mina-sidor-fa/src/app/pages/login/login.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/login/login.component.html
@@ -8,13 +8,13 @@
         <ul class="login__cta-wrapper">
           <li>
             <ui-link-button class="login__button" uiSize="l" [uiFullWidth]="true" [uiHref]="mobileBankIdLink">
-              <msfa-icon icon="bankid" size="l"></msfa-icon>
+              <ui-icon [uiType]="IconType.BANKID" [uiSize]="IconSize.L"></ui-icon>
               Mobilt bank-id
             </ui-link-button>
           </li>
           <li>
             <ui-link-button class="login__button" uiSize="l" [uiFullWidth]="true" [uiHref]="bankIdLink">
-              <msfa-icon icon="bankid" size="l"></msfa-icon>
+              <ui-icon [uiType]="IconType.BANKID" [uiSize]="IconSize.L"></ui-icon>
               Bank-id
             </ui-link-button>
           </li>
@@ -26,7 +26,7 @@
               uiType="secondary"
               [uiHref]="passwordLink"
             >
-              <msfa-icon icon="user"></msfa-icon>
+              <ui-icon [uiType]="IconType.USER"></ui-icon>
               Användarnamn och lösenord
             </ui-link-button>
           </li>
diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.component.ts b/apps/mina-sidor-fa/src/app/pages/login/login.component.ts
index 5c61a44..b537a3c 100644
--- a/apps/mina-sidor-fa/src/app/pages/login/login.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/login/login.component.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { environment } from '@msfa-environment';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-login',
@@ -8,6 +10,8 @@ import { environment } from '@msfa-environment';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent {
+  IconType = UiIconType;
+  IconSize = UiIconSize;
   private readonly _baseLoginUrl = `${environment.ciam.loginUrl}&client_id=${environment.ciam.clientId}&redirect_uri=${window.location.origin}&template=msfa`;
   mobileBankIdLink = `${this._baseLoginUrl}&acr_values=bankid-mobile`;
   bankIdLink = `${this._baseLoginUrl}&acr_values=bankid`;
diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.module.ts b/apps/mina-sidor-fa/src/app/pages/login/login.module.ts
index 565533e..9f845c6 100644
--- a/apps/mina-sidor-fa/src/app/pages/login/login.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/login/login.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { LoginComponent } from './login.component';
@@ -14,7 +14,7 @@ import { LoginComponent } from './login.component';
     RouterModule.forChild([{ path: '', component: LoginComponent }]),
     LayoutModule,
     UiLinkButtonModule,
-    IconModule,
+    UiIconModule,
   ],
 })
 export class LoginModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html
index 91c02c9..0717cff 100644
--- a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html
@@ -5,7 +5,7 @@
         <div class="my-account__heading-wrapper">
           <h1>Mitt konto</h1>
           <ui-link-button uiRouterLink="/logga-ut" uiType="secondary">
-            <msfa-icon [icon]="IconType.LOGOUT"></msfa-icon>
+            <ui-icon [uiType]="IconType.LOGOUT"></ui-icon>
             Logga ut
           </ui-link-button>
         </div>
diff --git a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.ts b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.ts
index aa2593c..936bca8 100644
--- a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { Employee } from '@msfa-models/employee.model';
 import { Organization } from '@msfa-models/organization.model';
 import { Role } from '@msfa-models/role.model';
@@ -29,7 +29,7 @@ export class MyAccountComponent {
     )
   );
   allRoles: Role[] = this.roleService.allRoles;
-  readonly IconType = IconType;
+  readonly IconType = UiIconType;
 
   constructor(private userService: UserService, private roleService: RoleService, private router: Router) {}
 
diff --git a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts
index 502d19d..2eb08f3 100644
--- a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { OrganizationPickerFormModule } from '@msfa-shared/components/organization-picker-form/organization-picker-form.module';
 import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
@@ -17,7 +17,7 @@ import { MyAccountComponent } from './my-account.component';
     CommonModule,
     RouterModule.forChild([{ path: '', component: MyAccountComponent }]),
     LayoutModule,
-    IconModule,
+    UiIconModule,
     UiSkeletonModule,
     OrganizationPickerFormModule,
     RolesDialogModule,
diff --git a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.html b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.html
index e58d65a..0ce1d58 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.html
@@ -1,8 +1,8 @@
 <span class="hide-text">
   {{ transformedText }}
   <button class="hide-text__button" type="button" [attr.aria-label]="ariaLabel" (click)="toggleText()">
-    <msfa-icon *ngIf="!hideText" [icon]="iconType.EYESLASH" size="l"></msfa-icon>
-    <msfa-icon *ngIf="hideText" [icon]="iconType.EYE" size="l"></msfa-icon>
+    <ui-icon *ngIf="!hideText" [uiType]="IconType.EYESLASH" [uiSize]="IconSize.L"></ui-icon>
+    <ui-icon *ngIf="hideText" [uiType]="IconType.EYE" [uiSize]="IconSize.L"></ui-icon>
     <span class="hide-text__button-text">{{ hideText ? 'Visa' : 'Dölj'}}</span>
   </button>
 </span>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.spec.ts
index e1c5072..96b7f16 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IconComponent } from '../icon/icon.component';
 import { HideTextComponent } from './hide-text.component';
+import { IconComponent } from '@ui/icon/icon.component';
 
 describe('HideTextComponent', () => {
   let component: HideTextComponent;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.ts b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.ts
index 5398f26..4bfe39e 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-hide-text',
@@ -13,7 +14,8 @@ export class HideTextComponent {
   @Input() ariaLabelType = 'text';
 
   hideText = true;
-  iconType = IconType;
+  IconType = UiIconType;
+  IconSize = UiIconSize;
 
   get transformedText(): string {
     return this.hideText ? this.symbols : this.changingText;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.module.ts b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.module.ts
index 3b3bae6..c309c5b 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.module.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/hide-text/hide-text.module.ts
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { HideTextComponent } from './hide-text.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [HideTextComponent],
-  imports: [CommonModule, IconModule],
+  imports: [CommonModule, UiIconModule],
   exports: [HideTextComponent],
 })
 export class HideTextModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.ts b/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.ts
deleted file mode 100644
index 4691c2d..0000000
--- a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
-import { IconSize } from '@msfa-enums/icon-size.enum';
-import { IconType } from '@msfa-enums/icon-type.enum';
-
-const CUSTOM_ICONS: IconType[] = [
-  IconType.HOME,
-  IconType.SETTINGS,
-  IconType.PLUS,
-  IconType.CLIPBOARD,
-  IconType.BUILDING,
-  IconType.LOGOUT,
-  IconType.BANKID,
-];
-
-@Component({
-  selector: 'msfa-icon',
-  templateUrl: './icon.component.html',
-  styleUrls: ['./icon.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class IconComponent implements OnChanges {
-  @Input() icon: IconType;
-  @Input() size: IconSize = IconSize.M;
-
-  iconClass: string;
-  iconType = IconType;
-
-  ngOnChanges(): void {
-    this.iconClass = `icon--${this.size}`;
-  }
-
-  get isCustomIcon(): boolean {
-    return CUSTOM_ICONS.includes(this.icon);
-  }
-}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.html
index eb80c2e..f2385ba 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.html
@@ -11,17 +11,17 @@
   <ul class="navigation__list msfa__hide-on-print" *ngIf="user">
     <li class="navigation__item" *ngIf="myAccountVisible">
       <a routerLink="/mitt-konto" aria-label="Mitt konto" class="navigation__link">
-        <msfa-icon [icon]="iconType.USER" size="l"></msfa-icon>
+        <ui-icon [uiType]="IconType.USER" [uiSize]="IconSize.L"></ui-icon>
         <span class="navigation__text">{{ user.fullName }}</span>
       </a>
     </li>
     <li *ngIf="selectedOrganization && myOrganizationVisible" class="navigation__item navigation__item--without-link">
-      <msfa-icon [icon]="iconType.BUILDING" size="l"></msfa-icon>
+      <ui-icon [uiType]="IconType.BUILDING" [uiSize]="IconSize.L"></ui-icon>
       <span class="navigation__text">{{ selectedOrganization.name }}</span>
     </li>
     <!-- <li class="navigation__item">
       <a routerLink="/" class="navigation__link">
-        <msfa-icon [icon]="iconType.BELL" size="l"></msfa-icon>
+        <ui-icon [icon]="iconType.BELL" [uiSize]=IconSize.L></ui-icon>
         <span class="navigation__text">Notiser</span>
       </a>
     </li> -->
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.spec.ts
index 9e7d60a..0824bd4 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.spec.ts
@@ -1,7 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { NavigationComponent } from './navigation.component';
 
 describe('NavigationComponent', () => {
@@ -12,7 +12,7 @@ describe('NavigationComponent', () => {
     waitForAsync(() => {
       void TestBed.configureTestingModule({
         declarations: [NavigationComponent],
-        imports: [RouterTestingModule, IconModule],
+        imports: [RouterTestingModule, UiIconModule],
         schemas: [CUSTOM_ELEMENTS_SCHEMA],
       }).compileComponents();
     })
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.ts
index 8d48f18..3b9ef33 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.ts
@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Feature } from '@msfa-enums/feature.enum';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { environment } from '@msfa-environment';
 import { Employee } from '@msfa-models/employee.model';
 import { Organization } from '@msfa-models/organization.model';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-navigation',
@@ -14,7 +15,8 @@ import { Organization } from '@msfa-models/organization.model';
 export class NavigationComponent {
   @Input() user: Employee;
   @Input() selectedOrganization: Organization;
-  iconType = IconType;
+  IconType = UiIconType;
+  IconSize = UiIconSize;
   activeFeatures: Feature[] = environment.activeFeatures;
 
   get myAccountVisible(): boolean {
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.module.ts
index 5091037..0a44250 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.module.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.module.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { NavigationComponent } from './navigation.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [NavigationComponent],
-  imports: [CommonModule, RouterModule, IconModule],
+  imports: [CommonModule, RouterModule, UiIconModule],
   exports: [NavigationComponent],
 })
 export class NavigationModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html
index 2cbd6b6..e47639f 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.html
@@ -8,33 +8,33 @@
         class="sidebar__link"
         aria-label="Till startsidan för mina sidor för fristående aktörer"
       >
-        <msfa-icon class="sidebar__icon" [icon]="iconType.HOME" size="xl"></msfa-icon>
+        <ui-icon class="sidebar__icon" [uiType]="UiIconType.HOME" [uiSize]="UiIconSize.XL"> </ui-icon>
         Hem
       </a>
     </li>
     <li class="sidebar__item" *ngIf="avropVisible">
       <a [routerLink]="['/nya-deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <msfa-icon class="sidebar__icon" [icon]="iconType.CLIPBOARD" size="xl"></msfa-icon>
+        <ui-icon class="sidebar__icon" [uiType]="UiIconType.CLIPBOARD" [uiSize]="UiIconSize.XL"> </ui-icon>
         Nya deltagare
       </a>
     </li>
     <li class="sidebar__item" *ngIf="deltagareVisible">
       <a [routerLink]="['/deltagare']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <msfa-icon class="sidebar__icon" [icon]="iconType.SOK_KANDIDAT" size="xl"></msfa-icon>
+        <ui-icon class="sidebar__icon" [uiType]="UiIconType.SOK_KANDIDAT" [uiSize]="UiIconSize.XL"> </ui-icon>
         Deltagarlista
       </a>
     </li>
 
     <li class="sidebar__item" *ngIf="adminVisible">
       <a [routerLink]="['/administration']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <msfa-icon class="sidebar__icon" [icon]="iconType.SETTINGS" size="xl"></msfa-icon>
+        <ui-icon class="sidebar__icon" [uiType]="UiIconType.SETTINGS" [uiSize]="UiIconSize.XL"> </ui-icon>
         Administration
       </a>
     </li>
 
     <li class="sidebar__item" *ngIf="exportsVisible">
       <a [routerLink]="['/exporter']" [routerLinkActive]="['sidebar__link--active']" class="sidebar__link">
-        <msfa-icon class="sidebar__icon" [icon]="iconType.ARCHIVE" size="xl"></msfa-icon>
+        <ui-icon class="sidebar__icon" [uiType]="UiIconType.ARCHIVE" [uiSize]="UiIconSize.XL"> </ui-icon>
         Exporter
       </a>
     </li>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.spec.ts
index 4a2f300..bcf309c 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { SidebarComponent } from './sidebar.component';
 
 describe('SidebarComponent', () => {
@@ -10,7 +10,7 @@ describe('SidebarComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [SidebarComponent],
-      imports: [RouterTestingModule, IconModule],
+      imports: [RouterTestingModule, UiIconModule],
     }).compileComponents();
   });
 
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts
index 1ad3566..d823573 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.ts
@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Feature } from '@msfa-enums/feature.enum';
-import { IconType } from '@msfa-enums/icon-type.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { RoleEnum } from '@msfa-enums/role.enum';
 import { environment } from '@msfa-environment';
 import { Role } from '@msfa-models/role.model';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-sidebar',
@@ -13,7 +14,8 @@ import { Role } from '@msfa-models/role.model';
 })
 export class SidebarComponent {
   @Input() userRoles: Role[];
-  iconType = IconType;
+  UiIconType = UiIconType;
+  UiIconSize = UiIconSize;
   activeFeatures: Feature[] = environment.activeFeatures;
 
   get adminVisible(): boolean {
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.module.ts
index 8669b0d..7e3b0cc 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.module.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.module.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { IconModule } from '@msfa-shared/components/icon/icon.module';
 import { SidebarComponent } from './sidebar.component';
+import { UiIconModule } from '@ui/icon/icon.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [SidebarComponent],
-  imports: [CommonModule, RouterModule, IconModule],
+  imports: [CommonModule, RouterModule, UiIconModule],
   exports: [SidebarComponent],
 })
 export class SidebarModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/icon-size.enum.ts b/libs/ui/src/icon/icon-size.enum.ts
similarity index 71%
rename from apps/mina-sidor-fa/src/app/shared/enums/icon-size.enum.ts
rename to libs/ui/src/icon/icon-size.enum.ts
index 2d0b486..80e94bf 100644
--- a/apps/mina-sidor-fa/src/app/shared/enums/icon-size.enum.ts
+++ b/libs/ui/src/icon/icon-size.enum.ts
@@ -1,4 +1,4 @@
-export enum IconSize {
+export enum UiIconSize {
   S = 's',
   M = 'm',
   L = 'l',
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/icon-type.enum.ts b/libs/ui/src/icon/icon-type.enum.ts
similarity index 95%
rename from apps/mina-sidor-fa/src/app/shared/enums/icon-type.enum.ts
rename to libs/ui/src/icon/icon-type.enum.ts
index d02a872..b9121bc 100644
--- a/apps/mina-sidor-fa/src/app/shared/enums/icon-type.enum.ts
+++ b/libs/ui/src/icon/icon-type.enum.ts
@@ -1,4 +1,4 @@
-export enum IconType {
+export enum UiIconType {
   HOME = 'home', // Custom
   SETTINGS = 'settings', // Custom
   PLUS = 'plus', // Custom
diff --git a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html b/libs/ui/src/icon/icon.component.html
similarity index 92%
rename from apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html
rename to libs/ui/src/icon/icon.component.html
index 96f3f33..9700ad6 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html
+++ b/libs/ui/src/icon/icon.component.html
@@ -1,19 +1,25 @@
 <ui-icon-custom *ngIf="isCustomIcon; else digiIcon" aria-hidden="true" class="icon" [ngClass]="[iconClass]">
-  <svg *ngIf="icon === iconType.BANKID" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 169 158">
+  <svg
+    *ngIf="uiType === iconType.BANKID"
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="25"
+    viewBox="0 0 169 158"
+  >
     <path
       d="M45.916 135.23c5.268 0 9.905 2.083 9.015 7.63l-1.005 6.257c-.355 2.211-.289 2.873 2.253 2.922l-2.583 5.878c-4.495.291-6.67-.167-7.75-2.046-2.384 1.422-5.006 2.129-7.814 2.129-5.093 0-6.845-2.541-6.392-5.378.213-1.34 1.03-2.67 2.328-3.756 2.794-2.336 9.715-2.673 12.42-4.462.236-2.002-.6-2.712-3.15-2.712-2.979 0-5.466.961-9.714 3.754l1.035-6.47c3.698-2.58 7.251-3.747 11.357-3.747zm32.032 0c4.892 0 7.172 3.008 6.407 7.968L82.075 158h-8.773l1.889-12.256c.342-2.244-.3-3.266-2.028-3.266-1.392 0-2.649.764-3.872 2.414L67.27 158H58.5l3.446-22.395h8.774l-.452 2.929c2.772-2.376 4.896-3.305 7.68-3.305zm22.058-7.436l-2.19 14.881 8.377-8.065H117l-10.759 9.971L114.866 158h-10.973l-6.656-10.808h-.082L95.567 158H86.82l4.438-30.206h8.747zm-78.437.93c7.265 0 9.048 3.578 8.525 6.855-.423 2.664-2.276 4.617-5.514 5.906 4.08 1.496 5.669 3.863 5.084 7.52-.733 4.616-4.87 8.066-10.257 8.066H0l4.514-28.347h17.055zm131.362 0c11.337 0 14.611 7.98 13.563 14.547-1.03 6.442-6.288 13.8-16.25 13.8h-16.53l4.532-28.347h14.685zm-19.681 0l-4.553 28.347h-10.304l4.554-28.347h10.303zm-87.452 19.348c-2.392 1.462-6.8 1.21-7.281 4.213-.228 1.42.685 2.46 2.151 2.46 1.427 0 3.164-.583 4.517-1.5-.091-.498-.047-1.042.113-2.043l.5-3.13zm-30.297-3.262h-3.332l-1.265 7.938h3.076c3.421 0 5.43-1.33 5.872-4.115.38-2.37-1.017-3.823-4.351-3.823zm134.677-9.357h-2.75l-2.379 14.884h2.707c4.978 0 7.721-2.37 8.535-7.439.595-3.741-.573-7.445-6.113-7.445zm-133.187-2.41h-2.95l-1.185 7.44h2.95c3.334 0 4.889-1.704 5.212-3.74.344-2.158-.692-3.7-4.027-3.7zM43.87 14.405c3.239 0 5.74.667 7.04 1.88.907.849 1.245 1.96.977 3.219-.26 1.215-1.64 2.797-3.71 4.223-5.866 4.066-4.85 8.28-4.397 9.477 1.358 3.601 5.892 5.544 9.462 5.544h7.58l-7.07 43.956h.121c-2.632 16.426-4.59 28.813-4.953 31.148H6.964c.804-5.165 11.305-70.804 11.97-75.091h.645l2.179.005h.502l1.696.004.446.001.62.001h.371l.172.001.451.001h.504l.058.001h.076c5.043-.027 9.69-2.3 11.844-5.793 2.106-3.388 1.305-7.02-2.076-9.482-1.127-.818-2.424-2.145-2.17-3.787.348-2.217 4.171-5.308 9.617-5.308zM109.119 0c38.623 0 65.555 16.776 58.858 58.635-5.415 33.793-32.973 55.218-66.709 55.218H93.27l5.425-34.104c13.664-.152 25.113-6.51 27.478-21.265 2.54-15.881-5.526-22.699-20.537-22.815.003-.024.003-.037.003-.037h-11.04c-2.542 0-5.808-1.395-6.655-3.641-.264-.696-.802-3.206 3.314-6.068 1.58-1.101 4.324-3.347 4.9-6.034.471-2.252-.198-4.429-1.845-5.967-1.876-1.757-5.01-2.69-9.061-2.69-6.765 0-11.939 4.042-12.527 7.813-.037.245-.061.532-.061.846 0 1.5.59 3.709 3.397 5.763 1.03.753 2.028 1.86 2.028 3.341 0 .679-.21 1.43-.723 2.267-1.608 2.612-5.341 4.378-9.301 4.4l-7.243-.017L66.526 0z"
       transform="translate(-100 -239) translate(100 239)"
       fill="currentColor"
     />
   </svg>
-  <svg *ngIf="icon === iconType.HOME" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="25" height="25">
+  <svg *ngIf="uiType === iconType.HOME" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="25" height="25">
     <path
       d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
       fill="currentColor"
     ></path>
   </svg>
   <svg
-    *ngIf="icon === iconType.SETTINGS"
+    *ngIf="uiType === iconType.SETTINGS"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
     width="25"
@@ -25,7 +31,7 @@
     ></path>
   </svg>
 
-  <svg *ngIf="icon === iconType.PLUS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="25" height="25">
+  <svg *ngIf="uiType === iconType.PLUS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="25" height="25">
     <path
       fill="currentColor"
       d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
@@ -33,7 +39,7 @@
   </svg>
 
   <svg
-    *ngIf="icon === iconType.BUILDING"
+    *ngIf="uiType === iconType.BUILDING"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 448 512"
     width="25"
@@ -45,7 +51,13 @@
     ></path>
   </svg>
 
-  <svg *ngIf="icon === iconType.LOGOUT" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25">
+  <svg
+    *ngIf="uiType === iconType.LOGOUT"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    width="25"
+    height="25"
+  >
     <path
       d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"
       fill="currentColor"
@@ -53,7 +65,7 @@
   </svg>
 
   <svg
-    *ngIf="icon === iconType.CLIPBOARD"
+    *ngIf="uiType === iconType.CLIPBOARD"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 384 512"
     width="25"
@@ -67,7 +79,7 @@
 </ui-icon-custom>
 
 <ng-template #digiIcon>
-  <ng-container [ngSwitch]="icon">
+  <ng-container [ngSwitch]="uiType">
     <digi-icon-user-alt *ngSwitchCase="iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
     <digi-icon-users-solid *ngSwitchCase="iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
     <digi-icon-bell *ngSwitchCase="iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.scss b/libs/ui/src/icon/icon.component.scss
similarity index 88%
rename from apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.scss
rename to libs/ui/src/icon/icon.component.scss
index ce0d919..b8638ca 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.scss
+++ b/libs/ui/src/icon/icon.component.scss
@@ -1,4 +1,4 @@
-@import 'mixins/icon';
+@import 'libs/styles/src/mixins/icon';
 
 :host {
   display: inline-flex;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.spec.ts b/libs/ui/src/icon/icon.component.spec.ts
similarity index 100%
rename from apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.spec.ts
rename to libs/ui/src/icon/icon.component.spec.ts
diff --git a/libs/ui/src/icon/icon.component.ts b/libs/ui/src/icon/icon.component.ts
new file mode 100644
index 0000000..7129b22
--- /dev/null
+++ b/libs/ui/src/icon/icon.component.ts
@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { UiIconSize } from '@ui/icon/icon-size.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+
+const CUSTOM_ICONS: UiIconType[] = [
+  UiIconType.HOME,
+  UiIconType.SETTINGS,
+  UiIconType.PLUS,
+  UiIconType.CLIPBOARD,
+  UiIconType.BUILDING,
+  UiIconType.LOGOUT,
+  UiIconType.BANKID,
+];
+
+@Component({
+  selector: 'ui-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IconComponent implements OnChanges {
+  @Input() uiType: UiIconType;
+  @Input() uiSize: UiIconSize = UiIconSize.M;
+
+  iconClass: string;
+  iconType = UiIconType;
+
+  ngOnChanges(): void {
+    this.iconClass = `icon--${this.uiSize}`;
+  }
+
+  get isCustomIcon(): boolean {
+    return CUSTOM_ICONS.includes(this.uiType);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.module.ts b/libs/ui/src/icon/icon.module.ts
similarity index 93%
rename from apps/mina-sidor-fa/src/app/shared/components/icon/icon.module.ts
rename to libs/ui/src/icon/icon.module.ts
index 7534b13..6d883b7 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.module.ts
+++ b/libs/ui/src/icon/icon.module.ts
@@ -9,4 +9,4 @@ import { IconComponent } from './icon.component';
   imports: [CommonModule, UiIconCustomModule],
   exports: [IconComponent],
 })
-export class IconModule {}
+export class UiIconModule {}