diff --git a/projects/portal/docs/processors/helpers/file-writer.js b/projects/portal/docs/processors/helpers/file-writer.js
index 0945c89bc..7366f6c87 100644
--- a/projects/portal/docs/processors/helpers/file-writer.js
+++ b/projects/portal/docs/processors/helpers/file-writer.js
@@ -119,12 +119,12 @@ import { Component } from '@angular/core';
 export class Sample{{component}}ViewComponent {
   hideSampleCodeTabs = true;
   sampleCodeButtonLabel = 'Talk is cheap, show me the code!';
-  sampleCodeButtonIcon = 'ph ph-plus';
+  sampleCodeButtonIcon = 'an an-plus';
 
   toggleSampleCodeTabs() {
     this.hideSampleCodeTabs = !this.hideSampleCodeTabs;
     this.sampleCodeButtonLabel = this.hideSampleCodeTabs ? 'Talk is cheap, show me the code!' : 'Okay, hide the code';
-    this.sampleCodeButtonIcon = this.hideSampleCodeTabs ? 'ph ph-plus' : 'ph ph-minus';
+    this.sampleCodeButtonIcon = this.hideSampleCodeTabs ? 'an an-plus' : 'an an-minus';
   }
 }
 `;
@@ -206,7 +206,7 @@ export class Doc{{component}}Component implements OnInit, OnDestroy {
   activeTab = 'doc';
 
   actions: Array<{}> = [
-    { label: 'Documentação', action: this.goBack.bind(this), icon: 'ph ph-file-text' },
+    { label: 'Documentação', action: this.goBack.bind(this), icon: 'an an-file-text' },
     { label: 'Colabore', action: this.improveDocs.bind(this) },
   ];
 
diff --git a/projects/portal/src/app/app.component.ts b/projects/portal/src/app/app.component.ts
index ed1377b42..c43ba0f40 100644
--- a/projects/portal/src/app/app.component.ts
+++ b/projects/portal/src/app/app.component.ts
@@ -91,11 +91,11 @@ export class AppComponent implements OnInit, OnDestroy {
 
   get actions() {
     return [
-      { icon: 'ph ph-github-logo', link: 'https://github.com/po-ui', label: 'Github' },
-      { icon: 'ph ph-x-logo', link: 'https://twitter.com/@pouidev', label: 'Twitter' },
-      { icon: 'ph ph-instagram-logo', link: 'https://www.instagram.com/pouidev/', label: 'Instagram' },
+      { icon: 'an an-github-logo', link: 'https://github.com/po-ui', label: 'Github' },
+      { icon: 'an an-x-logo', link: 'https://twitter.com/@pouidev', label: 'Twitter' },
+      { icon: 'an an-instagram-logo', link: 'https://www.instagram.com/pouidev/', label: 'Instagram' },
       {
-        icon: `${this.themeStorage === 'po-theme-dark' ? 'ph ph-sun' : 'ph ph-moon'}`,
+        icon: `${this.themeStorage === 'po-theme-dark' ? 'an an-sun' : 'an an-moon'}`,
         label: 'tema',
         action: this.changeTheme.bind(this)
       }
diff --git a/projects/portal/src/app/icons/icons.component.html b/projects/portal/src/app/icons/icons.component.html
index 3c264cdbc..3ace7b7f4 100644
--- a/projects/portal/src/app/icons/icons.component.html
+++ b/projects/portal/src/app/icons/icons.component.html
@@ -60,14 +60,14 @@
       <div class="po-row po-pb-2">
         <div class="po-sm-12">
           <h3 class="po-pt-1">Como Usar?</h3>
-          <pre><code appCodeHighlight class="language-html">&lt;po-input p-icon=&quot;ph ph-user&quot; p-label=&quot;PO input&quot;&gt;&lt;/po-input&gt;</code></pre>
+          <pre><code appCodeHighlight class="language-html">&lt;po-input p-icon=&quot;an an-user&quot; p-label=&quot;PO input&quot;&gt;&lt;/po-input&gt;</code></pre>
           <p class="po-pt-2 po-pb-2">
             Outra opção seria a customização do ícone através do TemplateRef, conforme exemplo abaixo:
           </p>
           <pre><code appCodeHighlight class="language-html">&lt;po-input [p-icon]="template" p-label="input template"&gt;&lt;/po-input&gt;\n
 ...
 &lt;ng-template #template&gt;
-  &lt;i class="ph ph-arrow-fat-line-down"&gt;&lt;/i&gt;
+  &lt;i class="an an-arrow-fat-line-down"&gt;&lt;/i&gt;
 &lt;/ng-template&gt;</code></pre>
         </div>
       </div>
@@ -99,7 +99,7 @@ <h3 class="po-pt-1">Como Usar?</h3>
         </div>
       </po-container>
       <div class="ph pallet-full"></div>
-      <div class="ph-fill pallet-full"></div>
+      <div class="an-fill pallet-full"></div>
 
       <div class="grid grid-flow gap-16 po-pt-3 po-pb-3">
         <po-loading-overlay p-text="Carregando ícones" p-size="lg" *ngIf="loading; else content"> </po-loading-overlay>
diff --git a/projects/portal/src/app/icons/icons.component.ts b/projects/portal/src/app/icons/icons.component.ts
index f5203447f..4714c584c 100644
--- a/projects/portal/src/app/icons/icons.component.ts
+++ b/projects/portal/src/app/icons/icons.component.ts
@@ -51,7 +51,7 @@ export class IconsComponent {
         return {
           value: _iconName,
           tags: _iconTags,
-          code: `ph${isFill ? '-fill' : ''} ph-${_iconName}`
+          code: `an${isFill ? '-fill' : ''} an-${_iconName}`
         };
       });
 
diff --git a/projects/templates/src/lib/components/po-page-change-password/po-page-change-password.component.spec.ts b/projects/templates/src/lib/components/po-page-change-password/po-page-change-password.component.spec.ts
index 5c225e5bf..3619f7282 100644
--- a/projects/templates/src/lib/components/po-page-change-password/po-page-change-password.component.spec.ts
+++ b/projects/templates/src/lib/components/po-page-change-password/po-page-change-password.component.spec.ts
@@ -659,8 +659,8 @@ describe('PoPageChangePasswordComponent:', () => {
       component.requirements = requirements;
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-check.po-page-change-password-required-ok')).toBeTruthy();
-      expect(nativeElement.querySelector('.ph-minus po-page-change-password-required-minus')).toBeFalsy();
+      expect(nativeElement.querySelector('.an-check.po-page-change-password-required-ok')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-minus po-page-change-password-required-minus')).toBeFalsy();
     });
 
     it('should add a `po-icon-minus` for a requirement with false status', () => {
@@ -668,8 +668,8 @@ describe('PoPageChangePasswordComponent:', () => {
       component.requirements = requirements;
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-minus.po-page-change-password-required-minus')).toBeTruthy();
-      expect(nativeElement.querySelector('.ph-check.po-page-change-password-required-ok')).toBeFalsy();
+      expect(nativeElement.querySelector('.an-minus.po-page-change-password-required-minus')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-check.po-page-change-password-required-ok')).toBeFalsy();
     });
 
     it('should add requirement text', () => {
diff --git a/projects/templates/src/lib/components/po-page-dynamic-search/samples/sample-po-page-dynamic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.ts b/projects/templates/src/lib/components/po-page-dynamic-search/samples/sample-po-page-dynamic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.ts
index cfafc4186..61a33e21c 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-search/samples/sample-po-page-dynamic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-search/samples/sample-po-page-dynamic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.ts
@@ -34,25 +34,25 @@ export class SamplePoPageDynamicSearchHiringProcessesComponent implements OnInit
       label: 'Hide Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isVisibleRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isHideRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye-on'
+      icon: 'an an-eye-on'
     },
     {
       label: 'Hide Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isVisibleCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isHideCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye-on'
+      icon: 'an an-eye-on'
     }
   ];
 
diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts
index 4f685dcf6..ab295ca43 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts
@@ -51,7 +51,7 @@ export interface PoPageDynamicTableCustomAction {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-component
-   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'ph ph-newspaper' }]">
+   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
    * </po-component>
    * ```
    *
diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts
index f809b21a6..b8060d8a6 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts
@@ -60,7 +60,7 @@ export interface PoPageDynamicTableCustomTableAction {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-component
-   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'ph ph-newspaper' }]">
+   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
    * </po-component>
    * ```
    *
diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts
index 6c13e0d6d..190e4c2ae 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts
@@ -727,7 +727,7 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
    * {
    *   label: 'Update',
    *   action: this.updateTable.bind(this),
-   *   icon: 'ph-arrows-clockwise'
+   *   icon: 'an-arrows-clockwise'
    * }]
    *
    * updateTable() {
diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-hotels/sample-po-page-dynamic-table-hotels.component.ts b/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-hotels/sample-po-page-dynamic-table-hotels.component.ts
index 055080434..7729c75f0 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-hotels/sample-po-page-dynamic-table-hotels.component.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-hotels/sample-po-page-dynamic-table-hotels.component.ts
@@ -95,25 +95,25 @@ export class SamplePoPageDynamicTableHotelsComponent {
       label: 'Hide Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isVisibleRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isHideRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye'
+      icon: 'an an-eye'
     },
     {
       label: 'Hide Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isVisibleCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isHideCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye'
+      icon: 'an an-eye'
     }
   ];
 
@@ -121,7 +121,7 @@ export class SamplePoPageDynamicTableHotelsComponent {
     {
       label: 'Details',
       action: this.onClickHotelDetail.bind(this),
-      icon: 'ph ph-user'
+      icon: 'an an-user'
     }
   ];
 
diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-users/sample-po-page-dynamic-table-users.component.ts b/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-users/sample-po-page-dynamic-table-users.component.ts
index 15e9e8d4f..644808e12 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-users/sample-po-page-dynamic-table-users.component.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-table/samples/sample-po-page-dynamic-table-users/sample-po-page-dynamic-table-users.component.ts
@@ -81,27 +81,27 @@ export class SamplePoPageDynamicTableUsersComponent implements OnInit {
       label: 'Actions Right',
       action: this.onClickActionsSide.bind(this),
       visible: this.isVisibleActionsRight.bind(this),
-      icon: 'ph ph-caret-right'
+      icon: 'an an-caret-right'
     },
     {
       label: 'Actions Left',
       action: this.onClickActionsSide.bind(this),
       visible: this.isVisibleActionsLeft.bind(this),
-      icon: 'ph ph-caret-left'
+      icon: 'an an-caret-left'
     },
     {
       label: 'Fixed Filter',
       action: this.onClickFixedFilter.bind(this),
       visible: this.isVisibleFixedFilter.bind(this),
-      icon: 'ph ph-lock'
+      icon: 'an an-lock'
     },
     {
       label: 'Not Fixed Filter',
       action: this.onClickFixedFilter.bind(this),
       visible: this.isVisibleNotFixedFilter.bind(this),
-      icon: 'ph ph-lock-open'
+      icon: 'an an-lock-open'
     },
-    { label: 'Print', action: this.printPage.bind(this), icon: 'ph ph-printer' }
+    { label: 'Print', action: this.printPage.bind(this), icon: 'an an-printer' }
   ];
 
   tableCustomActions: Array<PoPageDynamicTableCustomTableAction> = [
@@ -109,13 +109,13 @@ export class SamplePoPageDynamicTableUsersComponent implements OnInit {
       label: 'Details',
       action: this.onClickUserDetail.bind(this),
       disabled: this.isUserInactive.bind(this),
-      icon: 'ph ph-user'
+      icon: 'an an-user'
     },
     {
       label: 'Dependents',
       action: this.onClickDependents.bind(this),
       visible: this.hasDependents.bind(this),
-      icon: 'ph ph-user'
+      icon: 'an an-user'
     }
   ];
 
@@ -127,7 +127,7 @@ export class SamplePoPageDynamicTableUsersComponent implements OnInit {
       {
         label: 'Download .csv',
         action: this.usersService.downloadCsv.bind(this.usersService, this.serviceApi),
-        icon: 'ph ph-download-simple'
+        icon: 'an an-download-simple'
       }
     ];
   }
diff --git a/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts b/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
index e420e1438..656d96898 100644
--- a/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
+++ b/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
@@ -90,7 +90,7 @@ export class PoBadgeBaseComponent {
    * ```
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-badge p-icon="ph ph-user"></po-badge>
+   * <po-badge p-icon="an an-user"></po-badge>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts
index 1401752d6..d71a88ac8 100644
--- a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts
+++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts
@@ -18,9 +18,9 @@ export class SamplePoBadgeLabsComponent implements OnInit {
   propertiesOptions: Array<PoCheckboxGroupOption> = [{ value: 'showBorder', label: 'Show Border' }];
 
   iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph-check', value: 'ph ph-check' },
-    { label: 'ph-check-circle', value: 'ph ph-check-circle' },
-    { label: 'ph ph-check', value: 'ph ph-check' },
+    { label: 'an-check', value: 'an an-check' },
+    { label: 'an-check-circle', value: 'an an-check-circle' },
+    { label: 'an an-check', value: 'an an-check' },
     { label: 'fa-minus', value: 'fa fa-minus' },
     { label: 'true (Enabled when status is settled)', value: 'true', disabled: true },
     { label: 'None', value: 'false' }
diff --git a/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts b/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts
index bd80634bb..4f6f214cc 100644
--- a/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts
+++ b/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts
@@ -25,7 +25,7 @@ export interface PoButtonGroupItem {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * buttons: Array<PoButtonGroupItem> = [
-   *  { label: 'Button 1', action: this.action.bind(this), icon: 'ph ph-user' },
+   *  { label: 'Button 1', action: this.action.bind(this), icon: 'an an-user' },
    * ];
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
diff --git a/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.ts b/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.ts
index c33d16abb..8bfcd2cc9 100644
--- a/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.ts
+++ b/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.ts
@@ -9,9 +9,9 @@ import { PoButtonGroupItem, PoNotificationService } from '@po-ui/ng-components';
 })
 export class SamplePoButtonGroupAttendanceComponent {
   attendances: Array<PoButtonGroupItem> = [
-    { label: 'Appointment', icon: 'ph ph-calendar-dots', action: this.getPassword.bind(this) },
-    { label: 'Emergency', icon: 'ph ph-syringe', action: this.getPassword.bind(this) },
-    { label: 'Exams', icon: 'ph ph-flask', action: this.getPassword.bind(this) }
+    { label: 'Appointment', icon: 'an an-calendar-dots', action: this.getPassword.bind(this) },
+    { label: 'Emergency', icon: 'an an-syringe', action: this.getPassword.bind(this) },
+    { label: 'Exams', icon: 'an an-flask', action: this.getPassword.bind(this) }
   ];
 
   constructor(private poNotification: PoNotificationService) {}
diff --git a/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.ts b/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.ts
index 89572e9f4..6f2638c8b 100644
--- a/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.ts
+++ b/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.ts
@@ -19,8 +19,8 @@ export class SamplePoButtonGroupLabsComponent implements OnInit {
   toggle: PoButtonGroupToggle;
 
   iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph ph-newspaper', value: 'ph ph-newspaper' },
-    { label: 'ph ph-calendar-dots', value: 'ph ph-calendar-dots' },
+    { label: 'an an-newspaper', value: 'an an-newspaper' },
+    { label: 'an an-calendar-dots', value: 'an an-calendar-dots' },
     { label: 'fa fa-podcast', value: 'fa fa-podcast' },
     { label: 'fa fa-calculator', value: 'fa fa-calculator' }
   ];
diff --git a/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.ts b/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.ts
index 8e3aa718b..ab1d8bc2c 100644
--- a/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.ts
+++ b/projects/ui/src/lib/components/po-button-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.ts
@@ -15,20 +15,20 @@ export class SamplePoButtonGroupPostComponent {
   textArea: string = '"Luck is a thing that comes in many forms and who can recognize her?" - Ernest Hemingway';
 
   fontStyle: Array<PoButtonGroupItem> = [
-    { icon: 'ph ph-text-b', action: () => (this.setBold = !this.setBold), tooltip: 'Bold' },
-    { icon: 'ph ph-text-italic', action: () => (this.setItalic = !this.setItalic), tooltip: 'Italic' },
-    { icon: 'ph ph-text-underline', action: () => (this.setUnderline = !this.setUnderline), tooltip: 'Underline' }
+    { icon: 'an an-text-b', action: () => (this.setBold = !this.setBold), tooltip: 'Bold' },
+    { icon: 'an an-text-italic', action: () => (this.setItalic = !this.setItalic), tooltip: 'Italic' },
+    { icon: 'an an-text-underline', action: () => (this.setUnderline = !this.setUnderline), tooltip: 'Underline' }
   ];
 
   textAlign: Array<PoButtonGroupItem> = [
     {
-      icon: 'ph ph-text-align-left',
+      icon: 'an an-text-align-left',
       selected: true,
       action: () => (this.setTextAlignment = 'left'),
       tooltip: 'Left align'
     },
-    { icon: 'ph ph-text-align-center', action: () => (this.setTextAlignment = 'center'), tooltip: 'Center align' },
-    { icon: 'ph ph-text-align-right', action: () => (this.setTextAlignment = 'right'), tooltip: 'Right align' },
-    { icon: 'ph ph-text-align-justify', action: () => (this.setTextAlignment = 'justify'), tooltip: 'Justify' }
+    { icon: 'an an-text-align-center', action: () => (this.setTextAlignment = 'center'), tooltip: 'Center align' },
+    { icon: 'an an-text-align-right', action: () => (this.setTextAlignment = 'right'), tooltip: 'Right align' },
+    { icon: 'an an-text-align-justify', action: () => (this.setTextAlignment = 'justify'), tooltip: 'Justify' }
   ];
 }
diff --git a/projects/ui/src/lib/components/po-button/po-button-base.component.ts b/projects/ui/src/lib/components/po-button/po-button-base.component.ts
index 2510e85e6..f5a1aaafb 100644
--- a/projects/ui/src/lib/components/po-button/po-button-base.component.ts
+++ b/projects/ui/src/lib/components/po-button/po-button-base.component.ts
@@ -89,7 +89,7 @@ export class PoButtonBaseComponent {
    *
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-button p-icon="ph ph-user" p-label="PO button"></po-button>
+   * <po-button p-icon="an an-user" p-label="PO button"></po-button>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.e2e-spec.ts b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.e2e-spec.ts
index 3467923f2..6f3d8a613 100644
--- a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.e2e-spec.ts
+++ b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.e2e-spec.ts
@@ -19,10 +19,10 @@ describe('SamplePoButtonLabs E2E', () => {
     expect(button.poModal.isPresent()).toBeFalsy();
   });
 
-  it('Check `po-button` show icon `ph ph-newspaper` after select icon `ph ph-newspaper`', () => {
+  it('Check `po-button` show icon `an an-newspaper` after select icon `an an-newspaper`', () => {
     button.poRadioLogoPO.click();
 
-    expect(button.poButtonIcon.getAttribute('class')).toContain('ph ph-newspaper');
+    expect(button.poButtonIcon.getAttribute('class')).toContain('an an-newspaper');
   });
 
   it('Check `po-button` show icon `po-icon-user` after select icon `po-icon-user`', () => {
diff --git a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.po.ts b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.po.ts
index 9a4507f5c..d46618791 100644
--- a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.po.ts
+++ b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.po.ts
@@ -28,15 +28,15 @@ export class SamplePoButtonLabsComponentPO {
   }
 
   get poRadioLogoPO() {
-    return this.getPoButtonIcon('ph ph-newspaper');
+    return this.getPoButtonIcon('an an-newspaper');
   }
 
   get poRadioCalendar() {
-    return this.getPoButtonIcon('ph ph-calendar-dots');
+    return this.getPoButtonIcon('an an-calendar-dots');
   }
 
   get poRadioUser() {
-    return this.getPoButtonIcon('ph ph-user');
+    return this.getPoButtonIcon('an an-user');
   }
   get poRadioNone() {
     return this.getPoButtonIcon('undefined');
diff --git a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts
index 84c38cbde..f810f11a4 100644
--- a/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts
+++ b/projects/ui/src/lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts
@@ -22,9 +22,9 @@ export class SamplePoButtonLabsComponent implements OnInit {
   ];
 
   iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph ph-newspaper', value: 'ph ph-newspaper' },
-    { label: 'ph ph-calendar-dots', value: 'ph ph-calendar-dots' },
-    { label: 'ph ph-user', value: 'ph ph-user' },
+    { label: 'an an-newspaper', value: 'an an-newspaper' },
+    { label: 'an an-calendar-dots', value: 'an an-calendar-dots' },
+    { label: 'an an-user', value: 'an an-user' },
     { label: 'fa fa-podcast', value: 'fa fa-podcast' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-container/samples/sample-po-container-dashboard/sample-po-container-dashboard.component.ts b/projects/ui/src/lib/components/po-container/samples/sample-po-container-dashboard/sample-po-container-dashboard.component.ts
index 9e2811c48..974876f19 100644
--- a/projects/ui/src/lib/components/po-container/samples/sample-po-container-dashboard/sample-po-container-dashboard.component.ts
+++ b/projects/ui/src/lib/components/po-container/samples/sample-po-container-dashboard/sample-po-container-dashboard.component.ts
@@ -37,10 +37,10 @@ export class SamplePoContainerDashboardComponent implements AfterContentChecked,
   items: Array<object>;
 
   public readonly actions: Array<PoPageAction> = [
-    { label: 'Share', action: this.modalOpen.bind(this), icon: 'ph ph-share' },
+    { label: 'Share', action: this.modalOpen.bind(this), icon: 'an an-share' },
     {
       label: 'Disable notification',
-      icon: 'ph ph-bell',
+      icon: 'an an-bell',
       action: this.disableNotification.bind(this),
       disabled: () => this.isSubscribed
     }
diff --git a/projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts b/projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts
index 265c94c40..713ab07db 100644
--- a/projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts
+++ b/projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts
@@ -21,9 +21,9 @@ export class SamplePoDropdownLabsComponent implements OnInit {
   ];
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-newspaper', label: 'ph ph-newspaper' },
-    { value: 'ph ph-magnifying-glass', label: 'ph ph-magnifying-glass' },
-    { value: 'ph ph-globe', label: 'ph ph-globe' },
+    { value: 'an an-newspaper', label: 'an an-newspaper' },
+    { value: 'an an-magnifying-glass', label: 'an an-magnifying-glass' },
+    { value: 'an an-globe', label: 'an an-globe' },
     { value: 'fa fa-podcast', label: 'fa fa-podcast' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-container/sample-po-dynamic-form-container.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-container/sample-po-dynamic-form-container.component.ts
index 0bd02682f..62aed512a 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-container/sample-po-dynamic-form-container.component.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-container/sample-po-dynamic-form-container.component.ts
@@ -80,7 +80,7 @@ export class SamplePoDynamicFormContainerComponent implements OnInit {
       booleanFalse: 'Inactive',
       formatModel: true
     },
-    { property: 'email', container: 'CONTACTS', gridColumns: 6, icon: 'ph ph-envelope' },
+    { property: 'email', container: 'CONTACTS', gridColumns: 6, icon: 'an an-envelope' },
     { property: 'phone', mask: '(99) 99999-9999', gridColumns: 6 },
     { property: 'address', gridColumns: 6 },
     {
@@ -127,7 +127,7 @@ export class SamplePoDynamicFormContainerComponent implements OnInit {
       gridSmColumns: 12,
       decimalsLength: 2,
       thousandMaxlength: 7,
-      icon: 'ph ph-currency-circle-dollar'
+      icon: 'an an-currency-circle-dollar'
     },
     {
       property: 'hobbies',
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts
index 834a14c1a..76f815f54 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts
@@ -80,7 +80,7 @@ export class SamplePoDynamicFormRegisterComponent implements OnInit {
       booleanFalse: 'Inactive',
       formatModel: true
     },
-    { property: 'email', divider: 'CONTACTS', gridColumns: 6, icon: 'ph ph-envelope' },
+    { property: 'email', divider: 'CONTACTS', gridColumns: 6, icon: 'an an-envelope' },
     { property: 'phone', mask: '(99) 99999-9999', gridColumns: 6 },
     { property: 'address', gridColumns: 6 },
     {
@@ -127,7 +127,7 @@ export class SamplePoDynamicFormRegisterComponent implements OnInit {
       gridSmColumns: 12,
       decimalsLength: 2,
       thousandMaxlength: 7,
-      icon: 'ph ph-currency-circle-dollar'
+      icon: 'an an-currency-circle-dollar'
     },
     {
       property: 'hobbies',
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-container/sample-po-dynamic-view-container.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-container/sample-po-dynamic-view-container.component.ts
index 1c7d2642e..877527f1f 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-container/sample-po-dynamic-view-container.component.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-container/sample-po-dynamic-view-container.component.ts
@@ -15,11 +15,11 @@ export class SamplePoDynamicViewContainerComponent {
     { property: 'rg', label: 'RG', gridColumns: 4, order: 3 },
     { property: 'graduation', label: 'Graduation', gridColumns: 4 },
     { property: 'company', label: 'Company', container: 'Work Data' },
-    { property: 'job', tag: true, icon: 'ph ph-copy' },
+    { property: 'job', tag: true, icon: 'an an-copy' },
     { property: 'admissionDate', label: 'Admission date', type: 'date' },
     { property: 'hoursPerDay', label: 'Hours per day', type: 'time' },
     { property: 'wage', label: 'Wage', type: 'currency' },
-    { property: 'availability', tag: true, color: '#C596E7', icon: 'ph ph-check' },
+    { property: 'availability', tag: true, color: '#C596E7', icon: 'an an-check' },
     { property: 'city', label: 'City', container: 'Address' },
     { property: 'addressStreet', label: 'Street' },
     { property: 'addressNumber', label: 'Number' },
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.ts
index e3d1314f1..37b44fdcc 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee-on-load/sample-po-dynamic-view-employee-on-load.component.ts
@@ -55,11 +55,11 @@ export class SamplePoDynamicViewEmployeeOnLoadComponent implements OnInit {
     { property: 'rg', label: 'RG', gridColumns: 4, order: 3 },
     { property: 'graduation', label: 'Graduation', gridColumns: 4 },
     { property: 'company', label: 'Company', divider: 'Work Data' },
-    { property: 'job', tag: true, icon: 'ph ph-copy' },
+    { property: 'job', tag: true, icon: 'an an-copy' },
     { property: 'admissionDate', label: 'Admission date', type: 'date' },
     { property: 'hoursPerDay', label: 'Hours per day', type: 'time' },
     { property: 'wage', label: 'Wage', type: 'currency' },
-    { property: 'availability', tag: true, color: '#C596E7', icon: 'ph ph-check' },
+    { property: 'availability', tag: true, color: '#C596E7', icon: 'an an-check' },
     { property: 'cities', isArrayOrObject: true, fieldLabel: 'city', fieldValue: 'id', concatLabelValue: true },
     { property: 'city', label: 'City', divider: 'Address' },
     { property: 'addressStreet', label: 'Street' },
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.ts
index 9e3f16b49..54a75f9ec 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.ts
@@ -16,11 +16,11 @@ export class SamplePoDynamicViewEmployeeComponent {
     { property: 'rg', label: 'RG', gridColumns: 4, order: 3 },
     { property: 'graduation', label: 'Graduation', gridColumns: 4 },
     { property: 'company', label: 'Company', divider: 'Work Data' },
-    { property: 'job', tag: true, icon: 'ph ph-copy' },
+    { property: 'job', tag: true, icon: 'an an-copy' },
     { property: 'admissionDate', label: 'Admission date', type: 'date' },
     { property: 'hoursPerDay', label: 'Hours per day', type: 'time' },
     { property: 'wage', label: 'Wage', type: 'currency' },
-    { property: 'availability', tag: true, color: '#C596E7', icon: 'ph ph-check' },
+    { property: 'availability', tag: true, color: '#C596E7', icon: 'an an-check' },
     { property: 'city', label: 'City', divider: 'Address' },
     { property: 'addressStreet', label: 'Street' },
     { property: 'addressNumber', label: 'Number' },
diff --git a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.html b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.html
index 0d8ab133f..aebbfe07a 100644
--- a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.html
+++ b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.html
@@ -17,7 +17,7 @@
       aria-label=" "
       [id]="id"
       class="po-checkbox"
-      [ngClass]="iconNameLib === 'PhosphorIcon' ? 'po-checkbox-phosphor' : 'po-checkbox-poicon'"
+      [ngClass]="iconNameLib === 'AnimaliaIcon' ? 'po-checkbox-phosphor' : 'po-checkbox-poicon'"
       [attr.aria-disabled]="disabled"
       [attr.required]="checkBoxRequired"
     >
diff --git a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts
index ee2b8ebdd..769f6d5fb 100644
--- a/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts
@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { ICONS_DICTIONARY, PhosphorIconDictionary } from '../../po-icon';
+import { ICONS_DICTIONARY, AnimaliaIconDictionary } from '../../po-icon';
 import { PoKeyCodeEnum } from './../../../enums/po-key-code.enum';
 
 import { PoCheckboxBaseComponent } from './po-checkbox-base.component';
@@ -60,7 +60,7 @@ export class PoCheckboxComponent extends PoCheckboxBaseComponent implements Afte
   ) {
     super();
 
-    this._iconToken = value ?? PhosphorIconDictionary;
+    this._iconToken = value ?? AnimaliaIconDictionary;
   }
 
   /**
diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
index df2fe1f28..ca97b86fd 100644
--- a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
@@ -167,7 +167,7 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
    *
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-combo p-icon="ph ph-user" p-label="PO combo"></po-combo>
+   * <po-combo p-icon="an an-user" p-label="PO combo"></po-combo>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-hotels/sample-po-combo-hotels.component.html b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-hotels/sample-po-combo-hotels.component.html
index 47cf09f4c..8c9c85600 100644
--- a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-hotels/sample-po-combo-hotels.component.html
+++ b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-hotels/sample-po-combo-hotels.component.html
@@ -57,7 +57,7 @@
       p-debounce-time="500"
       p-disabled-init-filter
       p-filter-minlength="1"
-      p-icon="ph ph-magnifying-glass"
+      p-icon="an an-magnifying-glass"
       p-required
       p-field-label="name"
       p-field-value="value"
diff --git a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.ts b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.ts
index 20bfc647d..606d5ffc0 100644
--- a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-labs/sample-po-combo-labs.component.ts
@@ -48,8 +48,8 @@ export class SamplePoComboLabsComponent implements OnInit {
   ];
 
   public readonly iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph ph-building-apartment', value: 'ph ph-building-apartment' },
-    { label: 'ph ph-gas-pump', value: 'ph ph-gas-pump' },
+    { label: 'an an-building-apartment', value: 'an an-building-apartment' },
+    { label: 'an an-gas-pump', value: 'an an-gas-pump' },
     { label: 'fa fa-calculator', value: 'fa fa-calculator' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-scheduling/sample-po-combo-scheduling.component.html b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-scheduling/sample-po-combo-scheduling.component.html
index d0769e462..e1efbdd04 100644
--- a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-scheduling/sample-po-combo-scheduling.component.html
+++ b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-scheduling/sample-po-combo-scheduling.component.html
@@ -48,7 +48,7 @@
       class="po-lg-6"
       name="city"
       [(ngModel)]="city"
-      p-icon="ph ph-map-trifold"
+      p-icon="an an-map-trifold"
       p-label="Select a location"
       p-placeholder="Select a location"
       p-required
@@ -90,7 +90,7 @@
       class="po-lg-6"
       name="medicalSpecialty"
       [(ngModel)]="medicalSpecialty"
-      p-icon="ph ph-flask"
+      p-icon="an an-flask"
       p-label="Medical Specialty/Exam"
       p-required
       p-sort
diff --git a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-transfer/sample-po-combo-transfer.component.html b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-transfer/sample-po-combo-transfer.component.html
index e4516742f..a97ad8839 100644
--- a/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-transfer/sample-po-combo-transfer.component.html
+++ b/projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-transfer/sample-po-combo-transfer.component.html
@@ -21,7 +21,7 @@
       p-field-value="id"
       p-field-label="name"
       p-filter-service="https://po-sample-api.onrender.com/v1/people"
-      p-icon="ph ph-user"
+      p-icon="an an-user"
       p-label="To contact"
       p-placeholder="Select a contact"
       p-required
diff --git a/projects/ui/src/lib/components/po-field/po-datepicker/samples/sample-po-datepicker-basic/sample-po-datepicker-basic.component.po.ts b/projects/ui/src/lib/components/po-field/po-datepicker/samples/sample-po-datepicker-basic/sample-po-datepicker-basic.component.po.ts
index c9aee1578..0401c4484 100644
--- a/projects/ui/src/lib/components/po-field/po-datepicker/samples/sample-po-datepicker-basic/sample-po-datepicker-basic.component.po.ts
+++ b/projects/ui/src/lib/components/po-field/po-datepicker/samples/sample-po-datepicker-basic/sample-po-datepicker-basic.component.po.ts
@@ -12,6 +12,6 @@ export class SamplePoDatepickerBasicComponentPO {
   }
 
   get poDatepickerIcon() {
-    return element(by.css(`${this.sampleDatepicker} po-field-container .po-field-icon, .ph ph-calendar-dots`));
+    return element(by.css(`${this.sampleDatepicker} po-field-container .po-field-icon, .an an-calendar-dots`));
   }
 }
diff --git a/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage-reactive-form/sample-po-decimal-hourly-wage-reactive-form.component.html b/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage-reactive-form/sample-po-decimal-hourly-wage-reactive-form.component.html
index 9ad518637..fe714989f 100644
--- a/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage-reactive-form/sample-po-decimal-hourly-wage-reactive-form.component.html
+++ b/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage-reactive-form/sample-po-decimal-hourly-wage-reactive-form.component.html
@@ -16,7 +16,7 @@
       class="po-md-6"
       formControlName="salary"
       p-decimals-length="2"
-      p-icon="ph ph-currency-circle-dollar"
+      p-icon="an an-currency-circle-dollar"
       p-label="Salary"
       p-thousand-maxlength="13"
       (p-change)="calculate()"
@@ -30,7 +30,7 @@
       formControlName="hourlyWage"
       p-decimals-length="2"
       p-disabled
-      p-icon="ph ph-currency-dollar-simple"
+      p-icon="an an-currency-dollar-simple"
       p-label="Hourly Wage"
       p-thousand-maxlength="13"
     >
diff --git a/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage/sample-po-decimal-hourly-wage.component.html b/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage/sample-po-decimal-hourly-wage.component.html
index 9a2c30b7a..cbd3ea9fa 100644
--- a/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage/sample-po-decimal-hourly-wage.component.html
+++ b/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-hourly-wage/sample-po-decimal-hourly-wage.component.html
@@ -31,7 +31,7 @@
       name="salary"
       [(ngModel)]="salary"
       p-decimals-length="2"
-      p-icon="ph ph-currency-circle-dollar"
+      p-icon="an an-currency-circle-dollar"
       p-label="Salary"
       p-required
       p-thousand-maxlength="13"
@@ -47,7 +47,7 @@
       [(ngModel)]="hourlyWage"
       p-decimals-length="2"
       p-disabled
-      p-icon="ph ph-currency-dollar-simple"
+      p-icon="an an-currency-dollar-simple"
       p-label="Hourly Wage"
       p-required
       p-thousand-maxlength="13"
diff --git a/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.ts b/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.ts
index c74b70749..d66836b46 100644
--- a/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-decimal/samples/sample-po-decimal-labs/sample-po-decimal-labs.component.ts
@@ -30,8 +30,8 @@ export class SamplePoDecimalLabsComponent implements OnInit {
   ];
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-shopping-cart-simple', label: 'ph ph-shopping-cart-simple' },
-    { value: 'ph ph-currency-dollar-simple', label: 'ph ph-currency-dollar-simple' },
+    { value: 'an an-shopping-cart-simple', label: 'an an-shopping-cart-simple' },
+    { value: 'an an-currency-dollar-simple', label: 'an an-currency-dollar-simple' },
     { value: 'fa fa-calculator', label: 'fa fa-calculator' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-field/po-email/po-email.component.spec.ts b/projects/ui/src/lib/components/po-field/po-email/po-email.component.spec.ts
index e139eb95c..2806d7187 100644
--- a/projects/ui/src/lib/components/po-field/po-email/po-email.component.spec.ts
+++ b/projects/ui/src/lib/components/po-field/po-email/po-email.component.spec.ts
@@ -108,7 +108,7 @@ describe('PoEmailComponent:', () => {
 
     it('should have `mail` icon', () => {
       fixture.detectChanges();
-      expect(fixture.debugElement.nativeElement.querySelector('.ph-envelope-simple')).toBeTruthy();
+      expect(fixture.debugElement.nativeElement.querySelector('.an-envelope-simple')).toBeTruthy();
     });
 
     it('should call `getScreenValue` and `verifyPattern` on input keyup', fakeAsync(() => {
diff --git a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html
index d38d07188..474ef6237 100644
--- a/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html
+++ b/projects/ui/src/lib/components/po-field/po-field-container/po-field-container-bottom/po-field-container-bottom.component.html
@@ -1,6 +1,6 @@
 <div class="po-field-container-bottom" [class.po-field-container-bottom-disabled]="disabled">
   <div *ngIf="errorPattern" class="po-field-container-bottom-text-error">
-    <po-icon p-icon="ph ph-warning-circle"></po-icon>
+    <po-icon p-icon="an an-warning-circle"></po-icon>
     <span> {{ errorPattern }}</span>
   </div>
   <span *ngIf="help && !errorPattern" class="po-field-container-bottom-help-text">
diff --git a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts
index 0cf302b3e..2cbe0007e 100644
--- a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts
@@ -78,7 +78,7 @@ export abstract class PoInputBaseComponent implements ControlValueAccessor, Vali
    *
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-input p-icon="ph ph-user" p-label="PO input"></po-input>
+   * <po-input p-icon="an an-user" p-label="PO input"></po-input>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-labs/sample-po-input-labs.component.ts b/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-labs/sample-po-input-labs.component.ts
index ff49e7f66..7393be3bc 100644
--- a/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-labs/sample-po-input-labs.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-labs/sample-po-input-labs.component.ts
@@ -22,8 +22,8 @@ export class SamplePoInputLabsComponent implements OnInit {
   properties: Array<string>;
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-newspaper', label: 'ph ph-newspaper' },
-    { value: 'ph ph-magnifying-glass', label: 'ph ph-magnifying-glass' },
+    { value: 'an an-newspaper', label: 'an an-newspaper' },
+    { value: 'an an-magnifying-glass', label: 'an an-magnifying-glass' },
     { value: 'fa fa-calculator', label: 'fa fa-calculator' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-reactive-form/sample-po-input-reactive-form.component.html b/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-reactive-form/sample-po-input-reactive-form.component.html
index f7e624872..0413ac397 100644
--- a/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-reactive-form/sample-po-input-reactive-form.component.html
+++ b/projects/ui/src/lib/components/po-field/po-input/samples/sample-po-input-reactive-form/sample-po-input-reactive-form.component.html
@@ -1,10 +1,10 @@
 <form [formGroup]="reactiveForm">
   <div class="po-row">
-    <po-input class="po-md-12" formControlName="name" p-clean p-icon="ph ph-user" p-label="Customer name"> </po-input>
+    <po-input class="po-md-12" formControlName="name" p-clean p-icon="an an-user" p-label="Customer name"> </po-input>
   </div>
 
   <div class="po-row">
-    <po-input class="po-lg-9" formControlName="address" p-clean p-icon="ph ph-map-pin" p-label="Address"> </po-input>
+    <po-input class="po-lg-9" formControlName="address" p-clean p-icon="an an-map-pin" p-label="Address"> </po-input>
 
     <po-number class="po-lg-3" formControlName="number" p-label="Number" p-clean> </po-number>
   </div>
diff --git a/projects/ui/src/lib/components/po-field/po-number/samples/sample-po-number-labs/sample-po-number-labs.component.ts b/projects/ui/src/lib/components/po-field/po-number/samples/sample-po-number-labs/sample-po-number-labs.component.ts
index ce8569df8..8e35abb3d 100644
--- a/projects/ui/src/lib/components/po-field/po-number/samples/sample-po-number-labs/sample-po-number-labs.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-number/samples/sample-po-number-labs/sample-po-number-labs.component.ts
@@ -23,8 +23,8 @@ export class SamplePoNumberLabsComponent implements OnInit {
   step: string;
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-currency-circle-dollar', label: 'ph ph-currency-circle-dollar' },
-    { value: 'ph ph-currency-btc', label: 'ph ph-currency-btc' },
+    { value: 'an an-currency-circle-dollar', label: 'an an-currency-circle-dollar' },
+    { value: 'an an-currency-btc', label: 'an an-currency-btc' },
     { value: 'fa fa-calculator', label: 'fa fa-calculator' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-field/po-password/po-password.component.spec.ts b/projects/ui/src/lib/components/po-field/po-password/po-password.component.spec.ts
index ef746ca2c..94e1b90c4 100644
--- a/projects/ui/src/lib/components/po-field/po-password/po-password.component.spec.ts
+++ b/projects/ui/src/lib/components/po-field/po-password/po-password.component.spec.ts
@@ -208,23 +208,23 @@ describe('PoNumberComponent:', () => {
       expect(nativeElement.querySelector('.po-input-icon-right')).toBeFalsy();
     });
 
-    it('should have the icon `ph-eye-closed`.', () => {
+    it('should have the icon `an-eye-closed`.', () => {
       component.hidePasswordPeek = false;
       component.visiblePassword = false;
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-eye')).toBeNull();
-      expect(nativeElement.querySelector('.ph-eye-closed')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-eye')).toBeNull();
+      expect(nativeElement.querySelector('.an-eye-closed')).toBeTruthy();
       expect(nativeElement.querySelector('.po-field-icon-disabled')).toBeTruthy();
     });
 
-    it('should have the icon `ph-eye`.', () => {
+    it('should have the icon `an-eye`.', () => {
       component.hidePasswordPeek = false;
       component.visiblePassword = true;
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-eye')).toBeTruthy();
-      expect(nativeElement.querySelector('.ph-eye-closed')).toBeNull();
+      expect(nativeElement.querySelector('.an-eye')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-eye-closed')).toBeNull();
       expect(nativeElement.querySelector('.po-field-icon-disabled')).toBeNull();
     });
 
diff --git a/projects/ui/src/lib/components/po-field/po-select/po-select.component.html b/projects/ui/src/lib/components/po-field/po-select/po-select.component.html
index 647096897..da4706bc5 100644
--- a/projects/ui/src/lib/components/po-field/po-select/po-select.component.html
+++ b/projects/ui/src/lib/components/po-field/po-select/po-select.component.html
@@ -10,7 +10,7 @@
     <select
       #select
       class="po-select"
-      [ngClass]="iconNameLib === 'PhosphorIcon' ? 'po-select-phosphor' : 'po-select-poicon'"
+      [ngClass]="iconNameLib === 'AnimaliaIcon' ? 'po-select-phosphor' : 'po-select-poicon'"
       [attr.name]="name"
       [class.po-select-placeholder]="!selectedValue?.toString() && !!placeholder"
       [disabled]="disabled"
diff --git a/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts b/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts
index 57aa776de..2c73b6d32 100644
--- a/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-select/po-select.component.ts
@@ -25,7 +25,7 @@ import {
   validValue
 } from '../../../utils/util';
 
-import { ICONS_DICTIONARY, PhosphorIconDictionary } from '../../po-icon';
+import { ICONS_DICTIONARY, AnimaliaIconDictionary } from '../../po-icon';
 import { PoFieldValidateModel } from '../po-field-validate.model';
 import { PoSelectOptionGroup } from './po-select-option-group.interface';
 import { PoSelectOption } from './po-select-option.interface';
@@ -291,7 +291,7 @@ export class PoSelectComponent extends PoFieldValidateModel<any> implements OnCh
   ) {
     super(changeDetector);
 
-    this._iconToken = value ?? PhosphorIconDictionary;
+    this._iconToken = value ?? AnimaliaIconDictionary;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
diff --git a/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order-reactive-form/sample-po-switch-order-reactive-form.component.html b/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order-reactive-form/sample-po-switch-order-reactive-form.component.html
index b898b6e71..dbdf11d7b 100644
--- a/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order-reactive-form/sample-po-switch-order-reactive-form.component.html
+++ b/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order-reactive-form/sample-po-switch-order-reactive-form.component.html
@@ -21,7 +21,7 @@
       </div>
 
       <div class="po-row">
-        <po-button class="po-md-12" p-icon="ph ph-check" p-label="Confirm" p-kind="primary" (p-click)="confirm()">
+        <po-button class="po-md-12" p-icon="an an-check" p-label="Confirm" p-kind="primary" (p-click)="confirm()">
         </po-button>
       </div>
     </form>
diff --git a/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order/sample-po-switch-order.component.html b/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order/sample-po-switch-order.component.html
index f6b1165f6..9db0c2e78 100644
--- a/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order/sample-po-switch-order.component.html
+++ b/projects/ui/src/lib/components/po-field/po-switch/samples/sample-po-switch-order/sample-po-switch-order.component.html
@@ -23,7 +23,7 @@
       <div class="po-row">
         <po-button
           class="po-md-12"
-          p-icon="po-icon ph ph-check"
+          p-icon="po-icon an an-check"
           p-label="Confirm"
           p-kind="primary"
           (p-click)="confirm()"
diff --git a/projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-rs/sample-po-upload-rs.component.html b/projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-rs/sample-po-upload-rs.component.html
index 4a7df1f6f..4f734b678 100644
--- a/projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-rs/sample-po-upload-rs.component.html
+++ b/projects/ui/src/lib/components/po-field/po-upload/samples/sample-po-upload-rs/sample-po-upload-rs.component.html
@@ -36,9 +36,9 @@ <h1 class="po-font-title">Welcome, TOTVER!</h1>
             </div>
 
             <div class="po-font-title po-lg-2">
-              <po-icon p-icon="ph ph-cloud-arrow-up" class="po-clickable" (click)="upload.selectFiles()"></po-icon>
+              <po-icon p-icon="an an-cloud-arrow-up" class="po-clickable" (click)="upload.selectFiles()"></po-icon>
               <po-icon
-                p-icon="ph ph-fill ph-x-circle"
+                p-icon="an an-fill an-x-circle"
                 class="po-clickable"
                 [ngClass]="{ 'po-invisible': project.length < 1 }"
                 (click)="upload.clear()"
diff --git a/projects/ui/src/lib/components/po-field/po-url/po-url.component.spec.ts b/projects/ui/src/lib/components/po-field/po-url/po-url.component.spec.ts
index 5394509b5..38c305b94 100644
--- a/projects/ui/src/lib/components/po-field/po-url/po-url.component.spec.ts
+++ b/projects/ui/src/lib/components/po-field/po-url/po-url.component.spec.ts
@@ -190,7 +190,7 @@ describe('PoUrlComponent:', () => {
 
     it('should have `world` icon', () => {
       fixture.detectChanges();
-      expect(fixture.debugElement.nativeElement.querySelector('.ph-globe-simple')).toBeTruthy();
+      expect(fixture.debugElement.nativeElement.querySelector('.an-globe-simple')).toBeTruthy();
     });
 
     it('should call `getScreenValue` and `verifyPattern` on input keyup', fakeAsync(() => {
diff --git a/projects/ui/src/lib/components/po-field/po-url/samples/sample-po-url-shortener/sample-po-url-shortener.component.html b/projects/ui/src/lib/components/po-field/po-url/samples/sample-po-url-shortener/sample-po-url-shortener.component.html
index f011e9104..6952f8f58 100644
--- a/projects/ui/src/lib/components/po-field/po-url/samples/sample-po-url-shortener/sample-po-url-shortener.component.html
+++ b/projects/ui/src/lib/components/po-field/po-url/samples/sample-po-url-shortener/sample-po-url-shortener.component.html
@@ -12,7 +12,7 @@
 
     <po-button
       class="po-offset-lg-4 po-offset-xl-4 po-lg-2"
-      p-icon="ph ph-copy"
+      p-icon="an an-copy"
       p-label="Copy"
       [p-disabled]="!shortenedUrl"
       (click)="copyToClipboard()"
diff --git a/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts b/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts
index 2469d1df1..8a1f3b073 100644
--- a/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts
+++ b/projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts
@@ -181,60 +181,60 @@ export const PoIconDictionary: { [key: string]: string } = {
   ICON_ZOOM_OUT: 'po-icon po-icon-zoom-out'
 };
 
-export const PhosphorIconDictionary: { [key: string]: string } = {
-  NAME_LIB: 'PhosphorIcon',
-  ICON_ALIGN_CENTER: 'ph ph-text-align-center',
-  ICON_ALIGN_JUSTIFY: 'ph ph-text-align-justify',
-  ICON_ALIGN_LEFT: 'ph ph-text-align-left',
-  ICON_ALIGN_RIGHT: 'ph ph-text-align-right',
-  ICON_ARROW_DOWN: 'ph ph-caret-down',
-  ICON_ARROW_LEFT: 'ph ph-caret-left',
-  ICON_ARROW_RIGHT: 'ph ph-caret-right',
-  ICON_ARROW_UP: 'ph ph-caret-up',
-  ICON_CALENDAR: 'ph ph-calendar-blank',
-  ICON_CLEAR_CONTENT: 'ph ph-x-circle',
-  ICON_CLOCK: 'ph ph-clock',
-  ICON_CLOSE: 'ph ph-x',
-  ICON_DELETE: 'ph ph-trash',
-  ICON_DRAG: 'ph ph-dots-six-vertical',
-  ICON_EDIT: 'ph ph-pencil-simple',
-  ICON_EXCLAMATION: 'ph ph-warning-circle',
-  ICON_EXIT: 'ph ph-sign-out',
-  ICON_EYE: 'ph ph-eye',
-  ICON_EYE_OFF: 'ph ph-eye-closed',
-  ICON_FILTER: 'ph ph-funnel',
-  ICON_HELP: 'ph ph-question',
-  ICON_INFO: 'ph ph-info',
-  ICON_LAST_PAGE: 'ph ph-caret-double-right',
-  ICON_LINK: 'ph ph-link',
-  ICON_LIST: 'ph ph-list-dashes',
-  ICON_LOCK: 'ph ph-lock',
-  ICON_MAIL: 'ph ph-envelope-simple',
-  ICON_MENU: 'ph ph-list',
-  ICON_MENU_CLOSE: 'ph ph-caret-circle-left',
-  ICON_MENU_OPEN: 'ph ph-caret-circle-right',
-  ICON_MINUS: 'ph ph-minus',
-  ICON_MORE: 'ph ph-dots-three',
-  ICON_MORE_VERT: 'ph ph-dots-three-vertical',
-  ICON_NOTIFICATION: 'ph ph-bell',
-  ICON_OK: 'ph ph-check',
-  ICON_PARAMETERS: 'ph ph-sliders-horizontal',
-  ICON_PICTURE: 'ph ph-image',
-  ICON_PUSH_PIN: 'ph ph-push-pin',
-  ICON_PUSH_PIN_SLASH: 'ph ph-push-pin-slash',
-  ICON_REFRESH: 'ph ph-arrow-clockwise',
-  ICON_SEARCH: 'ph ph-magnifying-glass',
-  ICON_SETTINGS: 'ph ph-gear-six',
-  ICON_SORT: 'ph ph-caret-up-down ',
-  ICON_SORT_ASC: 'ph ph-caret-up',
-  ICON_SORT_DESC: 'ph ph-caret-down',
-  ICON_STAR: 'ph ph-star',
-  ICON_TELEPHONE: 'ph ph-phone',
-  ICON_TEXT_BOLD: 'ph ph-text-b',
-  ICON_TEXT_ITALIC: 'ph ph-text-italic',
-  ICON_TEXT_UNDERLINE: 'ph ph-text-underline',
-  ICON_UPLOAD_CLOUD: 'ph ph-cloud-arrow-up',
-  ICON_USER: 'ph ph-user',
-  ICON_WARNING: 'ph ph-exclamation-mark',
-  ICON_WORLD: 'ph ph-globe-simple'
+export const AnimaliaIconDictionary: { [key: string]: string } = {
+  NAME_LIB: 'AnimaliaIcon',
+  ICON_ALIGN_CENTER: 'an an-text-align-center',
+  ICON_ALIGN_JUSTIFY: 'an an-text-align-justify',
+  ICON_ALIGN_LEFT: 'an an-text-align-left',
+  ICON_ALIGN_RIGHT: 'an an-text-align-right',
+  ICON_ARROW_DOWN: 'an an-caret-down',
+  ICON_ARROW_LEFT: 'an an-caret-left',
+  ICON_ARROW_RIGHT: 'an an-caret-right',
+  ICON_ARROW_UP: 'an an-caret-up',
+  ICON_CALENDAR: 'an an-calendar-blank',
+  ICON_CLEAR_CONTENT: 'an an-x-circle',
+  ICON_CLOCK: 'an an-clock',
+  ICON_CLOSE: 'an an-x',
+  ICON_DELETE: 'an an-trash',
+  ICON_DRAG: 'an an-dots-six-vertical',
+  ICON_EDIT: 'an an-pencil-simple',
+  ICON_EXCLAMATION: 'an an-warning-circle',
+  ICON_EXIT: 'an an-sign-out',
+  ICON_EYE: 'an an-eye',
+  ICON_EYE_OFF: 'an an-eye-closed',
+  ICON_FILTER: 'an an-funnel',
+  ICON_HELP: 'an an-question',
+  ICON_INFO: 'an an-info',
+  ICON_LAST_PAGE: 'an an-caret-double-right',
+  ICON_LINK: 'an an-link',
+  ICON_LIST: 'an an-list-dashes',
+  ICON_LOCK: 'an an-lock',
+  ICON_MAIL: 'an an-envelope-simple',
+  ICON_MENU: 'an an-list',
+  ICON_MENU_CLOSE: 'an an-caret-circle-left',
+  ICON_MENU_OPEN: 'an an-caret-circle-right',
+  ICON_MINUS: 'an an-minus',
+  ICON_MORE: 'an an-dots-three',
+  ICON_MORE_VERT: 'an an-dots-three-vertical',
+  ICON_NOTIFICATION: 'an an-bell',
+  ICON_OK: 'an an-check',
+  ICON_PARAMETERS: 'an an-sliders-horizontal',
+  ICON_PICTURE: 'an an-image',
+  ICON_PUSH_PIN: 'an an-push-pin',
+  ICON_PUSH_PIN_SLASH: 'an an-push-pin-slash',
+  ICON_REFRESH: 'an an-arrow-clockwise',
+  ICON_SEARCH: 'an an-magnifying-glass',
+  ICON_SETTINGS: 'an an-gear-six',
+  ICON_SORT: 'an an-caret-up-down ',
+  ICON_SORT_ASC: 'an an-caret-up',
+  ICON_SORT_DESC: 'an an-caret-down',
+  ICON_STAR: 'an an-star',
+  ICON_TELEPHONE: 'an an-phone',
+  ICON_TEXT_BOLD: 'an an-text-b',
+  ICON_TEXT_ITALIC: 'an an-text-italic',
+  ICON_TEXT_UNDERLINE: 'an an-text-underline',
+  ICON_UPLOAD_CLOUD: 'an an-cloud-arrow-up',
+  ICON_USER: 'an an-user',
+  ICON_WARNING: 'an an-exclamation-mark',
+  ICON_WORLD: 'an an-globe-simple'
 };
diff --git a/projects/ui/src/lib/components/po-icon/po-icon.component.ts b/projects/ui/src/lib/components/po-icon/po-icon.component.ts
index 41ac87606..35ec59955 100644
--- a/projects/ui/src/lib/components/po-icon/po-icon.component.ts
+++ b/projects/ui/src/lib/components/po-icon/po-icon.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, Optional, TemplateRef } from '@angular/core';
-import { ICONS_DICTIONARY, PhosphorIconDictionary } from './po-icon-dictionary';
+import { ICONS_DICTIONARY, AnimaliaIconDictionary } from './po-icon-dictionary';
 /**
  * @docsPrivate
  *
@@ -21,7 +21,7 @@ export class PoIconComponent {
   private _iconToken: { [key: string]: string };
 
   constructor(@Optional() @Inject(ICONS_DICTIONARY) value: { [key: string]: string }) {
-    this._iconToken = value ?? PhosphorIconDictionary;
+    this._iconToken = value ?? AnimaliaIconDictionary;
   }
 
   /**
@@ -29,7 +29,7 @@ export class PoIconComponent {
    *
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-button p-icon="ph ph-user" p-label="PO button"></po-button>
+   * <po-button p-icon="an an-user" p-label="PO button"></po-button>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-hiring-processes/sample-po-list-view-hiring-processes.component.ts b/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-hiring-processes/sample-po-list-view-hiring-processes.component.ts
index ee35454de..b7b2c391b 100644
--- a/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-hiring-processes/sample-po-list-view-hiring-processes.component.ts
+++ b/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-hiring-processes/sample-po-list-view-hiring-processes.component.ts
@@ -31,14 +31,14 @@ export class SamplePoListViewHiringProcessesComponent implements OnInit {
       label: 'Hire',
       action: this.hireCandidate.bind(this),
       disabled: this.isHiredOrCanceled.bind(this),
-      icon: 'ph ph-check'
+      icon: 'an an-check'
     },
     {
       label: 'Cancel',
       action: this.cancelCandidate.bind(this),
       disabled: this.isHiredOrCanceled.bind(this),
       type: 'danger',
-      icon: 'ph ph-x'
+      icon: 'an an-x'
     }
   ];
 
@@ -47,13 +47,13 @@ export class SamplePoListViewHiringProcessesComponent implements OnInit {
       label: 'Hire selected',
       action: this.updateCandidates.bind(this, this.hireCandidate),
       disabled: this.disableHireButton.bind(this),
-      icon: 'ph ph-check'
+      icon: 'an an-check'
     },
     {
       label: 'Cancel selected',
       action: this.updateCandidates.bind(this, this.cancelCandidate),
       disabled: this.disableHireButton.bind(this),
-      icon: 'ph ph-x'
+      icon: 'an an-x'
     }
   ];
 
diff --git a/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-labs/sample-po-list-view-labs.component.ts b/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-labs/sample-po-list-view-labs.component.ts
index 14b3f3fa1..2bfa701bf 100644
--- a/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-labs/sample-po-list-view-labs.component.ts
+++ b/projects/ui/src/lib/components/po-list-view/samples/sample-po-list-view-labs/sample-po-list-view-labs.component.ts
@@ -40,9 +40,9 @@ export class SamplePoListViewLabsComponent implements OnInit {
   ];
 
   readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-newspaper', label: 'ph ph-newspaper' },
-    { value: 'ph ph-magnifying-glass', label: 'ph ph-magnifying-glass' },
-    { value: 'ph ph-globe', label: 'ph ph-globe' },
+    { value: 'an an-newspaper', label: 'an an-newspaper' },
+    { value: 'an an-magnifying-glass', label: 'an an-magnifying-glass' },
+    { value: 'an an-globe', label: 'an an-globe' },
     { value: 'fa fa-calculator', label: 'fa fa-calculator' },
     { value: 'fa fa-podcast', label: 'fa fa-podcast' }
   ];
diff --git a/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts b/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts
index 74047cfea..b121c04e4 100644
--- a/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts
+++ b/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts
@@ -25,7 +25,7 @@ export interface PoItemListAction {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-component
-   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'ph ph-newspaper' }]">
+   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
    * </po-component>
    * ```
    *
diff --git a/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-basic/sample-po-menu-panel-basic.component.html b/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-basic/sample-po-menu-panel-basic.component.html
index f25902508..e6a602556 100644
--- a/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-basic/sample-po-menu-panel-basic.component.html
+++ b/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-basic/sample-po-menu-panel-basic.component.html
@@ -1 +1 @@
-<po-menu-panel [p-menus]="[{ label: 'PO HTML Framework', link: '/', icon: 'ph ph-house-line' }]"></po-menu-panel>
+<po-menu-panel [p-menus]="[{ label: 'PO HTML Framework', link: '/', icon: 'an an-house-line' }]"></po-menu-panel>
diff --git a/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-customer/sample-po-menu-panel-customer.component.ts b/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-customer/sample-po-menu-panel-customer.component.ts
index 0b54b8a5c..f6b916d34 100644
--- a/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-customer/sample-po-menu-panel-customer.component.ts
+++ b/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-customer/sample-po-menu-panel-customer.component.ts
@@ -11,11 +11,11 @@ export class SamplePoMenuPanelCustomerComponent {
   title: string = 'Customers';
 
   public readonly menuItems: Array<PoMenuPanelItem> = [
-    { label: 'Home', action: this.changeTitle.bind(this), icon: 'ph ph-house-line' },
-    { label: 'Customers', action: this.changeTitle.bind(this), icon: 'ph ph-user' },
-    { label: 'New Sale', action: this.changeTitle.bind(this), icon: 'ph ph-money' },
-    { label: 'Reports', action: this.changeTitle.bind(this), icon: 'ph ph-newspaper' },
-    { label: 'Settings', action: this.changeTitle.bind(this), icon: 'ph ph-gear' }
+    { label: 'Home', action: this.changeTitle.bind(this), icon: 'an an-house-line' },
+    { label: 'Customers', action: this.changeTitle.bind(this), icon: 'an an-user' },
+    { label: 'New Sale', action: this.changeTitle.bind(this), icon: 'an an-money' },
+    { label: 'Reports', action: this.changeTitle.bind(this), icon: 'an an-newspaper' },
+    { label: 'Settings', action: this.changeTitle.bind(this), icon: 'an an-gear' }
   ];
 
   changeTitle(menu: PoMenuPanelItem) {
diff --git a/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-labs/sample-po-menu-panel-labs.component.ts b/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-labs/sample-po-menu-panel-labs.component.ts
index 5646a643d..efb0d7477 100644
--- a/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-labs/sample-po-menu-panel-labs.component.ts
+++ b/projects/ui/src/lib/components/po-menu-panel/samples/sample-po-menu-panel-labs/sample-po-menu-panel-labs.component.ts
@@ -14,12 +14,12 @@ export class SamplePoMenuPanelLabsComponent implements OnInit {
   logo: string;
 
   public readonly iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph ph-newspaper', value: 'ph ph-newspaper' },
-    { label: 'ph ph-camera', value: 'ph ph-camera' },
-    { label: 'ph ph-calendar-dots', value: 'ph ph-calendar-dots' },
-    { label: 'ph ph-user', value: 'ph ph-user' },
-    { label: 'ph ph-chat', value: 'ph ph-chat' },
-    { label: 'ph ph-package', value: 'ph ph-package' }
+    { label: 'an an-newspaper', value: 'an an-newspaper' },
+    { label: 'an an-camera', value: 'an an-camera' },
+    { label: 'an an-calendar-dots', value: 'an an-calendar-dots' },
+    { label: 'an an-user', value: 'an an-user' },
+    { label: 'an an-chat', value: 'an an-chat' },
+    { label: 'an an-package', value: 'an an-package' }
   ];
 
   ngOnInit(): void {
diff --git a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.spec.ts b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.spec.ts
index af660324d..84cf49883 100644
--- a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.spec.ts
+++ b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.spec.ts
@@ -63,12 +63,12 @@ describe('PoMenuFilterComponent:', () => {
   });
 
   describe('Templates:', () => {
-    it('should contain `ph-magnifying-glass` and not contain `po-loading-icon` if `loading` is false', () => {
+    it('should contain `an-magnifying-glass` and not contain `po-loading-icon` if `loading` is false', () => {
       component.loading = false;
 
       fixture.detectChanges();
 
-      const searchIcon = fixture.debugElement.nativeElement.querySelector('.ph-magnifying-glass');
+      const searchIcon = fixture.debugElement.nativeElement.querySelector('.an-magnifying-glass');
       const loadingIcon = fixture.debugElement.nativeElement.querySelector('.po-loading-icon');
 
       expect(searchIcon).toBeTruthy();
diff --git a/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts b/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts
index 301348d5e..68dd2141b 100644
--- a/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts
+++ b/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts
@@ -36,7 +36,7 @@ export interface PoMenuItem {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-menu
-   *  [p-menus]="[{ link: '/', label: 'PO ICON', icon: 'ph ph-newspaper' }]">
+   *  [p-menus]="[{ link: '/', label: 'PO ICON', icon: 'an an-newspaper' }]">
    * </po-menu>
    * ```
    *
diff --git a/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.ts b/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.ts
index b78d13c6b..9486629ca 100644
--- a/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.ts
+++ b/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.ts
@@ -21,17 +21,17 @@ export class SamplePoMenuHumanResourcesComponent {
   menuItemSelected: string;
 
   menus: Array<PoMenuItem> = [
-    { label: 'Register user', action: this.printMenuAction.bind(this), icon: 'ph ph-user', shortLabel: 'Register' },
+    { label: 'Register user', action: this.printMenuAction.bind(this), icon: 'an an-user', shortLabel: 'Register' },
     {
       label: 'Timekeeping',
       action: this.printMenuAction.bind(this),
-      icon: 'ph ph-clock',
+      icon: 'an an-clock',
       shortLabel: 'Timekeeping',
       badge: { value: 1 }
     },
     {
       label: 'Useful links',
-      icon: 'ph ph-share',
+      icon: 'an an-share',
       shortLabel: 'Links',
       subItems: [
         { label: 'Ministry of Labour', action: this.printMenuAction.bind(this), link: 'http://trabalho.gov.br/' },
@@ -40,7 +40,7 @@ export class SamplePoMenuHumanResourcesComponent {
     },
     {
       label: 'Benefits',
-      icon: 'ph ph-star',
+      icon: 'an an-star',
       shortLabel: 'Benefits',
       subItems: [
         {
diff --git a/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.ts b/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.ts
index 182467a4c..eefbc3609 100644
--- a/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.ts
+++ b/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.ts
@@ -65,12 +65,12 @@ export class SamplePoMenuLabsComponent implements OnInit {
   ];
 
   public readonly iconsOptions: Array<PoSelectOption> = [
-    { label: 'ph ph-newspaper', value: 'ph ph-newspaper' },
-    { label: 'ph ph-camera', value: 'ph ph-camera' },
-    { label: 'ph ph-calendar-dots', value: 'ph ph-calendar-dots' },
-    { label: 'ph ph-user', value: 'ph ph-user' },
-    { label: 'ph ph-chat', value: 'ph ph-chat' },
-    { label: 'ph ph-package', value: 'ph ph-package' },
+    { label: 'an an-newspaper', value: 'an an-newspaper' },
+    { label: 'an an-camera', value: 'an an-camera' },
+    { label: 'an an-calendar-dots', value: 'an an-calendar-dots' },
+    { label: 'an an-user', value: 'an an-user' },
+    { label: 'an an-chat', value: 'an an-chat' },
+    { label: 'an an-package', value: 'an an-package' },
     { value: 'fa fa-calculator', label: 'fa fa-calculator' },
     { value: 'fa fa-podcast', label: 'fa fa-podcast' }
   ];
diff --git a/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts b/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts
index 6bde88fd7..35e8ed813 100644
--- a/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts
+++ b/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts
@@ -134,7 +134,7 @@ export class PoModalBaseComponent {
    *
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-modal p-icon="ph ph-user" p-title="PO Modal"></po-modal>
+   * <po-modal p-icon="an an-user" p-title="PO Modal"></po-modal>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts b/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts
index 2a25866b9..d54fe6263 100644
--- a/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts
+++ b/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts
@@ -217,7 +217,7 @@ describe('PoModalComponent:', () => {
   it('should be modal with close button', () => {
     component.open();
     fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.po-modal')).nativeElement.innerHTML).toContain('ph-x');
+    expect(fixture.debugElement.query(By.css('.po-modal')).nativeElement.innerHTML).toContain('an-x');
   });
 
   it('should be one button in modal', () => {
@@ -510,7 +510,7 @@ describe('PoModalComponent:', () => {
       component.hideClose = false;
       component.open();
       fixture.detectChanges();
-      expect(fixture.debugElement.query(By.css('.po-modal')).nativeElement.innerHTML).toContain('ph-x');
+      expect(fixture.debugElement.query(By.css('.po-modal')).nativeElement.innerHTML).toContain('an-x');
     });
 
     it('action disabled: should disabled primary action if `primaryAction.disabled` is `true`.', () => {
diff --git a/projects/ui/src/lib/components/po-modal/samples/sample-po-modal-labs/sample-po-modal-labs.component.ts b/projects/ui/src/lib/components/po-modal/samples/sample-po-modal-labs/sample-po-modal-labs.component.ts
index 9f35458db..e5d1ac0d6 100644
--- a/projects/ui/src/lib/components/po-modal/samples/sample-po-modal-labs/sample-po-modal-labs.component.ts
+++ b/projects/ui/src/lib/components/po-modal/samples/sample-po-modal-labs/sample-po-modal-labs.component.ts
@@ -36,8 +36,8 @@ export class SamplePoModalLabsComponent implements OnInit {
     { value: 'loading', label: 'Loading' }
   ];
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-newspaper', label: 'ph ph-newspaper' },
-    { value: 'ph ph-magnifying-glass', label: 'ph ph-magnifying-glass' },
+    { value: 'an an-newspaper', label: 'an an-newspaper' },
+    { value: 'an an-magnifying-glass', label: 'an an-magnifying-glass' },
     { value: 'fa fa-calculator', label: 'fa fa-calculator' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts b/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts
index ff0c12de8..c23d3e7db 100644
--- a/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts
+++ b/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts
@@ -23,7 +23,7 @@ export interface PoNavbarIconAction {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-navbar
-   *   [p-icon-actions]="[{ link: '/', icon: 'ph ph-newspaper' }]">
+   *   [p-icon-actions]="[{ link: '/', icon: 'an an-newspaper' }]">
    * </po-navbar>
    * ```
    *
diff --git a/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.ts b/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.ts
index 13964b443..bb32a4434 100644
--- a/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.ts
+++ b/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-dashboard/sample-po-page-default-dashboard.component.ts
@@ -35,7 +35,7 @@ export class SamplePoPageDefaultDashboardComponent implements OnInit {
   items: Array<object>;
 
   public readonly actions: Array<PoPageAction> = [
-    { label: 'Share', action: this.modalOpen.bind(this), icon: 'ph ph-share' },
+    { label: 'Share', action: this.modalOpen.bind(this), icon: 'an an-share' },
     { label: 'GitHub', url: 'https://github.com/po-ui/po-angular' },
     { label: 'Components', url: '/documentation' },
     { label: 'Disable notification', action: this.disableNotification.bind(this), disabled: () => this.isSubscribed }
diff --git a/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-labs/sample-po-page-default-labs.component.ts b/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-labs/sample-po-page-default-labs.component.ts
index bc977bfdc..e032d4520 100644
--- a/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-labs/sample-po-page-default-labs.component.ts
+++ b/projects/ui/src/lib/components/po-page/po-page-default/samples/sample-po-page-default-labs/sample-po-page-default-labs.component.ts
@@ -30,9 +30,9 @@ export class SamplePoPageDefaultLabsComponent implements OnInit {
   ];
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-newspaper', label: 'ph ph-newspaper' },
-    { value: 'ph ph-magnifying-glass', label: 'ph ph-magnifying-glass' },
-    { value: 'ph ph-globe', label: 'ph ph-globe' },
+    { value: 'an an-newspaper', label: 'an an-newspaper' },
+    { value: 'an an-magnifying-glass', label: 'an an-magnifying-glass' },
+    { value: 'an an-globe', label: 'an an-globe' },
     { value: 'fa fa-podcast', label: 'fa fa-podcast' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-page/po-page-detail/po-page-detail.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-detail/po-page-detail.component.spec.ts
index b1f22635c..c35bb7806 100644
--- a/projects/ui/src/lib/components/po-page/po-page-detail/po-page-detail.component.spec.ts
+++ b/projects/ui/src/lib/components/po-page/po-page-detail/po-page-detail.component.spec.ts
@@ -221,45 +221,45 @@ describe('PoPageDetailComponent:', () => {
       expect(debugElement.querySelector('po-page-header')).toBeFalsy();
     });
 
-    it('should apply only `ph-pencil-simple` if have a back, remove and edit functions.', () => {
+    it('should apply only `an-pencil-simple` if have a back, remove and edit functions.', () => {
       component.back.observers.push(<any>of({}));
       component.remove.observers.push(<any>of({}));
       component.edit.observers.push(<any>of({}));
 
       fixture.detectChanges();
 
-      const editIcon = debugElement.querySelector('.ph-pencil-simple');
-      const removeIcon = debugElement.querySelector('.ph-trash');
-      const backIcon = debugElement.querySelector('.ph-caret-left');
+      const editIcon = debugElement.querySelector('.an-pencil-simple');
+      const removeIcon = debugElement.querySelector('.an-trash');
+      const backIcon = debugElement.querySelector('.an-caret-left');
 
       expect(editIcon).toBeTruthy();
       expect(removeIcon).toBeNull();
       expect(backIcon).toBeNull();
     });
 
-    it('should apply only `ph-trash` if have back and remove functions and doesn`t have a edit function.', () => {
+    it('should apply only `an-trash` if have back and remove functions and doesn`t have a edit function.', () => {
       component.back.observers.push(<any>of({}));
       component.remove.observers.push(<any>of({}));
 
       fixture.detectChanges();
 
-      const editIcon = debugElement.querySelector('.ph-pencil-simple');
-      const removeIcon = debugElement.querySelector('.ph-trash');
-      const backIcon = debugElement.querySelector('.ph-caret-left');
+      const editIcon = debugElement.querySelector('.an-pencil-simple');
+      const removeIcon = debugElement.querySelector('.an-trash');
+      const backIcon = debugElement.querySelector('.an-caret-left');
 
       expect(editIcon).toBeNull();
       expect(removeIcon).toBeTruthy();
       expect(backIcon).toBeNull();
     });
 
-    it('should apply only `ph-caret-left` if have only back function and doesn`t have a edit and remove functions.', () => {
+    it('should apply only `an-caret-left` if have only back function and doesn`t have a edit and remove functions.', () => {
       component.back.observers.push(<any>of({}));
 
       fixture.detectChanges();
 
-      const editIcon = debugElement.querySelector('.ph-pencil-simple');
-      const removeIcon = debugElement.querySelector('.ph-trash');
-      const backIcon = debugElement.querySelector('.ph-caret-left');
+      const editIcon = debugElement.querySelector('.an-pencil-simple');
+      const removeIcon = debugElement.querySelector('.an-trash');
+      const backIcon = debugElement.querySelector('.an-caret-left');
 
       expect(editIcon).toBeNull();
       expect(removeIcon).toBeNull();
diff --git a/projects/ui/src/lib/components/po-page/po-page-edit/po-page-edit.component.spec.ts b/projects/ui/src/lib/components/po-page/po-page-edit/po-page-edit.component.spec.ts
index d2773755b..18aa831ea 100644
--- a/projects/ui/src/lib/components/po-page/po-page-edit/po-page-edit.component.spec.ts
+++ b/projects/ui/src/lib/components/po-page/po-page-edit/po-page-edit.component.spec.ts
@@ -226,8 +226,8 @@ describe('PoPageEditComponent', () => {
 
       fixture.detectChanges();
 
-      const saveIcon = debugElement.querySelectorAll('po-button button po-icon i[class="ph ph-check po-fonts-icon"]');
-      const cancelIcon = debugElement.querySelectorAll('po-button button po-icon i[class="ph ph-x po-fonts-icon"]');
+      const saveIcon = debugElement.querySelectorAll('po-button button po-icon i[class="an an-check po-fonts-icon"]');
+      const cancelIcon = debugElement.querySelectorAll('po-button button po-icon i[class="an an-x po-fonts-icon"]');
 
       expect(saveIcon.length).toBe(1);
       expect(cancelIcon.length).toBe(0);
@@ -239,8 +239,8 @@ describe('PoPageEditComponent', () => {
 
       fixture.detectChanges();
 
-      const saveIcon = debugElement.querySelectorAll('po-button button po-icon i[class="ph ph-check po-fonts-icon"]');
-      const cancelIcon = debugElement.querySelectorAll('po-button button po-icon i[class="ph ph-x po-fonts-icon"]');
+      const saveIcon = debugElement.querySelectorAll('po-button button po-icon i[class="an an-check po-fonts-icon"]');
+      const cancelIcon = debugElement.querySelectorAll('po-button button po-icon i[class="an an-x po-fonts-icon"]');
 
       expect(saveIcon.length).toBe(1);
       expect(cancelIcon.length).toBe(0);
@@ -251,8 +251,8 @@ describe('PoPageEditComponent', () => {
 
       fixture.detectChanges();
 
-      const saveIcon = debugElement.querySelectorAll('po-button button po-icon i[class="ph ph-check po-fonts-icon"]');
-      const cancelIcon = debugElement.querySelectorAll('po-button button po-icon i[class="ph ph-x po-fonts-icon"]');
+      const saveIcon = debugElement.querySelectorAll('po-button button po-icon i[class="an an-check po-fonts-icon"]');
+      const cancelIcon = debugElement.querySelectorAll('po-button button po-icon i[class="an an-x po-fonts-icon"]');
 
       expect(saveIcon.length).toBe(0);
       expect(cancelIcon.length).toBe(1);
diff --git a/projects/ui/src/lib/components/po-page/po-page-list/po-page-list-base.component.ts b/projects/ui/src/lib/components/po-page/po-page-list/po-page-list-base.component.ts
index 2c1d1a7a7..94898e1a1 100644
--- a/projects/ui/src/lib/components/po-page/po-page-list/po-page-list-base.component.ts
+++ b/projects/ui/src/lib/components/po-page/po-page-list/po-page-list-base.component.ts
@@ -32,7 +32,7 @@ export const poPageListLiteralsDefault = {
  * podendo ser apresentado como lista ou tabela.
  *
  * Este componente possibilita realizar filtro dos dados, no qual permite que seja atribuido uma função que será executada no momento
- * da filtragem. Este comportamento pode ser acionado tanto ao *click* do ícone [ph-magnifying-glass](https://po-ui.io/icons)
+ * da filtragem. Este comportamento pode ser acionado tanto ao *click* do ícone [an-magnifying-glass](https://po-ui.io/icons)
  * quanto ao pressionar da tecla *ENTER* quando o foco estiver no campo de pesquisa.
  *
  * Para facilitar a manipulação e visualização dos filtros aplicados, é possível também utilizar o componente
diff --git a/projects/ui/src/lib/components/po-page/po-page-list/samples/sample-po-page-list-labs/sample-po-page-list-labs.component.ts b/projects/ui/src/lib/components/po-page/po-page-list/samples/sample-po-page-list-labs/sample-po-page-list-labs.component.ts
index c7d16f8ad..952b1cc85 100644
--- a/projects/ui/src/lib/components/po-page/po-page-list/samples/sample-po-page-list-labs/sample-po-page-list-labs.component.ts
+++ b/projects/ui/src/lib/components/po-page/po-page-list/samples/sample-po-page-list-labs/sample-po-page-list-labs.component.ts
@@ -44,9 +44,9 @@ export class SamplePoPageListLabsComponent implements OnInit {
   };
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-newspaper', label: 'ph ph-newspaper' },
-    { value: 'ph ph-magnifying-glass', label: 'ph ph-magnifying-glass' },
-    { value: 'ph ph-globe', label: 'ph ph-globe' },
+    { value: 'an an-newspaper', label: 'an an-newspaper' },
+    { value: 'an an-magnifying-glass', label: 'an an-magnifying-glass' },
+    { value: 'an an-globe', label: 'an an-globe' },
     { value: 'fa fa-podcast', label: 'fa fa-podcast' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts b/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts
index 6a41d4619..86f993089 100644
--- a/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts
+++ b/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts
@@ -28,7 +28,7 @@ export interface PoPopupAction {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-component
-   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'ph ph-newspaper' }]">
+   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
    * </po-component>
    * ```
    *
diff --git a/projects/ui/src/lib/components/po-popup/po-popup-base.component.ts b/projects/ui/src/lib/components/po-popup/po-popup-base.component.ts
index 32f460262..da65ad336 100644
--- a/projects/ui/src/lib/components/po-popup/po-popup-base.component.ts
+++ b/projects/ui/src/lib/components/po-popup/po-popup-base.component.ts
@@ -196,7 +196,7 @@ export class PoPopupBaseComponent {
    * de abertura no mesmo e com isso, invocará a função `toggle`, por exemplo:
    *
    * ```
-   * <span #icon class="ph ph-credit-card" (click)="popup.toggle()">
+   * <span #icon class="an an-credit-card" (click)="popup.toggle()">
    *   Credit Actions
    * </span>
    *
diff --git a/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-basic/sample-po-popup-basic.component.html b/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-basic/sample-po-popup-basic.component.html
index 5a95baac3..19bda949a 100644
--- a/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-basic/sample-po-popup-basic.component.html
+++ b/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-basic/sample-po-popup-basic.component.html
@@ -1,2 +1,2 @@
-<po-icon p-icon="ph ph-question" #target class="po-clickable" (click)="popup.toggle()"> </po-icon>
+<po-icon p-icon="an an-question" #target class="po-clickable" (click)="popup.toggle()"> </po-icon>
 <po-popup #popup [p-actions]="[{ label: 'PO Popup' }]" [p-target]="targetRef"> </po-popup>
diff --git a/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-email/sample-po-popup-email.component.ts b/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-email/sample-po-popup-email.component.ts
index fb00cec8d..95ef99919 100644
--- a/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-email/sample-po-popup-email.component.ts
+++ b/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-email/sample-po-popup-email.component.ts
@@ -42,9 +42,9 @@ export class SamplePoPopupEmailComponent implements OnInit {
 
   ngOnInit() {
     this.popupActions = [
-      { icon: 'ph ph-plus', label: 'Upper Text', type: 'default', action: this.upper.bind(this) },
-      { icon: 'ph ph-minus', label: 'Lower Text', type: 'default', action: this.lower.bind(this) },
-      { icon: 'ph ph-x', label: 'Clear', type: 'danger', action: this.clear.bind(this), separator: true }
+      { icon: 'an an-plus', label: 'Upper Text', type: 'default', action: this.upper.bind(this) },
+      { icon: 'an an-minus', label: 'Lower Text', type: 'default', action: this.lower.bind(this) },
+      { icon: 'an an-x', label: 'Clear', type: 'danger', action: this.clear.bind(this), separator: true }
     ];
 
     this.primaryAction = {
diff --git a/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-labs/sample-po-popup-labs.component.ts b/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-labs/sample-po-popup-labs.component.ts
index 9270cc9a6..46049c0bd 100644
--- a/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-labs/sample-po-popup-labs.component.ts
+++ b/projects/ui/src/lib/components/po-popup/samples/sample-po-popup-labs/sample-po-popup-labs.component.ts
@@ -33,9 +33,9 @@ export class SamplePoPopupLabsComponent implements OnInit {
   ];
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-newspaper', label: 'ph ph-newspaper' },
-    { value: 'ph ph-magnifying-glass', label: 'ph ph-magnifying-glass' },
-    { value: 'ph ph-globe', label: 'ph ph-globe' },
+    { value: 'an an-newspaper', label: 'an an-newspaper' },
+    { value: 'an an-magnifying-glass', label: 'an an-magnifying-glass' },
+    { value: 'an an-globe', label: 'an an-globe' },
     { label: 'fa fa-address-card', value: 'fa fa-address-card' },
     { label: 'fa fa-bell', value: 'fa fa-bell' }
   ];
diff --git a/projects/ui/src/lib/components/po-progress/po-progress-base.component.ts b/projects/ui/src/lib/components/po-progress/po-progress-base.component.ts
index 8f46b7284..af2564b2e 100644
--- a/projects/ui/src/lib/components/po-progress/po-progress-base.component.ts
+++ b/projects/ui/src/lib/components/po-progress/po-progress-base.component.ts
@@ -66,7 +66,7 @@ export class PoProgressBaseComponent {
    *
    * Ícone que aparecerá ao lado do texto da propriedade `p-info`.
    *
-   * Exemplo: `ph ph-check`.
+   * Exemplo: `an an-check`.
    */
   @Input('p-info-icon') infoIcon?: string | TemplateRef<void>;
 
diff --git a/projects/ui/src/lib/components/po-progress/po-progress.component.spec.ts b/projects/ui/src/lib/components/po-progress/po-progress.component.spec.ts
index 29d6d070f..b2c2b4928 100644
--- a/projects/ui/src/lib/components/po-progress/po-progress.component.spec.ts
+++ b/projects/ui/src/lib/components/po-progress/po-progress.component.spec.ts
@@ -228,21 +228,21 @@ describe('PoProgressComponent:', () => {
       expect(nativeElement.querySelector('.po-progress-bar-indeterminate')).toBeFalsy();
     });
 
-    it('should contain `ph-x` if `cancel` is defined', () => {
+    it('should contain `an-x` if `cancel` is defined', () => {
       const cancelFunction = () => {};
       component.cancel.observers.push(<any>[new Observable(cancelFunction)]);
 
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-x')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-x')).toBeTruthy();
     });
 
-    it('shouldn`t contain `ph-x` if `cancel` is undefined', () => {
+    it('shouldn`t contain `an-x` if `cancel` is undefined', () => {
       component.cancel.observers.length = 0;
 
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-x')).toBeFalsy();
+      expect(nativeElement.querySelector('.an-x')).toBeFalsy();
     });
 
     it('should emit cancellation with status if `cancel` is clicked', () => {
@@ -253,7 +253,7 @@ describe('PoProgressComponent:', () => {
 
       spyOn(component.cancel, 'emit');
 
-      nativeElement.querySelector('.ph-x').click();
+      nativeElement.querySelector('.an-x').click();
 
       expect(component.cancel.emit).toHaveBeenCalledWith(component.status);
     });
@@ -268,7 +268,7 @@ describe('PoProgressComponent:', () => {
 
       spyOn(component.retry, 'emit');
 
-      nativeElement.querySelector('.ph-arrow-clockwise').click();
+      nativeElement.querySelector('.an-arrow-clockwise').click();
 
       expect(component.retry.emit).toHaveBeenCalled();
     });
diff --git a/projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.ts b/projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.ts
index 01b604b1d..771274c97 100644
--- a/projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.ts
+++ b/projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.ts
@@ -18,10 +18,10 @@ export class SamplePoProgressLabsComponent implements OnInit {
   value: number;
 
   infoIconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph ph-warning-circle', value: 'ph ph-warning-circle' },
-    { label: 'ph ph-check', value: 'ph ph-check' },
-    { label: 'ph ph-user', value: 'ph ph-user' },
-    { label: 'ph ph-cloud-slash', value: 'ph ph-cloud-slash' }
+    { label: 'an an-warning-circle', value: 'an an-warning-circle' },
+    { label: 'an an-check', value: 'an an-check' },
+    { label: 'an an-user', value: 'an an-user' },
+    { label: 'an an-cloud-slash', value: 'an an-cloud-slash' }
   ];
 
   propertiesOptions: Array<PoCheckboxGroupOption> = [
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts
index 37119621c..d1d834e4f 100644
--- a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts
+++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts
@@ -54,7 +54,7 @@ export class SamplePoSearchLabsComponent implements OnInit, OnChanges {
 
   public readonly iconsOptions: Array<PoRadioGroupOption> = [
     { label: 'fa-search', value: 'fa fa-search' },
-    { label: 'ph-magnifying-glass', value: 'ph ph-magnifying-glass' }
+    { label: 'an-magnifying-glass', value: 'an an-magnifying-glass' }
   ];
 
   public readonly filterModeOptions: Array<PoRadioGroupOption> = [
diff --git a/projects/ui/src/lib/components/po-stepper/po-step/po-step.component.ts b/projects/ui/src/lib/components/po-stepper/po-step/po-step.component.ts
index de1bac890..ff5b73c57 100644
--- a/projects/ui/src/lib/components/po-stepper/po-step/po-step.component.ts
+++ b/projects/ui/src/lib/components/po-stepper/po-step/po-step.component.ts
@@ -99,20 +99,11 @@ export class PoStepComponent implements AfterContentInit {
    *
    * @description
    * Define o ícone padrão do step em seu status *default*.
-   * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons) ou da biblioteca [Phosphor](https://phosphoricons.com/).
-   *
-   * Exemplo usando a biblioteca de ícones padrão:
-   * ```
-   * <po-stepper>
-   *    ...
-   *    <po-step p-icon-default="po-icon po-icon-pin"></po-step>
-   * </po-stepper>
-   * ```
-   * Exemplo usando a biblioteca *Phosphor*:
+   * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons).
    * ```
    * <po-stepper>
    *    ...
-   *    <po-step p-icon-default="ph ph-map-pin"></po-step>
+   *    <po-step p-icon-default="an an-map-pin"></po-step>
    * </po-stepper>
    * ```
    * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
@@ -123,7 +114,7 @@ export class PoStepComponent implements AfterContentInit {
    * </po-stepper>
    *
    * <ng-template #template>
-   *    <i class="ph ph-shopping-cart"></i>
+   *    <i class="an an-shopping-cart"></i>
    * </ng-template
    * ```
    * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente.
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts
index eba9ae0f1..3d2914c65 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts
+++ b/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts
@@ -227,17 +227,9 @@ export class PoStepperBaseComponent {
    *
    * @description
    * Permite definir o ícone do step no status concluído.
-   * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons) ou da biblioteca [Phosphor](https://phosphoricons.com/).
-   *
-   * Exemplo usando a biblioteca de ícones padrão:
-   * ```
-   * <po-stepper p-step-icon-done="po-icon po-icon-eye">
-   *    ...
-   * </po-stepper>
-   * ```
-   * Exemplo usando a biblioteca *Phosphor*:
+   * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons)
    * ```
-   * <po-stepper p-step-icon-done="ph ph-check-circle">
+   * <po-stepper p-step-icon-done="an an-check-circle">
    *    ...
    * </po-stepper>
    * ```
@@ -248,7 +240,7 @@ export class PoStepperBaseComponent {
    * </po-stepper>
    *
    * <ng-template #doneIcon>
-   *    <i class="ph ph-check-fat"></i>
+   *    <i class="an an-check-fat"></i>
    * </ng-template>
    * ```
    * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente.
@@ -262,17 +254,9 @@ export class PoStepperBaseComponent {
    *
    * @description
    * Permite definir o ícone do step no status ativo.
-   * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons) ou da biblioteca [Phosphor](https://phosphoricons.com/).
-   *
-   * Exemplo usando a biblioteca de ícones padrão:
-   * ```
-   * <po-stepper p-step-icon-active="po-icon po-icon-settings">
-   *    ...
-   * </po-stepper>
-   * ```
-   * Exemplo usando a biblioteca *Phosphor*:
+   * Esta propriedade permite usar ícones da [Biblioteca de ícones](https://po-ui.io/icons).
    * ```
-   * <po-stepper p-step-icon-active="ph ph-pencil-simple-line">
+   * <po-stepper p-step-icon-active="an an-pencil-simple-line">
    *    ...
    * </po-stepper>
    * ```
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.spec.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.spec.ts
index 99e6a615c..b681220e8 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.spec.ts
+++ b/projects/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.spec.ts
@@ -260,12 +260,12 @@ describe('PoStepperCircleComponent:', () => {
 
     it('should apply `iconActive` from Phosphor library if `status` is `Active` and `iconActive` is set.', () => {
       component.status = PoStepperStatus.Active;
-      component.iconActive = 'ph ph-anchor';
+      component.iconActive = 'an an-anchor';
       fixture.detectChanges();
 
       const activeIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
       expect(activeIcon).toBeTruthy();
-      expect(activeIcon.classList.contains('ph-anchor')).toBeTrue();
+      expect(activeIcon.classList.contains('an-anchor')).toBeTrue();
     });
 
     it('should apply `iconActive` from Icons library if `status` is `Active` and `iconActive` is set.', () => {
@@ -286,18 +286,18 @@ describe('PoStepperCircleComponent:', () => {
       const activeIcon = PoIconEdit();
 
       expect(activeIcon).toBeTruthy();
-      expect(activeIcon.classList.contains('ph-pencil-simple')).toBeTrue();
+      expect(activeIcon.classList.contains('an-pencil-simple')).toBeTrue();
     });
 
     it('should apply `iconDone` from Phosphor library if `status` is `Done` and `iconDone` is set.', () => {
       component.status = PoStepperStatus.Done;
-      component.iconDone = 'ph ph-check-circle';
+      component.iconDone = 'an an-check-circle';
       fixture.detectChanges();
 
       const doneIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
 
       expect(doneIcon).toBeTruthy();
-      expect(doneIcon.classList.contains('ph-check-circle')).toBeTrue();
+      expect(doneIcon.classList.contains('an-check-circle')).toBeTrue();
     });
 
     it('should apply `iconDone` from Icons library if `status` is `Done` and `iconDone` is set.', () => {
@@ -321,19 +321,19 @@ describe('PoStepperCircleComponent:', () => {
 
     it('should apply `iconDefault` from Phosphor library if `status` is `Default` or `Disabled` and `iconDefault` is set.', () => {
       component.status = PoStepperStatus.Default;
-      component.iconDefault = 'ph ph-first-aid';
+      component.iconDefault = 'an an-first-aid';
       fixture.detectChanges();
 
       let defaultIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
       expect(defaultIcon).toBeTruthy();
-      expect(defaultIcon.classList.contains('ph-first-aid')).toBeTrue();
+      expect(defaultIcon.classList.contains('an-first-aid')).toBeTrue();
 
       component.status = PoStepperStatus.Disabled;
       fixture.detectChanges();
 
       defaultIcon = nativeElement.querySelector('po-icon')?.querySelector('i');
       expect(defaultIcon).toBeTruthy();
-      expect(defaultIcon.classList.contains('ph-first-aid')).toBeTrue();
+      expect(defaultIcon.classList.contains('an-first-aid')).toBeTrue();
     });
 
     it('should apply `iconDefault` from Icons library if `status` is `Default` or `Disabled` and `iconDefault` is set.', () => {
@@ -361,14 +361,14 @@ describe('PoStepperCircleComponent:', () => {
 
       const defaultIcon = PoIconInfo();
       expect(defaultIcon).toBeTruthy();
-      expect(defaultIcon.classList.contains('ph-info')).toBeTrue();
+      expect(defaultIcon.classList.contains('an-info')).toBeTrue();
 
       component.status = PoStepperStatus.Disabled;
       fixture.detectChanges();
 
       const disabledIcon = PoIconInfo();
       expect(disabledIcon).toBeTruthy();
-      expect(disabledIcon.classList.contains('ph-info')).toBeTrue();
+      expect(disabledIcon.classList.contains('an-info')).toBeTrue();
     });
 
     it('should display an empty string if `status` is `Default` or `Disabled`, `iconDefault` is not set, and `icons` is false.', () => {
@@ -389,14 +389,14 @@ describe('PoStepperCircleComponent:', () => {
   });
 
   function PoIconInfo() {
-    return nativeElement.querySelector('po-icon')?.querySelector('i.ph.ph-info');
+    return nativeElement.querySelector('po-icon')?.querySelector('i.an.an-info');
   }
 
   function PoIconOk() {
-    return nativeElement.querySelector('.ph-check');
+    return nativeElement.querySelector('.an-check');
   }
 
   function PoIconEdit() {
-    return nativeElement.querySelector('po-icon')?.querySelector('i.ph-pencil-simple');
+    return nativeElement.querySelector('po-icon')?.querySelector('i.an-pencil-simple');
   }
 });
diff --git a/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts b/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts
index 0a2833dce..47a61be62 100644
--- a/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts
+++ b/projects/ui/src/lib/components/po-stepper/samples/sample-po-stepper-labs/sample-po-stepper-labs.component.ts
@@ -45,13 +45,13 @@ export class SamplePoStepperLabsComponent implements OnInit {
     },
     {
       label: 'Step Icon Active Custom',
-      help: 'Ex.: ph ph-pencil-simple-line',
+      help: 'Ex.: an an-pencil-simple-line',
       gridLgColumns: 4,
       property: 'iconActive'
     },
     {
       label: 'Step Icon Done Custom',
-      help: 'Ex.: ph ph-check-fat',
+      help: 'Ex.: an an-check-fat',
       gridLgColumns: 4,
       property: 'iconDone'
     },
@@ -73,7 +73,7 @@ export class SamplePoStepperLabsComponent implements OnInit {
     {
       property: 'iconDefault',
       label: 'Step Icon Default Custom',
-      help: 'Ex.: ph ph-question',
+      help: 'Ex.: an an-question',
       gridMdColumns: 6,
       gridXlColumns: 6
     }
diff --git a/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts b/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts
index ac03b18de..a31cf6015 100644
--- a/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts
+++ b/projects/ui/src/lib/components/po-table/interfaces/po-table-column.interface.ts
@@ -72,7 +72,7 @@ export interface PoTableColumn {
    *
    * ```
    * { property: 'columnIcon', label: 'Like', type: 'icon', color: 'color-08', icons: [
-   *   { value: 'ph ph-star', action: () => this.notification() }
+   *   { value: 'an an-star', action: () => this.notification() }
    * ]},
    * ```
    */
@@ -118,15 +118,15 @@ export interface PoTableColumn {
    *
    * ```
    *  { property: 'columnIcon', label: 'Icons', type: 'icon', action: this.favorite.bind(this), icons: [
-   *    { value: 'delete', icon: 'ph ph-plus', color: 'color-06', action: this.add.bind(this), tooltip: 'Adiciona um novo item' },
-   *    { value: 'edit', icon: 'ph ph-pencil-simple', action: this.edit.bind(this) },
-   *    { value: 'delete', icon: 'ph ph-trash', color: 'color-12', action: this.remove.bind(this) }
+   *    { value: 'delete', icon: 'an an-plus', color: 'color-06', action: this.add.bind(this), tooltip: 'Adiciona um novo item' },
+   *    { value: 'edit', icon: 'an an-pencil-simple', action: this.edit.bind(this) },
+   *    { value: 'delete', icon: 'an an-trash', color: 'color-12', action: this.remove.bind(this) }
    *  ]},
    * ```
    *
    * ```
    *  ...
-   *  { id: 1, columnIcon: ['ph ph-pencil-simple', 'ph ph-trash', 'ph ph-star'] }
+   *  { id: 1, columnIcon: ['an an-pencil-simple', 'an an-trash', 'an an-star'] }
    *  ...
    *
    * ```
diff --git a/projects/ui/src/lib/components/po-table/po-table-base.component.ts b/projects/ui/src/lib/components/po-table/po-table-base.component.ts
index 5c437e9bc..c6eaa9c60 100644
--- a/projects/ui/src/lib/components/po-table/po-table-base.component.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-base.component.ts
@@ -738,7 +738,7 @@ export abstract class PoTableBaseComponent implements OnChanges, OnDestroy {
    * Define uma lista de ações.
    *
    * Quando houver apenas uma ação definida ela será exibida diretamente na coluna, caso contrário, o componente
-   * se encarrega de agrupá-las exibindo o ícone [**ph ph-dots-three**](https://po-ui.io/icons) que listará as ações ao ser clicado.
+   * se encarrega de agrupá-las exibindo o ícone [**an an-dots-three**](https://po-ui.io/icons) que listará as ações ao ser clicado.
    *
    * **A coluna de ações não será exibida quando:**
    *  - a lista conter valores inválidos ou indefinidos.
diff --git a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts
index 19ff8aba3..db8e48b2d 100644
--- a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts
@@ -43,7 +43,7 @@ export interface PoTableColumnIcon {
   /**
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * [ { icon: 'ph ph-plus' } ]
+   * [ { icon: 'an an-plus' } ]
    * ```
    *
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
diff --git a/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts b/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts
index c8a2c6edb..ad53b5bf1 100644
--- a/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts
@@ -71,13 +71,13 @@ export interface PoTableColumnLabel {
    *
    * Quando `p-type` estiver definida, basta informar um valor igual a `true` para que o ícone seja exibido conforme descrições abaixo:
    * - <span class="ph check"></span> - `success`
-   * - <span class="ph ph-warning-circle"></span> - `warning`
-   * - <span class="ph ph-x"></span> - `danger`
-   * - <span class="ph ph-info"></span> - `info`
+   * - <span class="an an-warning-circle"></span> - `warning`
+   * - <span class="an an-x"></span> - `danger`
+   * - <span class="an an-info"></span> - `info`
    *
    * Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-tag>
+   * <po-tag p-icon="an an-user" p-value="PO Tag"></po-tag>
    * ```
    * como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html b/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html
index 53f0ff2a2..defea56b8 100644
--- a/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html
+++ b/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html
@@ -49,7 +49,7 @@
       </po-button>
 
       <po-button
-        *ngIf="!hideActionFixedColumns && iconNameLib === 'PhosphorIcon'"
+        *ngIf="!hideActionFixedColumns && iconNameLib === 'AnimaliaIcon'"
         [p-icon]="isFixed(option) ? 'ICON_PUSH_PIN_SLASH' : 'ICON_PUSH_PIN'"
         (p-click)="emitFixed(option)"
         [p-disabled]="!option.visible || checksIfHasFiveFixed(option)"
diff --git a/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.ts b/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.ts
index 7b6d22d09..b5abbf49b 100644
--- a/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.ts
@@ -5,7 +5,7 @@ import { poLocaleDefault } from '../../../services/po-language/po-language.const
 import { PoLanguageService } from '../../../services/po-language/po-language.service';
 import { convertToBoolean } from '../../../utils/util';
 import { PoCheckboxGroupComponent } from '../../po-field/po-checkbox-group/po-checkbox-group.component';
-import { ICONS_DICTIONARY, PhosphorIconDictionary } from '../../po-icon';
+import { ICONS_DICTIONARY, AnimaliaIconDictionary } from '../../po-icon';
 import { PoTableColumn } from '../interfaces/po-table-column.interface';
 
 export const poTableListManagerLiterals = {
@@ -82,7 +82,7 @@ export class PoTableListManagerComponent extends PoCheckboxGroupComponent {
       ...poTableListManagerLiterals[language]
     };
 
-    this._iconToken = value ?? PhosphorIconDictionary;
+    this._iconToken = value ?? AnimaliaIconDictionary;
   }
 
   emitChangePosition(option, direction: Direction) {
diff --git a/projects/ui/src/lib/components/po-table/po-table.component.html b/projects/ui/src/lib/components/po-table/po-table.component.html
index c7fe1d268..227e94562 100644
--- a/projects/ui/src/lib/components/po-table/po-table.component.html
+++ b/projects/ui/src/lib/components/po-table/po-table.component.html
@@ -193,7 +193,7 @@
               [class.po-table-header-flex-center]="column.type === 'subtitle'"
             >
               <ng-container *ngIf="this.isDraggable && !column.fixed">
-                <po-icon cdkDragHandle *ngIf="iconNameLib === 'PhosphorIcon'" p-icon="ICON_DRAG"></po-icon>
+                <po-icon cdkDragHandle *ngIf="iconNameLib === 'AnimaliaIcon'" p-icon="ICON_DRAG"></po-icon>
                 <svg
                   *ngIf="iconNameLib === 'PoIcon'"
                   cdkDragHandle
@@ -543,7 +543,7 @@
                 [class.po-table-header-flex-center]="column.type === 'subtitle'"
               >
                 <ng-container *ngIf="this.isDraggable && !column.fixed">
-                  <po-icon cdkDragHandle *ngIf="iconNameLib === 'PhosphorIcon'" p-icon="ICON_DRAG"></po-icon>
+                  <po-icon cdkDragHandle *ngIf="iconNameLib === 'AnimaliaIcon'" p-icon="ICON_DRAG"></po-icon>
                   <svg
                     *ngIf="iconNameLib === 'PoIcon'"
                     cdkDragHandle
@@ -849,7 +849,7 @@
     "
   >
     <ng-container *ngIf="JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)">
-      <po-icon *ngIf="iconNameLib === 'PhosphorIcon'" p-icon="ICON_SORT"></po-icon>
+      <po-icon *ngIf="iconNameLib === 'AnimaliaIcon'" p-icon="ICON_SORT"></po-icon>
       <svg
         *ngIf="iconNameLib === 'PoIcon'"
         width="16"
@@ -868,7 +868,7 @@
     </ng-container>
 
     <ng-container *ngIf="JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending">
-      <po-icon *ngIf="iconNameLib === 'PhosphorIcon'" p-icon="ICON_SORT_ASC"></po-icon>
+      <po-icon *ngIf="iconNameLib === 'AnimaliaIcon'" p-icon="ICON_SORT_ASC"></po-icon>
       <svg
         *ngIf="iconNameLib === 'PoIcon'"
         width="16"
@@ -887,7 +887,7 @@
     </ng-container>
 
     <ng-container *ngIf="JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending">
-      <po-icon cdkDragHandle *ngIf="iconNameLib === 'PhosphorIcon'" p-icon="ICON_SORT_DESC"></po-icon>
+      <po-icon cdkDragHandle *ngIf="iconNameLib === 'AnimaliaIcon'" p-icon="ICON_SORT_DESC"></po-icon>
       <svg
         *ngIf="iconNameLib === 'PoIcon'"
         width="16"
diff --git a/projects/ui/src/lib/components/po-table/po-table.component.ts b/projects/ui/src/lib/components/po-table/po-table.component.ts
index d8bc191c1..ba7160055 100644
--- a/projects/ui/src/lib/components/po-table/po-table.component.ts
+++ b/projects/ui/src/lib/components/po-table/po-table.component.ts
@@ -33,7 +33,7 @@ import { PoPopupComponent } from '../po-popup/po-popup.component';
 import { PoTableColumnLabel } from './po-table-column-label/po-table-column-label.interface';
 
 import { uuid } from '../../utils/util';
-import { ICONS_DICTIONARY, PhosphorIconDictionary } from '../po-icon';
+import { ICONS_DICTIONARY, AnimaliaIconDictionary } from '../po-icon';
 import { PoTableRowTemplateArrowDirection } from './enums/po-table-row-template-arrow-direction.enum';
 import { PoTableAction } from './interfaces/po-table-action.interface';
 import { PoTableColumn } from './interfaces/po-table-column.interface';
@@ -221,7 +221,7 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
       this.debounceResize();
     });
 
-    this._iconToken = value ?? PhosphorIconDictionary;
+    this._iconToken = value ?? AnimaliaIconDictionary;
   }
 
   get hasRowTemplateWithArrowDirectionRight() {
diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html b/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html
index 7462a87d5..a0367dab8 100644
--- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html
+++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.html
@@ -44,7 +44,7 @@
 </po-info>
 
 <div class="po-row">
-  <po-button class="po-md-3" p-icon="ph ph-shopping-cart-simple" p-label="Add items to cart" (p-click)="addToCart()">
+  <po-button class="po-md-3" p-icon="an an-shopping-cart-simple" p-label="Add items to cart" (p-click)="addToCart()">
   </po-button>
   <po-button class="po-md-3" p-label="Expand all detail" (p-click)="expandAll()"> </po-button>
   <po-button class="po-md-3" p-label="Collapse all detail" (p-click)="collapseAll()"> </po-button>
diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.ts b/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.ts
index 1bef72050..8c9abce50 100644
--- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.ts
+++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.ts
@@ -24,12 +24,12 @@ export class SamplePoTableAirfareComponent implements AfterViewInit, OnInit {
   actions: Array<PoTableAction> = [
     {
       action: this.discount.bind(this),
-      icon: 'ph ph-currency-circle-dollar',
+      icon: 'an an-currency-circle-dollar',
       label: 'Apply Discount',
       disabled: this.validateDiscount.bind(this)
     },
-    { action: this.details.bind(this), icon: 'ph ph-info', label: 'Details' },
-    { action: this.remove.bind(this), icon: 'po-icon ph ph-trash', label: 'Remove' }
+    { action: this.details.bind(this), icon: 'an an-info', label: 'Details' },
+    { action: this.remove.bind(this), icon: 'po-icon an an-trash', label: 'Remove' }
   ];
   columns: Array<PoTableColumn>;
   columnsDefault: Array<PoTableColumn>;
diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-components/sample-po-table-components.component.ts b/projects/ui/src/lib/components/po-table/samples/sample-po-table-components/sample-po-table-components.component.ts
index 53a982b8b..75307a949 100644
--- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-components/sample-po-table-components.component.ts
+++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-components/sample-po-table-components.component.ts
@@ -79,14 +79,14 @@ export class SamplePoTableComponentsComponent implements OnInit {
         {
           action: this.favorite.bind(this),
           color: this.isFavorite.bind(this),
-          icon: 'ph ph-star',
+          icon: 'an an-star',
           tooltip: 'Favorite',
           value: 'favorite'
         },
         {
           action: this.goToDocumentation.bind(this),
           disabled: this.canGoToDocumentation.bind(this),
-          icon: 'ph ph-arrow-square-out',
+          icon: 'an an-arrow-square-out',
           tooltip: 'Click to go to documentation',
           value: 'documentation'
         }
diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.po.ts b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.po.ts
index d6c9a29a6..e1a935c25 100644
--- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.po.ts
+++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.component.po.ts
@@ -94,6 +94,6 @@ export class PoTableLabsPage {
   }
 
   get poTableActions() {
-    return element.all(by.css(`${this.sampleTable} po-table .po-icon.ph ph-dots-three.po-clickable`));
+    return element.all(by.css(`${this.sampleTable} po-table .po-icon.an an-dots-three.po-clickable`));
   }
 }
diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.service.ts b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.service.ts
index 6814b2372..e5f0a33c1 100644
--- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.service.ts
+++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-labs/sample-po-table-labs.service.ts
@@ -131,8 +131,8 @@ export class SamplePoTableLabsService {
   }
 
   private generateRandomIcon(index: number) {
-    const iconsOne = ['ph ph-copy', 'ph ph-check', 'ph ph-camera', 'ph ph-plant', 'ph ph-building-apartment'];
-    const iconsTwo = ['ph ph-trash', 'ph ph-newspaper', 'ph ph-gas-pump', 'ph ph-chats', 'ph ph-bluetooth'];
+    const iconsOne = ['an an-copy', 'an an-check', 'an an-camera', 'an an-plant', 'an an-building-apartment'];
+    const iconsTwo = ['an an-trash', 'an an-newspaper', 'an an-gas-pump', 'an an-chats', 'an an-bluetooth'];
 
     const randomIcon = Math.floor(Math.random() * 5);
 
diff --git a/projects/ui/src/lib/components/po-table/samples/sample-po-table-transport/sample-po-table-transport.service.ts b/projects/ui/src/lib/components/po-table/samples/sample-po-table-transport/sample-po-table-transport.service.ts
index 0f9f6aeca..a0100afe3 100644
--- a/projects/ui/src/lib/components/po-table/samples/sample-po-table-transport/sample-po-table-transport.service.ts
+++ b/projects/ui/src/lib/components/po-table/samples/sample-po-table-transport/sample-po-table-transport.service.ts
@@ -23,7 +23,7 @@ export class SamplePoTableTransportService {
           { value: 'delivered', color: 'blue', label: 'Delivered' },
           { value: 'transport', label: 'Transport', type: PoTagType.Success },
           { value: 'production', color: ' #745678', label: 'Production' },
-          { value: 'stock', color: 'rgb(201, 53, 125)', label: 'Stock', icon: 'ph ph-package' }
+          { value: 'stock', color: 'rgb(201, 53, 125)', label: 'Stock', icon: 'an an-package' }
         ]
       }
     ];
diff --git a/projects/ui/src/lib/components/po-tabs/samples/sample-po-tabs-business-conf/sample-po-tabs-business-conf.component.html b/projects/ui/src/lib/components/po-tabs/samples/sample-po-tabs-business-conf/sample-po-tabs-business-conf.component.html
index 447fa3b7f..e7278a97a 100644
--- a/projects/ui/src/lib/components/po-tabs/samples/sample-po-tabs-business-conf/sample-po-tabs-business-conf.component.html
+++ b/projects/ui/src/lib/components/po-tabs/samples/sample-po-tabs-business-conf/sample-po-tabs-business-conf.component.html
@@ -38,13 +38,13 @@
                 <div class="po-row">
                   <div class="po-md-6 po-lg-12">
                     <span class="po-mr-1 po-font-subtitle">
-                      <po-icon p-icon="po-icon ph ph-calendar-dots"></po-icon>
+                      <po-icon p-icon="po-icon an an-calendar-dots"></po-icon>
                     </span>
                     <span class="po-font-text po-mb-2">{{ speaker.createdDate | date: 'MM/dd/yyyy' }}</span>
                   </div>
                   <div class="po-md-6 po-lg-12">
                     <span class="po-mr-1 po-font-subtitle">
-                      <po-icon p-icon="po-icon ph ph-map-pin"></po-icon>
+                      <po-icon p-icon="po-icon an an-map-pin"></po-icon>
                     </span>
                     <span class="po-font-text">Av. Braz Leme, 1000, Santana</span>
                   </div>
diff --git a/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts b/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts
index 394b5564d..5480bfa7d 100644
--- a/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts
+++ b/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts
@@ -236,14 +236,14 @@ export class PoTagBaseComponent {
    * Define ou ativa um ícone que será exibido ao lado do valor da *tag*.
    *
    * Quando `p-type` estiver definida, basta informar um valor igual a `true` para que o ícone seja exibido conforme descrições abaixo:
-   * - <span class="ph ph-check"></span> - `success`
-   * - <span class="ph ph-warning-circle"></span> - `warning`
-   * - <span class="ph ph-x"></span> - `danger`
-   * - <span class="ph ph-info"></span> - `info`
+   * - <span class="an an-check"></span> - `success`
+   * - <span class="an an-warning-circle"></span> - `warning`
+   * - <span class="an an-x"></span> - `danger`
+   * - <span class="an an-info"></span> - `info`
    *
    * Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-tag>
+   * <po-tag p-icon="an an-user" p-value="PO Tag"></po-tag>
    * ```
    * como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
diff --git a/projects/ui/src/lib/components/po-tag/samples/sample-po-tag-labs/sample-po-tag-labs.component.ts b/projects/ui/src/lib/components/po-tag/samples/sample-po-tag-labs/sample-po-tag-labs.component.ts
index 3863cddfb..e0e0f5f19 100644
--- a/projects/ui/src/lib/components/po-tag/samples/sample-po-tag-labs/sample-po-tag-labs.component.ts
+++ b/projects/ui/src/lib/components/po-tag/samples/sample-po-tag-labs/sample-po-tag-labs.component.ts
@@ -42,12 +42,12 @@ export class SamplePoTagLabsComponent implements OnInit {
   ];
 
   public readonly iconList: Array<PoSelectOption> = [
-    { label: 'ph ph-bluetooth', value: 'ph ph-bluetooth' },
-    { label: 'ph ph-heart', value: 'ph ph-heart' },
-    { label: 'ph ph-lightbulb', value: 'ph ph-lightbulb' },
-    { label: 'ph ph-star', value: 'ph ph-star' },
-    { label: 'ph ph-gear', value: 'ph ph-gear' },
-    { label: 'ph ph-globe', value: 'ph ph-globe' },
+    { label: 'an an-bluetooth', value: 'an an-bluetooth' },
+    { label: 'an an-heart', value: 'an an-heart' },
+    { label: 'an an-lightbulb', value: 'an an-lightbulb' },
+    { label: 'an an-star', value: 'an an-star' },
+    { label: 'an an-gear', value: 'an an-gear' },
+    { label: 'an an-globe', value: 'an an-globe' },
     { label: 'fa fa-address-card', value: 'fa fa-address-card' },
     { label: 'fa fa-bell', value: 'fa fa-bell' }
   ];
diff --git a/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts b/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts
index 4152155da..c70b88325 100644
--- a/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts
+++ b/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts
@@ -30,7 +30,7 @@ export class PoToolbarBaseComponent {
    *
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-toolbar p-actions-icon="ph ph-user" [p-actions]="actions"></po-toolbar>
+   * <po-toolbar p-actions-icon="an an-user" [p-actions]="actions"></po-toolbar>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
@@ -48,7 +48,7 @@ export class PoToolbarBaseComponent {
    *
    * > Caso não haja ações definidas em `p-actions`, o ícone não será exibido.
    *
-   * @default `ph-dots-three`
+   * @default `an-dots-three`
    */
   @Input('p-actions-icon') actionsIcon?: string | TemplateRef<void>;
 
diff --git a/projects/ui/src/lib/components/po-toolbar/po-toolbar.component.spec.ts b/projects/ui/src/lib/components/po-toolbar/po-toolbar.component.spec.ts
index 181723cf1..2ffb6ff3a 100644
--- a/projects/ui/src/lib/components/po-toolbar/po-toolbar.component.spec.ts
+++ b/projects/ui/src/lib/components/po-toolbar/po-toolbar.component.spec.ts
@@ -89,7 +89,7 @@ describe('PoToolbarComponent:', () => {
       fixture.detectChanges();
 
       expect(nativeElement.querySelector('po-toolbar-actions')).toBeTruthy();
-      expect(nativeElement.querySelector('.ph-dots-three')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-dots-three')).toBeTruthy();
     });
 
     it('should show actions with `po-icon-cart` if has an action and `actionsIcon` is `po-icon-cart`', () => {
diff --git a/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-labs/sample-po-toolbar-labs.component.ts b/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-labs/sample-po-toolbar-labs.component.ts
index 3213c0f3a..4b3272c4e 100644
--- a/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-labs/sample-po-toolbar-labs.component.ts
+++ b/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-labs/sample-po-toolbar-labs.component.ts
@@ -32,19 +32,19 @@ export class SamplePoToolbarLabsComponent implements OnInit {
   ];
 
   public readonly iconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-chats', label: 'ph ph-chats' },
-    { value: 'ph ph-clock', label: 'ph ph-clock' },
-    { value: 'ph ph-sign-out', label: 'ph ph-sign-out' },
-    { value: 'ph ph-lock', label: 'ph ph-lock' },
+    { value: 'an an-chats', label: 'an an-chats' },
+    { value: 'an an-clock', label: 'an an-clock' },
+    { value: 'an an-sign-out', label: 'an an-sign-out' },
+    { value: 'an an-lock', label: 'an an-lock' },
     { value: 'fa fa-calculator', label: 'fa fa-calculator' },
     { value: 'far fa-comment-alt', label: 'far fa-comment-alt' }
   ];
 
   public readonly actionsIconOptions: Array<PoSelectOption> = [
-    { value: 'ph ph-clock', label: 'ph ph-clock' },
-    { value: 'ph ph-sign-out', label: 'ph ph-sign-out' },
-    { value: 'ph ph-lock', label: 'ph ph-lock' },
-    { value: 'ph ph-gear', label: 'ph ph-gear' },
+    { value: 'an an-clock', label: 'an an-clock' },
+    { value: 'an an-sign-out', label: 'an an-sign-out' },
+    { value: 'an an-lock', label: 'an an-lock' },
+    { value: 'an an-gear', label: 'an an-gear' },
     { value: 'far fa-comment-alt', label: 'far fa-comment-alt' }
   ];
 
diff --git a/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.html b/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.html
index 2992e7b93..2edd993da 100644
--- a/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.html
+++ b/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.html
@@ -5,7 +5,7 @@
 </style>
 
 <po-toolbar
-  p-actions-icon="ph ph-shopping-cart-simple"
+  p-actions-icon="an an-shopping-cart-simple"
   [p-actions]="actions"
   [p-profile]="profile"
   [p-profile-actions]="profileActions"
diff --git a/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.ts b/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.ts
index c76f555c6..4ff7c1db8 100644
--- a/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.ts
+++ b/projects/ui/src/lib/components/po-toolbar/samples/sample-po-toolbar-logged/sample-po-toolbar-logged.component.ts
@@ -11,12 +11,12 @@ import { PoDialogService, PoNotificationService, PoToolbarAction, PoToolbarProfi
 export class SamplePoToolbarLoggedComponent {
   notificationActions: Array<PoToolbarAction> = [
     {
-      icon: 'ph ph-newspaper',
+      icon: 'an an-newspaper',
       label: 'PO news, stay tuned!',
       type: 'danger',
       action: item => this.onClickNotification(item)
     },
-    { icon: 'ph ph-chat', label: 'New message', type: 'danger', action: item => this.openDialog(item) }
+    { icon: 'an an-chat', label: 'New message', type: 'danger', action: item => this.openDialog(item) }
   ];
 
   profile: PoToolbarProfile = {
@@ -26,10 +26,10 @@ export class SamplePoToolbarLoggedComponent {
   };
 
   profileActions: Array<PoToolbarAction> = [
-    { icon: 'ph ph-user', label: 'User data', action: item => this.showAction(item) },
-    { icon: 'ph ph-building-apartment', label: 'Company data', action: item => this.showAction(item) },
-    { icon: 'ph ph-gear', label: 'Settings', action: item => this.showAction(item) },
-    { icon: 'ph ph-sign-out', label: 'Exit', type: 'danger', separator: true, action: item => this.showAction(item) }
+    { icon: 'an an-user', label: 'User data', action: item => this.showAction(item) },
+    { icon: 'an an-building-apartment', label: 'Company data', action: item => this.showAction(item) },
+    { icon: 'an an-gear', label: 'Settings', action: item => this.showAction(item) },
+    { icon: 'an an-sign-out', label: 'Exit', type: 'danger', separator: true, action: item => this.showAction(item) }
   ];
 
   actions: Array<PoToolbarAction> = [
diff --git a/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-supermarket/sample-po-tree-view-supermarket.component.html b/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-supermarket/sample-po-tree-view-supermarket.component.html
index 4f16f7c20..b0e36c32c 100644
--- a/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-supermarket/sample-po-tree-view-supermarket.component.html
+++ b/projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-supermarket/sample-po-tree-view-supermarket.component.html
@@ -35,7 +35,7 @@
           <po-widget>
             <div class="po-row po-font-display">
               <p>Order dispatched</p>
-              <po-icon p-icon="po-icon ph ph-check"></po-icon>
+              <po-icon p-icon="po-icon an an-check"></po-icon>
             </div>
           </po-widget>
         </po-step>
diff --git a/projects/ui/src/lib/services/po-dialog/samples/sample-po-dialog-cancel-credit-card/sample-po-dialog-cancel-credit-card.component.ts b/projects/ui/src/lib/services/po-dialog/samples/sample-po-dialog-cancel-credit-card/sample-po-dialog-cancel-credit-card.component.ts
index faf0ae487..d2c3a7ebb 100644
--- a/projects/ui/src/lib/services/po-dialog/samples/sample-po-dialog-cancel-credit-card/sample-po-dialog-cancel-credit-card.component.ts
+++ b/projects/ui/src/lib/services/po-dialog/samples/sample-po-dialog-cancel-credit-card/sample-po-dialog-cancel-credit-card.component.ts
@@ -67,7 +67,7 @@ export class SamplePoDialogCancelCreditCardComponent implements OnDestroy, OnIni
   openConfirmDialog() {
     this.poDialog.confirm({
       title: 'Confirm',
-      message: `<p>Hi <b>${this.name}</b>.</p> <p> Do you confirm the cancellation of the card number  <i class="po-icon ph ph-credit-card"></i> <b>${this.cardNumber}<b>? </p>`,
+      message: `<p>Hi <b>${this.name}</b>.</p> <p> Do you confirm the cancellation of the card number  <i class="po-icon an an-credit-card"></i> <b>${this.cardNumber}<b>? </p>`,
       confirm: () => this.confirmCancelation()
     });
   }
diff --git a/projects/ui/src/lib/services/po-theme/po-theme.service.spec.ts b/projects/ui/src/lib/services/po-theme/po-theme.service.spec.ts
index c54b8a0e7..c42086571 100644
--- a/projects/ui/src/lib/services/po-theme/po-theme.service.spec.ts
+++ b/projects/ui/src/lib/services/po-theme/po-theme.service.spec.ts
@@ -662,7 +662,7 @@ describe('PoThemeService:', () => {
 
         const expectedCss = `
           html[class*="-light-AAA"]:root {
-            
+
           }
         `;
         validateStyleContent(expectedCss);
@@ -697,7 +697,7 @@ describe('PoThemeService:', () => {
   });
 });
 
-describe(`PoThemeService with 'PhosphorIconDictionary':`, () => {
+describe(`PoThemeService with 'AnimaliaIconDictionary':`, () => {
   let service: PoThemeService;
 
   beforeEach(() => {
diff --git a/projects/ui/src/lib/services/po-theme/po-theme.service.ts b/projects/ui/src/lib/services/po-theme/po-theme.service.ts
index dc3d419f1..557e7b1e8 100644
--- a/projects/ui/src/lib/services/po-theme/po-theme.service.ts
+++ b/projects/ui/src/lib/services/po-theme/po-theme.service.ts
@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, Optional, Renderer2, RendererFactory2 } from '@angular/core';
-import { ICONS_DICTIONARY, PhosphorIconDictionary } from '../../components/po-icon/index';
+import { ICONS_DICTIONARY, AnimaliaIconDictionary } from '../../components/po-icon/index';
 
 import { PoThemeColor } from './interfaces/po-theme-color.interface';
 import { PoThemeTokens } from './interfaces/po-theme-tokens.interface';
@@ -51,7 +51,7 @@ export class PoThemeService {
     @Optional() @Inject(ICONS_DICTIONARY) value: { [key: string]: string }
   ) {
     this.renderer = rendererFactory.createRenderer(null, null);
-    this._iconToken = value ?? PhosphorIconDictionary;
+    this._iconToken = value ?? AnimaliaIconDictionary;
 
     // set triple A for all themes (its the base theme)
     // result: html:root
@@ -449,7 +449,7 @@ export class PoThemeService {
     let selectBgIcon = '';
 
     if (themeColor?.brand?.['01']?.dark) {
-      const selector = this.iconNameLib === 'PhosphorIcon' ? 'po-select .po-select-phosphor' : 'po-select';
+      const selector = this.iconNameLib === 'AnimaliaIcon' ? 'po-select .po-select-phosphor' : 'po-select';
       selectBgIcon += `${selector} { --background-image: url(${this.getSelectBgIcon(themeColor.neutral.dark[70])}); };`;
     }
 
@@ -458,7 +458,7 @@ export class PoThemeService {
         selectBgIcon += `po-select.ng-dirty.ng-invalid select { --background-image: url(${this.getSelectBgIcon(themeColor.feedback.negative.base)}); };`;
       }
 
-      if (this.iconNameLib === 'PhosphorIcon') {
+      if (this.iconNameLib === 'AnimaliaIcon') {
         selectBgIcon += `po-select.ng-dirty.ng-invalid select.po-select-phosphor { background-image: url(${this.getSelectBgIcon(themeColor.feedback.negative.base)}); };`;
       }
     }
@@ -468,7 +468,7 @@ export class PoThemeService {
         selectBgIcon += `select:disabled { background-image: url(${this.getSelectBgIcon(themeColor.neutral.light['30'])}); };`;
       }
 
-      if (this.iconNameLib === 'PhosphorIcon') {
+      if (this.iconNameLib === 'AnimaliaIcon') {
         selectBgIcon += `po-select select.po-select-phosphor:disabled { background-image: url(${this.getSelectBgIcon(themeColor.neutral.light['30'])}); };`;
       }
     }