diff --git a/.changeset/nice-lamps-peel.md b/.changeset/nice-lamps-peel.md
new file mode 100644
index 000000000..cda7fd482
--- /dev/null
+++ b/.changeset/nice-lamps-peel.md
@@ -0,0 +1,5 @@
+---
+'@primer/octicons': minor
+---
+
+Add support for SVG props to base icons
diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index a490c44bf..5ce93e15e 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.563kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.29kB"`)
 })
diff --git a/lib/octicons_react/src/__tests__/octicon.js b/lib/octicons_react/src/__tests__/octicon.js
index c4a9493a7..d21263e84 100644
--- a/lib/octicons_react/src/__tests__/octicon.js
+++ b/lib/octicons_react/src/__tests__/octicon.js
@@ -67,6 +67,11 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveStyle({verticalAlign: 'middle'})
   })
 
+  it('supports additional props on the outermost element', () => {
+    const {container} = render(<AlertIcon data-testid="icon" />)
+    expect(container.firstChild).toHaveAttribute('data-testid', 'icon')
+  })
+
   describe('size props', () => {
     it('respects size="small"', () => {
       const {container} = render(<AlertIcon size="small" />)
diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index f895c43ec..f5469b5a5 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -21,7 +21,9 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         size = 16,
         verticalAlign = 'text-bottom',
         id,
-        title
+        title,
+        style,
+        ...rest
       },
       forwardedRef
     ) => {
@@ -36,6 +38,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
       return (
         <svg
           ref={forwardedRef}
+          {...rest}
           aria-hidden={labelled ? undefined : 'true'}
           tabIndex={tabIndex}
           focusable={tabIndex >= 0 ? 'true' : 'false'}
@@ -52,7 +55,8 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
             display: 'inline-block',
             userSelect: 'none',
             verticalAlign,
-            overflow: 'visible'
+            overflow: 'visible',
+            ...style
           }}
         >
           {title ? <title>{title}</title> : null}
diff --git a/lib/octicons_react/src/index.d.ts b/lib/octicons_react/src/index.d.ts
index 3b7302c5b..357d73528 100644
--- a/lib/octicons_react/src/index.d.ts
+++ b/lib/octicons_react/src/index.d.ts
@@ -6,7 +6,7 @@ import {Icon} from './__generated__/icons.js'
 
 type Size = 'small' | 'medium' | 'large'
 
-export interface OcticonProps {
+export interface OcticonProps extends React.ComponentPropsWithoutRef<'svg'> {
   'aria-label'?: string
   'aria-labelledby'?: string
   tabIndex?: number
diff --git a/package.json b/package.json
index 67f47dbc7..8a5fd9cd6 100644
--- a/package.json
+++ b/package.json
@@ -50,5 +50,6 @@
       "github/no-then": 0,
       "eslint-comments/no-use": 0
     }
-  }
+  },
+  "packageManager": "yarn@1.22.1"
 }