diff --git a/packages/components/src/core/Tag/__storybook__/constants.tsx b/packages/components/src/core/Tag/__storybook__/constants.tsx
index 57baf24bf..df63d1cd1 100644
--- a/packages/components/src/core/Tag/__storybook__/constants.tsx
+++ b/packages/components/src/core/Tag/__storybook__/constants.tsx
@@ -1,6 +1,7 @@
import Icon from "src/core/Icon";
import { ExtraTagProps } from "../style";
import { WbSunny } from "@mui/icons-material";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
export const TAG_EXCLUDED_CONTROLS = [
"color",
@@ -14,21 +15,22 @@ export const TAG_EXCLUDED_CONTROLS = [
export const TAG_ICONS = [
undefined,
- ,
- ,
+ "CheckCircle",
+ "Loading",
+ "ExclamationMarkCircle",
+ "Person",
,
+ ,
];
export const TAG_ICONS_LABELS = [
"No Icon",
"SDS Check Circle",
"SDS Loading",
- "MUI WbSunny",
+ "SDS Exclamation Mark",
+ "SDS Person",
+ "MUI Wb Sunny",
+ "Custom SVG Icon",
];
export const TAG_SDS_STYLES: ExtraTagProps["sdsStyle"][] = [
diff --git a/packages/components/src/core/Tag/__storybook__/stories/default.tsx b/packages/components/src/core/Tag/__storybook__/stories/default.tsx
index b5a0fae45..f6558c0a4 100644
--- a/packages/components/src/core/Tag/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Tag/__storybook__/stories/default.tsx
@@ -1,11 +1,23 @@
import { Args } from "@storybook/react";
import Callout from "src/core/Callout";
import CalloutTitle from "src/core/Callout/components/CalloutTitle";
+import Icon, { IconNameToSizes } from "src/core/Icon";
import RawTag from "src/core/Tag";
export const Tag = (props: Args): JSX.Element => {
const { label, sdsSize, icon } = props;
+ const finalIcon =
+ typeof icon === "string" ? (
+
+ ) : (
+ icon
+ );
+
if (sdsSize === "l" && !icon) {
return (
@@ -18,5 +30,5 @@ export const Tag = (props: Args): JSX.Element => {
);
}
- return ;
+ return ;
};