diff --git a/packages/babel-preset/src/index.test.ts b/packages/babel-preset/src/index.test.ts
index 5484aec6..8460c9fe 100644
--- a/packages/babel-preset/src/index.test.ts
+++ b/packages/babel-preset/src/index.test.ts
@@ -28,7 +28,7 @@ describe('preset', () => {
     ).toMatchInlineSnapshot(`
       "import * as React from \\"react\\";
 
-      const SvgComponent = () => <svg role=\\"img\\" foo=\\"bar\\" x={y} />;
+      const SvgComponent = () => <svg foo=\\"bar\\" x={y} />;
 
       export default SvgComponent;"
     `)
@@ -45,7 +45,7 @@ describe('preset', () => {
       const SvgComponent = ({
         title,
         titleId
-      }) => <svg role=\\"img\\" aria-labelledby={titleId}>{title ? <title id={titleId}>{title}</title> : null}</svg>;
+      }) => <svg aria-labelledby={titleId}>{title ? <title id={titleId}>{title}</title> : null}</svg>;
 
       export default SvgComponent;"
     `)
@@ -62,7 +62,7 @@ describe('preset', () => {
       const SvgComponent = ({
         title,
         titleId
-      }) => <svg role=\\"img\\" aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>Hello</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
+      }) => <svg aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>Hello</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
 
       export default SvgComponent;"
     `)
@@ -77,7 +77,7 @@ describe('preset', () => {
       const SvgComponent = ({
         title,
         titleId
-      }) => <svg role=\\"img\\" aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>{\\"Hello\\"}</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
+      }) => <svg aria-labelledby={titleId}>{title === undefined ? <title id={titleId}>{\\"Hello\\"}</title> : title ? <title id={titleId}>{title}</title> : null}</svg>;
 
       export default SvgComponent;"
     `)
@@ -94,7 +94,7 @@ describe('preset', () => {
       const SvgComponent = ({
         desc,
         descId
-      }) => <svg role=\\"img\\" aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
+      }) => <svg aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
 
       export default SvgComponent;"
     `)
@@ -111,7 +111,7 @@ describe('preset', () => {
       const SvgComponent = ({
         desc,
         descId
-      }) => <svg role=\\"img\\" aria-describedby={descId}>{desc === undefined ? <desc id={descId}>Hello</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
+      }) => <svg aria-describedby={descId}>{desc === undefined ? <desc id={descId}>Hello</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
 
       export default SvgComponent;"
     `)
@@ -126,7 +126,7 @@ describe('preset', () => {
       const SvgComponent = ({
         desc,
         descId
-      }) => <svg role=\\"img\\" aria-describedby={descId}>{desc === undefined ? <desc id={descId}>{\\"Hello\\"}</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
+      }) => <svg aria-describedby={descId}>{desc === undefined ? <desc id={descId}>{\\"Hello\\"}</desc> : desc ? <desc id={descId}>{desc}</desc> : null}</svg>;
 
       export default SvgComponent;"
     `)
@@ -146,7 +146,7 @@ describe('preset', () => {
         titleId,
         desc,
         descId
-      }) => <svg role=\\"img\\" aria-labelledby={titleId} aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}{title ? <title id={titleId}>{title}</title> : null}</svg>;
+      }) => <svg aria-labelledby={titleId} aria-describedby={descId}>{desc ? <desc id={descId}>{desc}</desc> : null}{title ? <title id={titleId}>{title}</title> : null}</svg>;
 
       export default SvgComponent;"
     `)
@@ -163,7 +163,7 @@ describe('preset', () => {
     ).toMatchInlineSnapshot(`
       "import * as React from \\"react\\";
 
-      const SvgComponent = () => <svg a=\\"black\\" b={props.white} role=\\"img\\" />;
+      const SvgComponent = () => <svg a=\\"black\\" b={props.white} />;
 
       export default SvgComponent;"
     `)
@@ -179,7 +179,7 @@ describe('preset', () => {
     ).toMatchInlineSnapshot(`
       "import * as React from \\"react\\";
 
-      const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" role=\\"img\\" {...props} />;
+      const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" {...props} />;
 
       export default SvgComponent;"
     `)
@@ -195,7 +195,7 @@ describe('preset', () => {
     ).toMatchInlineSnapshot(`
       "import * as React from \\"react\\";
 
-      const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} role=\\"img\\" {...props} />;
+      const SvgComponent = props => <svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} {...props} />;
 
       export default SvgComponent;"
     `)
@@ -213,7 +213,7 @@ describe('preset', () => {
       "import * as React from \\"react\\";
       import Svg from \\"react-native-svg\\";
 
-      const SvgComponent = props => <Svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} accessibilityRole=\\"image\\" {...props} />;
+      const SvgComponent = props => <Svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} {...props} />;
 
       export default SvgComponent;"
     `)
diff --git a/packages/babel-preset/src/index.ts b/packages/babel-preset/src/index.ts
index de8ec0ee..c77b2396 100644
--- a/packages/babel-preset/src/index.ts
+++ b/packages/babel-preset/src/index.ts
@@ -49,17 +49,7 @@ function replaceMapToValues(replaceMap: { [key: string]: string }): Value[] {
 
 const plugin = (_: ConfigAPI, opts: Options) => {
   let toRemoveAttributes = ['version']
-  let toAddAttributes: Attribute[] = [
-    opts?.native === true
-      ? {
-          name: 'accessibilityRole',
-          value: 'image',
-        }
-      : {
-          name: 'role',
-          value: 'img',
-        },
-  ]
+  let toAddAttributes: Attribute[] = []
 
   if (opts.svgProps) {
     toAddAttributes = [...toAddAttributes, ...propsToAttributes(opts.svgProps)]
diff --git a/packages/cli/src/__snapshots__/index.test.ts.snap b/packages/cli/src/__snapshots__/index.test.ts.snap
index 8bbce21b..f05c6526 100644
--- a/packages/cli/src/__snapshots__/index.test.ts.snap
+++ b/packages/cli/src/__snapshots__/index.test.ts.snap
@@ -10,7 +10,7 @@ exports[`cli should not override config with cli defaults 1`] = `
 "import * as React from 'react'
 
 const SvgFile = () => (
-  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\">
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -35,13 +35,7 @@ exports[`cli should support --prettier-config as file 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-     <svg
-          width={48}
-          height={1}
-          xmlns=\\"http://www.w3.org/2000/svg\\"
-          role=\\"img\\"
-          {...props}
-     >
+     <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
           <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
      </svg>
 )
@@ -55,13 +49,7 @@ exports[`cli should support --prettier-config as json 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-     <svg
-          width={48}
-          height={1}
-          xmlns=\\"http://www.w3.org/2000/svg\\"
-          role=\\"img\\"
-          {...props}
-     >
+     <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
           <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
      </svg>
 )
@@ -75,13 +63,7 @@ exports[`cli should support --svgo-config as file 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <title>{'Rectangle 5'}</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -96,13 +78,7 @@ exports[`cli should support --svgo-config as json 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <title>{'Rectangle 5'}</title>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
@@ -169,13 +145,7 @@ exports[`cli should support stdin filepath 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -193,7 +163,6 @@ const SvgFile = ({ desc, descId, ...props }) => (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     aria-describedby={descId}
     {...props}
   >
@@ -211,7 +180,7 @@ exports[`cli should support various args: --expand-props none 1`] = `
 "import * as React from 'react'
 
 const SvgFile = () => (
-  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\">
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -225,13 +194,7 @@ exports[`cli should support various args: --expand-props start 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    {...props}
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-  >
+  <svg {...props} width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -250,7 +213,6 @@ const SvgFile = (props) => (
     height=\\"1em\\"
     viewBox=\\"0 0 48 1\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
@@ -271,7 +233,6 @@ const SvgFile = (props) => (
     height=\\"2em\\"
     viewBox=\\"0 0 48 1\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
@@ -292,7 +253,6 @@ const SvgFile = (props) => (
     height={24}
     viewBox=\\"0 0 48 1\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
@@ -306,13 +266,7 @@ export default SvgFile
 
 exports[`cli should support various args: --jsx-runtime automatic 1`] = `
 "const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -326,13 +280,7 @@ exports[`cli should support various args: --jsx-runtime classic-preact 1`] = `
 "import { h } from 'preact'
 
 const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -347,7 +295,7 @@ exports[`cli should support various args: --native --expand-props none 1`] = `
 import Svg, { Path } from 'react-native-svg'
 
 const SvgFile = () => (
-  <Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\">
+  <Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\">
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
@@ -367,7 +315,6 @@ const SvgFile = (props) => (
     height={24}
     viewBox=\\"0 0 48 1\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
@@ -389,7 +336,6 @@ const SvgFile = (props, ref) => (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     ref={ref}
     {...props}
   >
@@ -408,13 +354,7 @@ exports[`cli should support various args: --native 1`] = `
 import Svg, { Path } from 'react-native-svg'
 
 const SvgFile = (props) => (
-  <Svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <Svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </Svg>
 )
@@ -428,12 +368,7 @@ exports[`cli should support various args: --no-dimensions 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    viewBox=\\"0 0 48 1\\"
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg viewBox=\\"0 0 48 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -446,7 +381,7 @@ export default SvgFile
 exports[`cli should support various args: --no-prettier 1`] = `
 "import * as React from \\"react\\";
 
-const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
 export default SvgFile;
 "
@@ -462,7 +397,6 @@ const SvgFile = (props) => (
     viewBox=\\"0 0 48 1\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
     xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
-    role=\\"img\\"
     {...props}
   >
     <title>{'Rectangle 5'}</title>
@@ -502,7 +436,6 @@ const SvgFile = (props, ref) => (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     ref={ref}
     {...props}
   >
@@ -520,13 +453,7 @@ exports[`cli should support various args: --replace-attr-values "#063855=current
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -544,7 +471,6 @@ const SvgFile = (props) => (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     hidden={true}
     id=\\"hello\\"
     {...props}
@@ -566,7 +492,6 @@ const SvgFile = ({ title, titleId, ...props }) => (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     aria-labelledby={titleId}
     {...props}
   >
@@ -596,7 +521,6 @@ const SvgFile = (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     ref={ref}
     aria-describedby={descId}
     {...props}
@@ -628,7 +552,6 @@ const SvgFile = (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     ref={ref}
     aria-labelledby={titleId}
     {...props}
@@ -653,7 +576,6 @@ const SvgFile = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
     width={48}
     height={1}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     ref={ref}
     {...props}
   >
@@ -672,13 +594,7 @@ exports[`cli should support various args: --typescript 1`] = `
 import { SVGProps } from 'react'
 
 const SvgFile = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -732,13 +648,7 @@ exports[`cli should work with a simple file 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -752,13 +662,7 @@ exports[`cli should work with stdin 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
diff --git a/packages/cli/src/__snapshots__/util.test.ts.snap b/packages/cli/src/__snapshots__/util.test.ts.snap
index 41fd0ff8..09d590d2 100644
--- a/packages/cli/src/__snapshots__/util.test.ts.snap
+++ b/packages/cli/src/__snapshots__/util.test.ts.snap
@@ -4,13 +4,7 @@ exports[`util #convertFile should convert a file 1`] = `
 "import * as React from 'react'
 
 const SvgFile = (props) => (
-  <svg
-    width={48}
-    height={1}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
   </svg>
 )
@@ -28,7 +22,6 @@ const SvgFile = (props) => (
     height=\\"1em\\"
     viewBox=\\"0 0 48 1\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
diff --git a/packages/core/src/__snapshots__/transform.test.ts.snap b/packages/core/src/__snapshots__/transform.test.ts.snap
index 578c0cdf..1c7355a3 100644
--- a/packages/core/src/__snapshots__/transform.test.ts.snap
+++ b/packages/core/src/__snapshots__/transform.test.ts.snap
@@ -8,7 +8,6 @@ const SvgComponent = ({ desc, descId, ...props }) => (
     width={88}
     height={88}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     aria-describedby={descId}
     {...props}
   >
@@ -33,12 +32,7 @@ exports[`convert config accepts options {"dimensions":false} 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    viewBox=\\"0 0 88 88\\"
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -59,13 +53,7 @@ exports[`convert config accepts options {"expandProps":"start"} 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    {...props}
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-  >
+  <svg {...props} width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\">
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -86,7 +74,7 @@ exports[`convert config accepts options {"expandProps":false} 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = () => (
-  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\">
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\">
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -107,13 +95,7 @@ exports[`convert config accepts options {"exportType":"named"} 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -139,7 +121,6 @@ const SvgComponent = (props) => (
     height=\\"2em\\"
     viewBox=\\"0 0 88 88\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <g
@@ -167,7 +148,6 @@ const SvgComponent = (props) => (
     height={24}
     viewBox=\\"0 0 88 88\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <g
@@ -195,7 +175,6 @@ const SvgComponent = (props) => (
     height=\\"1em\\"
     viewBox=\\"0 0 88 88\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <g
@@ -219,13 +198,7 @@ exports[`convert config accepts options {"memo":true} 1`] = `
 import { memo } from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -247,13 +220,7 @@ exports[`convert config accepts options {"namedExport":"Component","state":{"cal
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -276,7 +243,7 @@ exports[`convert config accepts options {"native":true,"expandProps":false} 1`]
 import Svg, { G, Path } from 'react-native-svg'
 
 const SvgComponent = () => (
-  <Svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\">
+  <Svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\">
     <G
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -303,7 +270,6 @@ const SvgComponent = (props) => (
     height={24}
     viewBox=\\"0 0 88 88\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     {...props}
   >
     <G
@@ -332,7 +298,6 @@ const SvgComponent = (props, ref) => (
     width={88}
     height={88}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     ref={ref}
     {...props}
   >
@@ -358,13 +323,7 @@ exports[`convert config accepts options {"native":true} 1`] = `
 import Svg, { G, Path } from 'react-native-svg'
 
 const SvgComponent = (props) => (
-  <Svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <Svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <G
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -384,7 +343,7 @@ export default SvgComponent
 exports[`convert config accepts options {"prettier":false} 1`] = `
 "import * as React from \\"react\\";
 
-const SvgComponent = props => <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" {...props}><g stroke=\\"#063855\\" strokeWidth={2} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><path d=\\"M51 37 37 51M51 51 37 37\\" /></g></svg>;
+const SvgComponent = props => <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><g stroke=\\"#063855\\" strokeWidth={2} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><path d=\\"M51 37 37 51M51 51 37 37\\" /></g></svg>;
 
 export default SvgComponent;"
 `;
@@ -398,7 +357,6 @@ const SvgComponent = (props, ref) => (
     width={88}
     height={88}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     ref={ref}
     {...props}
   >
@@ -423,13 +381,7 @@ exports[`convert config accepts options {"replaceAttrValues":{"none":"{black}"}}
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -450,13 +402,7 @@ exports[`convert config accepts options {"replaceAttrValues":{"none":"black"}} 1
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -481,7 +427,6 @@ const SvgComponent = (props) => (
     width={88}
     height={88}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     a=\\"b\\"
     b={props.b}
     {...props}
@@ -512,7 +457,6 @@ const SvgComponent = (props) => (
     viewBox=\\"0 0 88 88\\"
     xmlns=\\"http://www.w3.org/2000/svg\\"
     xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
-    role=\\"img\\"
     {...props}
   >
     <title>{'Dismiss'}</title>
@@ -546,7 +490,6 @@ const SvgComponent = ({ title, titleId, ...props }) => (
     width={88}
     height={88}
     xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
     aria-labelledby={titleId}
     {...props}
   >
@@ -584,7 +527,6 @@ const SvgComponent = ({ desc, descId, ...props }) => (
     style={{
       position: 'absolute',
     }}
-    role=\\"img\\"
     aria-describedby={descId}
     {...props}
   >
@@ -607,7 +549,6 @@ const SvgComponent = ({ title, titleId, ...props }) => (
     style={{
       position: 'absolute',
     }}
-    role=\\"img\\"
     aria-labelledby={titleId}
     {...props}
   >
@@ -624,13 +565,7 @@ exports[`convert should convert 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <g
       stroke=\\"#063855\\"
       strokeWidth={2}
@@ -656,7 +591,6 @@ const SvgComponent = (props) => (
     xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"
     width={48}
     height={48}
-    role=\\"img\\"
     {...props}
   >
     <g transform=\\"translate(0 -1004.362)\\">
@@ -721,7 +655,7 @@ exports[`convert should handle special SVG attributes 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" {...props}>
+  <svg xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <path externalResourcesRequired=\\"false\\" d=\\"M10 10h100v100H10z\\" />
   </svg>
 )
@@ -734,13 +668,7 @@ exports[`convert should not remove all style tags 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <style>{'path{fill:red}'}</style>
     <g
       id=\\"prefix__Blocks\\"
@@ -774,7 +702,6 @@ const SvgComponent = (props) => (
       enableBackground: 'new 0 0 25 25',
     }}
     xmlSpace=\\"preserve\\"
-    role=\\"img\\"
     {...props}
   >
     <path
@@ -796,13 +723,7 @@ exports[`convert should remove style tags 1`] = `
 "import * as React from 'react'
 
 const SvgComponent = (props) => (
-  <svg
-    width={88}
-    height={88}
-    xmlns=\\"http://www.w3.org/2000/svg\\"
-    role=\\"img\\"
-    {...props}
-  >
+  <svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
     <style />
     <g
       fill=\\"none\\"
diff --git a/packages/plugin-jsx/src/index.test.ts b/packages/plugin-jsx/src/index.test.ts
index 3192e818..f4e3bccd 100644
--- a/packages/plugin-jsx/src/index.test.ts
+++ b/packages/plugin-jsx/src/index.test.ts
@@ -22,7 +22,7 @@ describe('plugin', () => {
     expect(result).toMatchInlineSnapshot(`
       "import * as React from \\"react\\";
 
-      const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\" role=\\"img\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
+      const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
 
       export default SvgComponent;"
     `)
@@ -35,7 +35,7 @@ describe('plugin', () => {
       { componentName: 'SvgComponent' },
     )
     expect(result).toMatchInlineSnapshot(`
-      "const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\" role=\\"img\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
+      "const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
 
       export default SvgComponent;"
     `)
@@ -50,7 +50,7 @@ describe('plugin', () => {
     expect(result).toMatchInlineSnapshot(`
       "import { h } from \\"preact\\";
 
-      const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\" role=\\"img\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
+      const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
 
       export default SvgComponent;"
     `)
@@ -77,7 +77,7 @@ describe('plugin', () => {
     expect(result).toMatchInlineSnapshot(`
       "import * as React from \\"react\\";
 
-      const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\" role=\\"img\\"><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
+      const SvgComponent = () => <svg viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;
 
       export default SvgComponent;"
     `)
diff --git a/packages/rollup/src/__snapshots__/index.test.ts.snap b/packages/rollup/src/__snapshots__/index.test.ts.snap
index 7b38b405..fbc3b22c 100644
--- a/packages/rollup/src/__snapshots__/index.test.ts.snap
+++ b/packages/rollup/src/__snapshots__/index.test.ts.snap
@@ -11,8 +11,7 @@ var SvgFile = function SvgFile(props) {
   return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
     width: 48,
     height: 1,
-    xmlns: \\"http://www.w3.org/2000/svg\\",
-    role: \\"img\\"
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, props), _path || (_path = /*#__PURE__*/React.createElement(\\"path\\", {
     d: \\"M0 0h48v1H0z\\",
     fill: \\"#063855\\",
@@ -26,7 +25,7 @@ export default SvgFile;"
 exports[`rollup loader should convert file with previousExport of image plugin 1`] = `
 "import * as React from \\"react\\";
 
-const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
 export { SvgFile as ReactComponent };
 var img = new Image();
@@ -37,7 +36,7 @@ export default img;"
 exports[`rollup loader should convert file with previousExport of url plugin 1`] = `
 "import * as React from \\"react\\";
 
-const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
 export { SvgFile as ReactComponent };
 export default \\"data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2248px%22%20height%3D%221px%22%20viewBox%3D%220%200%2048%201%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%20%20%20%20%3Ctitle%3ERectangle%205%3C%2Ftitle%3E%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%2219-Separator%22%20transform%3D%22translate%28-129.000000%2C%20-156.000000%29%22%20fill%3D%22%23063855%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Controls%2FSettings%22%20transform%3D%22translate%2880.000000%2C%200.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Content%22%20transform%3D%22translate%280.000000%2C%2064.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%2824.000000%2C%2056.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-5%22%20x%3D%2225%22%20y%3D%2236%22%20width%3D%2248%22%20height%3D%221%22%3E%3C%2Frect%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E\\";"
@@ -46,7 +45,7 @@ export default \\"data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%
 exports[`rollup loader should convert file without babel 1`] = `
 "import * as React from \\"react\\";
 
-const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
+const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
 export default SvgFile;"
 `;
diff --git a/packages/webpack/src/__snapshots__/index.test.ts.snap b/packages/webpack/src/__snapshots__/index.test.ts.snap
index 0bc21025..832dd4e6 100644
--- a/packages/webpack/src/__snapshots__/index.test.ts.snap
+++ b/packages/webpack/src/__snapshots__/index.test.ts.snap
@@ -9,8 +9,7 @@ var SvgIcon = function SvgIcon() {
   return _svg || (_svg = /*#__PURE__*/React.createElement(\\"svg\\", {
     width: 88,
     height: 88,
-    xmlns: \\"http://www.w3.org/2000/svg\\",
-    role: \\"img\\"
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, /*#__PURE__*/React.createElement(\\"g\\", {
     stroke: \\"#063855\\",
     strokeWidth: 2,
@@ -32,8 +31,7 @@ exports[`webpack loader transforms file (babel: false) 1`] = `
 const SvgIcon = () => /*#__PURE__*/React.createElement(\\"svg\\", {
   width: 88,
   height: 88,
-  xmlns: \\"http://www.w3.org/2000/svg\\",
-  role: \\"img\\"
+  xmlns: \\"http://www.w3.org/2000/svg\\"
 }, /*#__PURE__*/React.createElement(\\"g\\", {
   stroke: \\"#063855\\",
   strokeWidth: 2,
@@ -58,8 +56,7 @@ var SvgIcon = function SvgIcon(props) {
   return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
     width: 88,
     height: 88,
-    xmlns: \\"http://www.w3.org/2000/svg\\",
-    role: \\"img\\"
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, props), _g || (_g = /*#__PURE__*/React.createElement(\\"g\\", {
     stroke: \\"#063855\\",
     strokeWidth: 2,
@@ -83,8 +80,7 @@ var SvgIcon = function SvgIcon() {
   return _svg || (_svg = /*#__PURE__*/React.createElement(\\"svg\\", {
     width: 88,
     height: 88,
-    xmlns: \\"http://www.w3.org/2000/svg\\",
-    role: \\"img\\"
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, /*#__PURE__*/React.createElement(\\"g\\", {
     stroke: \\"#063855\\",
     strokeWidth: 2,
@@ -108,8 +104,7 @@ var SvgIcon = function SvgIcon() {
   return _svg || (_svg = /*#__PURE__*/React.createElement(\\"svg\\", {
     width: 88,
     height: 88,
-    xmlns: \\"http://www.w3.org/2000/svg\\",
-    role: \\"img\\"
+    xmlns: \\"http://www.w3.org/2000/svg\\"
   }, /*#__PURE__*/React.createElement(\\"g\\", {
     stroke: \\"#063855\\",
     strokeWidth: 2,
diff --git a/website/pages/docs/options.mdx b/website/pages/docs/options.mdx
index f59cb5ab..223adc2c 100644
--- a/website/pages/docs/options.mdx
+++ b/website/pages/docs/options.mdx
@@ -170,6 +170,28 @@ Add props to the root SVG tag.
 
 > You can specify dynamic property using curly braces: `{ focusable: "{true}" }` or `--svg-props focusable={true}`. It is particularly useful with a custom template.
 
+### Accessibility
+
+SVGs by default have an implicit `role="graphics-document"`. To make SVG content accessible you may want to override the default behavior which can be done via the `svgProps` override.
+
+#### For web:
+
+| Default | CLI Override           | API Override                |
+| ------- | ---------------------- | --------------------------- |
+| `[]`    | `--svg-props role=img` | `svgProps: { role: 'img' }` |
+
+#### For native:
+
+| Default | CLI Override                          | API Override                               |
+| ------- | ------------------------------------- | ------------------------------------------ |
+| `[]`    | `--svg-props accessibilityRole=image` | `svgProps: { accessibilityRole: 'image' }` |
+
+Typically for role=img you will want to add either `alt` text or `aria` label/description properties to describe the image when rendering the SVG in your application.
+
+> **NOTE**: On the web once you add `role: 'img'` some screen-readers will automatically announce any `title`/`text`/`desc` nodes within your SVG.
+>
+> SVGO can be configured to remove those nodes via the built-in `removeDesc` and `removeTitle` plugins if you only want to use `aria` properties during consumption of the SVGs.
+
 ## Title
 
 Add title tag via title property. If titleProp is set to true and no title is provided (`title={undefined}`) at render time, this will fallback to an existing title element in the svg if exists.