diff --git a/apps/web/src/app/vault/components/vault-items/vault-collection-row.component.html b/apps/web/src/app/vault/components/vault-items/vault-collection-row.component.html
index c7d16908241..0355c938bce 100644
--- a/apps/web/src/app/vault/components/vault-items/vault-collection-row.component.html
+++ b/apps/web/src/app/vault/components/vault-items/vault-collection-row.component.html
@@ -12,7 +12,7 @@
-
diff --git a/apps/web/src/app/vault/components/vault-items/vault-items.component.html b/apps/web/src/app/vault/components/vault-items/vault-items.component.html
index b5f4d8aa81b..f1f50beb582 100644
--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.html
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.html
@@ -85,7 +85,7 @@
bitMenuItem
(click)="assignToCollections()"
>
-
-
@@ -107,7 +107,7 @@
{{ "folder" | i18n }}
-
diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
index e9122864447..1049ee17faf 100644
--- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
@@ -152,7 +152,9 @@ export class VaultHeaderComponent implements OnInit {
}
protected get icon() {
- return this.filter.collectionId && this.filter.collectionId !== All ? "bwi-collection" : "";
+ return this.filter.collectionId && this.filter.collectionId !== All
+ ? "bwi-collection-shared"
+ : "";
}
/**
diff --git a/apps/web/src/app/vault/individual-vault/vault-onboarding/vault-onboarding.component.html b/apps/web/src/app/vault/individual-vault/vault-onboarding/vault-onboarding.component.html
index aa56daac071..0447e461711 100644
--- a/apps/web/src/app/vault/individual-vault/vault-onboarding/vault-onboarding.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-onboarding/vault-onboarding.component.html
@@ -15,7 +15,7 @@
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.html b/apps/web/src/app/vault/individual-vault/vault.component.html
index 1a2a1fdbca6..aa27fa4ad85 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault.component.html
@@ -78,7 +78,7 @@
(click)="addCipher()"
*ngIf="filter.type !== 'trash'"
>
-
-
+
+`;
+
+export const GeneratorActive = svgIcon`
+
+
+`;
diff --git a/libs/components/src/icon/icons/index.ts b/libs/components/src/icon/icons/index.ts
index b52903e15ee..eff3ec8c609 100644
--- a/libs/components/src/icon/icons/index.ts
+++ b/libs/components/src/icon/icons/index.ts
@@ -2,3 +2,7 @@ export * from "./search";
export * from "./security";
export * from "./no-access";
export * from "./no-results";
+export * from "./generator";
+export * from "./send";
+export * from "./settings";
+export * from "./vault";
diff --git a/libs/components/src/icon/icons/send.ts b/libs/components/src/icon/icons/send.ts
new file mode 100644
index 00000000000..19026fc74cc
--- /dev/null
+++ b/libs/components/src/icon/icons/send.ts
@@ -0,0 +1,14 @@
+import { svgIcon } from "../icon";
+
+export const SendInactive = svgIcon`
+
+
+`;
+
+export const SendActive = svgIcon`
+
+
+`;
diff --git a/libs/components/src/icon/icons/settings.ts b/libs/components/src/icon/icons/settings.ts
new file mode 100644
index 00000000000..361999bc244
--- /dev/null
+++ b/libs/components/src/icon/icons/settings.ts
@@ -0,0 +1,16 @@
+import { svgIcon } from "../icon";
+
+export const SettingsInactive = svgIcon`
+
+
+`;
+
+export const SettingsActive = svgIcon`
+
+
+`;
diff --git a/libs/components/src/icon/icons/vault.ts b/libs/components/src/icon/icons/vault.ts
new file mode 100644
index 00000000000..eda2e3d6b60
--- /dev/null
+++ b/libs/components/src/icon/icons/vault.ts
@@ -0,0 +1,16 @@
+import { svgIcon } from "../icon";
+
+export const VaultInactive = svgIcon`
+
+
+`;
+
+export const VaultActive = svgIcon`
+
+
+`;
diff --git a/libs/components/src/layout/layout.stories.ts b/libs/components/src/layout/layout.stories.ts
index e09055df596..e495367f78d 100644
--- a/libs/components/src/layout/layout.stories.ts
+++ b/libs/components/src/layout/layout.stories.ts
@@ -60,26 +60,26 @@ export const WithContent: Story = {
@@ -91,7 +91,7 @@ export const WithContent: Story = {
@@ -105,48 +105,48 @@ export const WithContent: Story = {
-
+
@@ -158,7 +158,7 @@ export const WithContent: Story = {
@@ -172,21 +172,21 @@ export const WithContent: Story = {
@@ -194,26 +194,26 @@ export const WithContent: Story = {
@@ -225,7 +225,7 @@ export const WithContent: Story = {
@@ -239,21 +239,21 @@ export const WithContent: Story = {
@@ -277,35 +277,35 @@ export const Secondary: Story = {
template: /* HTML */ `
-
+
@@ -317,7 +317,7 @@ export const Secondary: Story = {
@@ -331,21 +331,21 @@ export const Secondary: Story = {
diff --git a/libs/components/src/navigation/nav-base.component.ts b/libs/components/src/navigation/nav-base.component.ts
index d641a984cd8..9b222c9434f 100644
--- a/libs/components/src/navigation/nav-base.component.ts
+++ b/libs/components/src/navigation/nav-base.component.ts
@@ -19,7 +19,7 @@ export abstract class NavBaseComponent {
@Input() ariaLabel: string;
/**
- * Optional icon, e.g. `"bwi-collection"`
+ * Optional icon, e.g. `"bwi-collection-shared"`
*/
@Input() icon: string;
diff --git a/libs/components/src/navigation/nav-group.stories.ts b/libs/components/src/navigation/nav-group.stories.ts
index 6fbb89d4d9e..b2f6b0b6b99 100644
--- a/libs/components/src/navigation/nav-group.stories.ts
+++ b/libs/components/src/navigation/nav-group.stories.ts
@@ -117,20 +117,20 @@ export const Tree: StoryObj = {
props: args,
template: /*html*/ `
-
-
-
+
+
+
+
-
-
`,
diff --git a/libs/components/src/navigation/nav-item.stories.ts b/libs/components/src/navigation/nav-item.stories.ts
index 0f6f406b2eb..7d24090f06d 100644
--- a/libs/components/src/navigation/nav-item.stories.ts
+++ b/libs/components/src/navigation/nav-item.stories.ts
@@ -71,7 +71,7 @@ export const WithoutIcon: Story = {
export const WithoutRoute: Story = {
render: () => ({
template: `
-
+
({
props: args,
template: `
-
Choose a value
-
`,
diff --git a/libs/components/src/stories/icons.mdx b/libs/components/src/stories/icons.mdx
deleted file mode 100644
index 79eaa382395..00000000000
--- a/libs/components/src/stories/icons.mdx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-();
+statusIconData.data = IconStoryData.statusIndicators;
+
+export const StatusIcons = {
+ render: (args: { dataSource: typeof statusIconData }) => ({
+ props: args,
+ template: /*html*/ `
+
+
+
+ Icon
+ Icon Class
+ Usage
+
+
+
+ @for (row of rows$ | async; track row.id) {
+
+ {{row.id}}{{row.usage}}
+
+ }
+
+
+ `,
+ }),
+ args: {
+ dataSource: statusIconData,
+ },
+};
+
+const bitwardenObjectsData = new TableDataSource();
+bitwardenObjectsData.data = IconStoryData.bitwardenObjects;
+
+export const BitwardenObjects = {
+ ...StatusIcons,
+ args: {
+ dataSource: bitwardenObjectsData,
+ },
+};
+
+const actionsData = new TableDataSource();
+actionsData.data = IconStoryData.actions;
+
+export const Actions = {
+ ...StatusIcons,
+ args: {
+ dataSource: actionsData,
+ },
+};
+
+const directionalMenuIndicatorsData = new TableDataSource();
+directionalMenuIndicatorsData.data = IconStoryData.directionalMenuIndicators;
+
+export const DirectionalMenuIndicators = {
+ ...StatusIcons,
+ args: {
+ dataSource: directionalMenuIndicatorsData,
+ },
+};
+
+const miscObjectsData = new TableDataSource();
+miscObjectsData.data = IconStoryData.miscObjects;
+
+export const MiscObjects = {
+ ...StatusIcons,
+ args: {
+ dataSource: miscObjectsData,
+ },
+};
+
+const platformsAndLogosData = new TableDataSource();
+platformsAndLogosData.data = IconStoryData.platformsAndLogos;
+
+export const PlatformsAndLogos = {
+ ...StatusIcons,
+ args: {
+ dataSource: platformsAndLogosData,
+ },
+};
+
+const sizeData = new TableDataSource<{
+ size: string;
+ usage: string;
+}>();
+
+sizeData.data = [
+ {
+ size: "",
+ usage: "default size",
+ },
+ {
+ size: "bwi-sm",
+ usage: "reduce font size to 0.875em",
+ },
+ {
+ size: "bwi-lg",
+ usage: "increase font size to ~1.33em",
+ },
+ {
+ size: "bwi-2x",
+ usage: "increase font size to 2em",
+ },
+ {
+ size: "bwi-3x",
+ usage: "increase font size to 3em",
+ },
+ {
+ size: "bwi-4x",
+ usage: "increase font size to 4em",
+ },
+ {
+ size: "bwi-fw",
+ usage: "set fixed width of ~1.3em and text-align center",
+ },
+];
+
+export const SizeVariants = {
+ render: (args: { dataSource: typeof sizeData }) => ({
+ props: args,
+ template: /*html*/ `
+
+
+
+ Icon
+ Size Class
+ Class notes
+
+
+
+ @for (row of rows$ | async; track row.size) {
+
+ {{row.size}}{{row.usage}}
+
+ }
+
+
+ `,
+ }),
+ args: {
+ dataSource: sizeData,
+ },
+};
+
+const rotationData = new TableDataSource<{
+ class: string;
+ usage: string;
+}>();
+
+rotationData.data = [
+ {
+ class: "",
+ usage: "default",
+ },
+ {
+ class: "bwi-rotate-270",
+ usage: "rotate by 270 degrees",
+ },
+ {
+ class: "bwi-spin",
+ usage: "animated spin",
+ },
+];
+
+export const RotationVariants = {
+ render: (args: { dataSource: typeof rotationData }) => ({
+ props: args,
+ template: /*html*/ `
+
+
+
+ Icon
+ Size Class
+ Class notes
+
+
+
+ @for (row of rows$ | async; track row.class) {
+
+ {{row.class}}{{row.usage}}
+
+ }
+
+
+ `,
+ }),
+ args: {
+ dataSource: rotationData,
+ },
+};
diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
index fd682bd1515..70f56d2e28d 100644
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
@@ -172,7 +172,7 @@ export class KitchenSinkMainComponent {
}
navItems = [
- { icon: "bwi-collection", name: "Password Managers", route: "/" },
- { icon: "bwi-collection", name: "Favorites", route: "/" },
+ { icon: "bwi-collection-shared", name: "Password Managers", route: "/" },
+ { icon: "bwi-collection-shared", name: "Favorites", route: "/" },
];
}
diff --git a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
index 9adf1c53663..f57a9de4e68 100644
--- a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
+++ b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
@@ -84,8 +84,13 @@ export const Default: Story = {
props: args,
template: /* HTML */ `
-
-
+
+
diff --git a/libs/importer/src/components/import.component.html b/libs/importer/src/components/import.component.html
index 23a9afa1111..2182e8532ac 100644
--- a/libs/importer/src/components/import.component.html
+++ b/libs/importer/src/components/import.component.html
@@ -42,7 +42,7 @@
*ngFor="let c of collections$ | async"
[value]="c"
[label]="c.name"
- icon="bwi-collection"
+ icon="bwi-collection-shared"
/>
diff --git a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
index c39d95616f6..ef8b28aba33 100644
--- a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
+++ b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
@@ -1,5 +1,5 @@
-
diff --git a/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html b/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html
index ec98595e93b..84b43edfbac 100644
--- a/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html
+++ b/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.html
@@ -26,7 +26,7 @@