diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 35ebfb5b5..c669f9afd 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -7972,9 +7972,9 @@
       "dev": true
     },
     "axe-core": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.2.tgz",
-      "integrity": "sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.2.tgz",
+      "integrity": "sha512-5LMaDRWm8ZFPAEdzTYmgjjEdj1YnQcpfrVajO/sn/LhbpGp0Y0H64c2hLZI1gRMxfA+w1S71Uc/nHaOXgcCvGg==",
       "dev": true
     },
     "babel-jest": {
diff --git a/packages/components/package.json b/packages/components/package.json
index 78ec879aa..1b64e92a9 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -75,7 +75,7 @@
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.2",
     "autoprefixer": "^10.2.4",
-    "axe-core": "^4.1.2",
+    "axe-core": "^4.3.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "core-js": "^3.9.1",
diff --git a/packages/components/src/Button/__snapshots__/button.spec.tsx.snap b/packages/components/src/Button/__snapshots__/button.spec.tsx.snap
index 35830ce77..7ea6d3796 100644
--- a/packages/components/src/Button/__snapshots__/button.spec.tsx.snap
+++ b/packages/components/src/Button/__snapshots__/button.spec.tsx.snap
@@ -60,12 +60,14 @@ exports[`<Button /> linkWithIcon story renders snapshot 1`] = `
   ​
   Link with icon 
   <svg
-    role="presentation"
-    style="height: 24px;"
-    viewBox="0 0 20 20"
+    aria-hidden="true"
+    class="svgIcon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M9.719,17.073l-6.562-6.51c-0.27-0.268-0.504-0.567-0.696-0.888C1.385,7.89,1.67,5.613,3.155,4.14c0.864-0.856,2.012-1.329,3.233-1.329c1.924,0,3.115,1.12,3.612,1.752c0.499-0.634,1.689-1.752,3.612-1.752c1.221,0,2.369,0.472,3.233,1.329c1.484,1.473,1.771,3.75,0.693,5.537c-0.19,0.32-0.425,0.618-0.695,0.887l-6.562,6.51C10.125,17.229,9.875,17.229,9.719,17.073 M6.388,3.61C5.379,3.61,4.431,4,3.717,4.707C2.495,5.92,2.259,7.794,3.145,9.265c0.158,0.265,0.351,0.51,0.574,0.731L10,16.228l6.281-6.232c0.224-0.221,0.416-0.466,0.573-0.729c0.887-1.472,0.651-3.346-0.571-4.56C15.57,4,14.621,3.61,13.612,3.61c-1.43,0-2.639,0.786-3.268,1.863c-0.154,0.264-0.536,0.264-0.69,0C9.029,4.397,7.82,3.61,6.388,3.61"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
     />
   </svg>
 </button>
@@ -89,12 +91,14 @@ exports[`<Button /> outlineWithIcon story renders snapshot 1`] = `
   ​
   Outline with icon 
   <svg
-    role="presentation"
-    style="height: 24px;"
-    viewBox="0 0 20 20"
+    aria-hidden="true"
+    class="svgIcon"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M9.719,17.073l-6.562-6.51c-0.27-0.268-0.504-0.567-0.696-0.888C1.385,7.89,1.67,5.613,3.155,4.14c0.864-0.856,2.012-1.329,3.233-1.329c1.924,0,3.115,1.12,3.612,1.752c0.499-0.634,1.689-1.752,3.612-1.752c1.221,0,2.369,0.472,3.233,1.329c1.484,1.473,1.771,3.75,0.693,5.537c-0.19,0.32-0.425,0.618-0.695,0.887l-6.562,6.51C10.125,17.229,9.875,17.229,9.719,17.073 M6.388,3.61C5.379,3.61,4.431,4,3.717,4.707C2.495,5.92,2.259,7.794,3.145,9.265c0.158,0.265,0.351,0.51,0.574,0.731L10,16.228l6.281-6.232c0.224-0.221,0.416-0.466,0.573-0.729c0.887-1.472,0.651-3.346-0.571-4.56C15.57,4,14.621,3.61,13.612,3.61c-1.43,0-2.639,0.786-3.268,1.863c-0.154,0.264-0.536,0.264-0.69,0C9.029,4.397,7.82,3.61,6.388,3.61"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
     />
   </svg>
 </button>
diff --git a/packages/components/src/Button/button.stories.tsx b/packages/components/src/Button/button.stories.tsx
index 456a9bbb6..bb062e629 100644
--- a/packages/components/src/Button/button.stories.tsx
+++ b/packages/components/src/Button/button.stories.tsx
@@ -1,4 +1,5 @@
 import Button from "./button";
+import { CheckCircle } from "../Icons";
 import React from "react";
 import { Story } from "@storybook/react/types-6-0";
 import Text from "../Text";
@@ -19,12 +20,6 @@ type Args = React.ComponentProps<typeof Button>;
 
 const Template: Story<Args> = (args) => <Button {...args} />;
 
-const heartIcon = (
-  <svg style={{ height: "24px" }} viewBox="0 0 20 20" role="presentation">
-    <path d="M9.719,17.073l-6.562-6.51c-0.27-0.268-0.504-0.567-0.696-0.888C1.385,7.89,1.67,5.613,3.155,4.14c0.864-0.856,2.012-1.329,3.233-1.329c1.924,0,3.115,1.12,3.612,1.752c0.499-0.634,1.689-1.752,3.612-1.752c1.221,0,2.369,0.472,3.233,1.329c1.484,1.473,1.771,3.75,0.693,5.537c-0.19,0.32-0.425,0.618-0.695,0.887l-6.562,6.51C10.125,17.229,9.875,17.229,9.719,17.073 M6.388,3.61C5.379,3.61,4.431,4,3.717,4.707C2.495,5.92,2.259,7.794,3.145,9.265c0.158,0.265,0.351,0.51,0.574,0.731L10,16.228l6.281-6.232c0.224-0.221,0.416-0.466,0.573-0.729c0.887-1.472,0.651-3.346-0.571-4.56C15.57,4,14.621,3.61,13.612,3.61c-1.43,0-2.639,0.786-3.268,1.863c-0.154,0.264-0.536,0.264-0.69,0C9.029,4.397,7.82,3.61,6.388,3.61"></path>
-  </svg>
-);
-
 export const flat = Template.bind(null);
 flat.args = {
   children: "Flat Button",
@@ -79,14 +74,22 @@ withDataTestId.args = {
 
 export const linkWithIcon = Template.bind(null);
 linkWithIcon.args = {
-  children: <>Link with icon {heartIcon}</>,
+  children: (
+    <>
+      Link with icon <CheckCircle purpose="decorative" />
+    </>
+  ),
   color: "success",
   variant: "link",
 };
 
 export const outlineWithIcon = Template.bind(null);
 outlineWithIcon.args = {
-  children: <>Outline with icon {heartIcon}</>,
+  children: (
+    <>
+      Outline with icon <CheckCircle purpose="decorative" />
+    </>
+  ),
   color: "warning",
   variant: "outline",
 };
diff --git a/packages/components/src/SvgIcon/SvgIcon.stories.tsx b/packages/components/src/SvgIcon/SvgIcon.stories.tsx
index b70a84026..8565775cb 100644
--- a/packages/components/src/SvgIcon/SvgIcon.stories.tsx
+++ b/packages/components/src/SvgIcon/SvgIcon.stories.tsx
@@ -17,10 +17,10 @@ export default {
         options: Object.keys(allIcons),
       },
     },
-    role: {
+    purpose: {
       control: {
         type: "radio",
-        options: ["img", "presentation"],
+        options: ["informative", "decorative"],
       },
     },
     size: {
@@ -49,7 +49,7 @@ const Template: Story<Args> = ({ icon, color, ...rest }) => {
 
 const defaultArgs = {
   icon: Object.keys(allIcons)[0] as keyof typeof allIcons,
-  role: "presentation" as const,
+  role: "decorative" as const,
 };
 
 export const Small = Template.bind(null);
@@ -100,11 +100,11 @@ export const InText = ({ icon, ...rest }: Args) => {
   return (
     <Text size="h1">
       The svg icon defaults to the surrounding text size (
-      <Icon {...rest} role="img" title="icon with 1em line height" />, 1em), but
-      often looks better with the line height (
+      <Icon {...rest} purpose="informative" title="icon with 1em line height" />
+      , 1em), but often looks better with the line height (
       <Icon
         {...rest}
-        role="img"
+        purpose="informative"
         title="icon with 2em line height"
         size="2rem"
       />
@@ -130,7 +130,7 @@ export const AllIcons = () => {
     <ul className={styles.allIcons}>
       {Object.entries(allIcons).map(([name, Icon]: [string, any]) => (
         <li className={styles.iconCell} key={name}>
-          <Icon block role="presentation" size="2rem" />
+          <Icon block type="decorative" size="2rem" />
           <Text as="span" size="sm">
             {name}
           </Text>
diff --git a/packages/components/src/SvgIcon/SvgIcon.tsx b/packages/components/src/SvgIcon/SvgIcon.tsx
index 48e5e7d9a..3fdd50a38 100644
--- a/packages/components/src/SvgIcon/SvgIcon.tsx
+++ b/packages/components/src/SvgIcon/SvgIcon.tsx
@@ -35,20 +35,33 @@ interface IconPropsBase {
   viewBox?: string;
 }
 
-interface FunctionalIconProps extends IconPropsBase {
-  role: "img";
+interface InformativeIconProps extends IconPropsBase {
+  /**
+   * The role of the icon.
+   *
+   * Use "informative" when the icon **_does_** provide additional meaning to other text on the
+   * page. You'll be required to pass in a title to label the icon.
+   */
+  purpose: "informative";
   title: string;
 }
 
-interface PresentationalIconProps extends IconPropsBase {
-  role: "presentation";
+interface DecorativeIconProps extends IconPropsBase {
+  /**
+   * The role of the icon.
+   *
+   * Use "decorative" when the icon **_does not_** provide any additional context or meaning to
+   * associated text. Basically the icon is for show and people don't need it to understand what's
+   * on the page.
+   */
+  purpose: "decorative";
 }
 
-export type SvgIconProps = PresentationalIconProps | FunctionalIconProps;
+export type SvgIconProps = DecorativeIconProps | InformativeIconProps;
 
 export type IconProps =
-  | Omit<PresentationalIconProps, "children">
-  | Omit<FunctionalIconProps, "children">;
+  | Omit<DecorativeIconProps, "children">
+  | Omit<InformativeIconProps, "children">;
 
 interface SvgStyle extends React.CSSProperties {
   "--svg-icon-size"?: string;
@@ -65,7 +78,6 @@ function SvgIcon(props: SvgIconProps) {
     children,
     className,
     color = "currentColor",
-    role,
     size,
     viewBox = "0 0 24 24",
   } = props;
@@ -78,7 +90,6 @@ function SvgIcon(props: SvgIconProps) {
     className: clsx(className, styles.svgIcon, block && styles.displayBlock),
     fill: color,
     height: size,
-    role,
     /**
      * height/width html properties are overriden by the defaults applied
      * to svg css class
@@ -89,15 +100,19 @@ function SvgIcon(props: SvgIconProps) {
     xmlns: "http://www.w3.org/2000/svg",
   };
 
-  if (props.role === "img") {
+  if (props.purpose === "informative") {
     return (
-      <svg {...svgCommonProps}>
+      <svg {...svgCommonProps} role="img">
         <title>{props.title}</title>
         {children}
       </svg>
     );
   } else {
-    return <svg {...svgCommonProps}>{children}</svg>;
+    return (
+      <svg {...svgCommonProps} aria-hidden>
+        {children}
+      </svg>
+    );
   }
 }
 
diff --git a/packages/components/src/SvgIcon/__snapshots__/SvgIcon.spec.tsx.snap b/packages/components/src/SvgIcon/__snapshots__/SvgIcon.spec.tsx.snap
index d8ab1a362..aee169e9d 100644
--- a/packages/components/src/SvgIcon/__snapshots__/SvgIcon.spec.tsx.snap
+++ b/packages/components/src/SvgIcon/__snapshots__/SvgIcon.spec.tsx.snap
@@ -2,9 +2,9 @@
 
 exports[`<SvgIcon /> CustomColor story renders snapshot 1`] = `
 <svg
+  aria-hidden="true"
   class="svgIcon"
   fill="#928CFF"
-  role="presentation"
   viewBox="0 0 24 24"
   xmlns="http://www.w3.org/2000/svg"
 >
@@ -16,9 +16,9 @@ exports[`<SvgIcon /> CustomColor story renders snapshot 1`] = `
 
 exports[`<SvgIcon /> CustomViewBox story renders snapshot 1`] = `
 <svg
+  aria-hidden="true"
   class="svgIcon"
   fill="currentColor"
-  role="presentation"
   viewBox="4 4 16 16"
   xmlns="http://www.w3.org/2000/svg"
 >
@@ -30,10 +30,10 @@ exports[`<SvgIcon /> CustomViewBox story renders snapshot 1`] = `
 
 exports[`<SvgIcon /> FullScreen story renders snapshot 1`] = `
 <svg
+  aria-hidden="true"
   class="svgIcon"
   fill="currentColor"
   height="min(100%, 100vh)"
-  role="presentation"
   style="--svg-icon-size: min(100%, 100vh);"
   viewBox="0 0 24 24"
   width="min(100%, 100vh)"
@@ -97,10 +97,10 @@ exports[`<SvgIcon /> InText story renders snapshot 1`] = `
 
 exports[`<SvgIcon /> Large story renders snapshot 1`] = `
 <svg
+  aria-hidden="true"
   class="svgIcon"
   fill="currentColor"
   height="4em"
-  role="presentation"
   style="--svg-icon-size: 4em;"
   viewBox="0 0 24 24"
   width="4em"
@@ -114,10 +114,10 @@ exports[`<SvgIcon /> Large story renders snapshot 1`] = `
 
 exports[`<SvgIcon /> Medium story renders snapshot 1`] = `
 <svg
+  aria-hidden="true"
   class="svgIcon"
   fill="currentColor"
   height="2em"
-  role="presentation"
   style="--svg-icon-size: 2em;"
   viewBox="0 0 24 24"
   width="2em"
@@ -131,10 +131,10 @@ exports[`<SvgIcon /> Medium story renders snapshot 1`] = `
 
 exports[`<SvgIcon /> Small story renders snapshot 1`] = `
 <svg
+  aria-hidden="true"
   class="svgIcon"
   fill="currentColor"
   height="1em"
-  role="presentation"
   style="--svg-icon-size: 1em;"
   viewBox="0 0 24 24"
   width="1em"
diff --git a/packages/components/src/Tag/Tag.stories.tsx b/packages/components/src/Tag/Tag.stories.tsx
index ea83a9f3d..5a1ccbc6d 100644
--- a/packages/components/src/Tag/Tag.stories.tsx
+++ b/packages/components/src/Tag/Tag.stories.tsx
@@ -62,12 +62,12 @@ OutlineVariants.args = {
 export const WithIcon = Template.bind(null);
 WithIcon.args = {
   ...defaultArgs,
-  icon: <WarningIcon key="icon" role="img" title="warning" />,
+  icon: <WarningIcon key="icon" purpose="informative" title="warning" />,
 };
 
 export const WithLongTextAndIcon = Template.bind(null);
 WithLongTextAndIcon.args = {
   ...defaultArgs,
   children: "This tag has a really long text message",
-  icon: <WarningIcon key="icon" role="img" title="warning" />,
+  icon: <WarningIcon key="icon" purpose="informative" title="warning" />,
 };
diff --git a/packages/components/src/common/CloseButton/CloseButton.tsx b/packages/components/src/common/CloseButton/CloseButton.tsx
index 6ae9105e1..757ba7fde 100644
--- a/packages/components/src/common/CloseButton/CloseButton.tsx
+++ b/packages/components/src/common/CloseButton/CloseButton.tsx
@@ -36,7 +36,7 @@ const CloseButton = ({ className, color, onClose, size }: CloseButtonProps) => (
     onClick={onClose}
     variant="link"
   >
-    <CloseIcon role="img" size={size} title="close" />
+    <CloseIcon purpose="informative" size={size} title="close" />
   </Button>
 );
 
diff --git a/packages/components/src/common/Notifications/NotificationIcon/NotificationIcon.tsx b/packages/components/src/common/Notifications/NotificationIcon/NotificationIcon.tsx
index 08bcdbed3..4129b20e1 100644
--- a/packages/components/src/common/Notifications/NotificationIcon/NotificationIcon.tsx
+++ b/packages/components/src/common/Notifications/NotificationIcon/NotificationIcon.tsx
@@ -53,7 +53,7 @@ const NotificationIcon = ({ variant }: Props) => {
 
   return (
     <div className={iconAssets.style}>
-      <iconAssets.icon role="img" title={iconAssets.title} />
+      <iconAssets.icon purpose="informative" title={iconAssets.title} />
     </div>
   );
 };