From a6376790135dfd7033e38a6f22b3228c9b96f728 Mon Sep 17 00:00:00 2001
From: brooke <brooke.yalof@mongodb.com>
Date: Mon, 29 Sep 2025 12:04:56 -0400
Subject: [PATCH 1/4] bump svgr

---
 .changeset/itchy-friends-change.md            |   5 +
 packages/icon/package.json                    |   2 +-
 packages/icon/scripts/prebuild/index.ts       |  94 ++++++++++++--
 .../icon/scripts/prebuild/svgrTemplate.ts     |  92 --------------
 packages/icon/src/generated/AIModel.tsx       |  50 +++++---
 packages/icon/src/generated/ActivityFeed.tsx  |  50 +++++---
 packages/icon/src/generated/AddFile.tsx       |  50 +++++---
 packages/icon/src/generated/AllProducts.tsx   |  50 +++++---
 packages/icon/src/generated/AnalyticsNode.tsx |  50 +++++---
 packages/icon/src/generated/Apps.tsx          |  50 +++++---
 packages/icon/src/generated/Array.tsx         |  50 +++++---
 packages/icon/src/generated/ArrowDown.tsx     |  50 +++++---
 packages/icon/src/generated/ArrowLeft.tsx     |  50 +++++---
 packages/icon/src/generated/ArrowRight.tsx    |  50 +++++---
 packages/icon/src/generated/ArrowUp.tsx       |  50 +++++---
 packages/icon/src/generated/Award.tsx         |  50 +++++---
 packages/icon/src/generated/Beaker.tsx        |  50 +++++---
 packages/icon/src/generated/Bell.tsx          |  50 +++++---
 packages/icon/src/generated/Biometric.tsx     |  50 +++++---
 packages/icon/src/generated/Boolean.tsx       |  50 +++++---
 packages/icon/src/generated/Building.tsx      |  50 +++++---
 packages/icon/src/generated/Bulb.tsx          |  50 +++++---
 packages/icon/src/generated/Calendar.tsx      |  50 +++++---
 packages/icon/src/generated/Camera.tsx        |  50 +++++---
 packages/icon/src/generated/Cap.tsx           |  50 +++++---
 packages/icon/src/generated/CaretDown.tsx     |  50 +++++---
 packages/icon/src/generated/CaretLeft.tsx     |  50 +++++---
 packages/icon/src/generated/CaretRight.tsx    |  50 +++++---
 packages/icon/src/generated/CaretUp.tsx       |  50 +++++---
 packages/icon/src/generated/ChartFilled.tsx   |  50 +++++---
 packages/icon/src/generated/Charts.tsx        |  50 +++++---
 packages/icon/src/generated/Checkmark.tsx     |  50 +++++---
 .../src/generated/CheckmarkWithCircle.tsx     |  50 +++++---
 packages/icon/src/generated/ChevronDown.tsx   |  50 +++++---
 packages/icon/src/generated/ChevronLeft.tsx   |  50 +++++---
 packages/icon/src/generated/ChevronRight.tsx  |  50 +++++---
 packages/icon/src/generated/ChevronUp.tsx     |  50 +++++---
 packages/icon/src/generated/Circle.tsx        |  50 +++++---
 packages/icon/src/generated/Clock.tsx         |  50 +++++---
 .../icon/src/generated/ClockWithArrow.tsx     |  50 +++++---
 packages/icon/src/generated/Clone.tsx         |  50 +++++---
 packages/icon/src/generated/Cloud.tsx         |  50 +++++---
 packages/icon/src/generated/Code.tsx          |  50 +++++---
 packages/icon/src/generated/CodeBlock.tsx     |  50 +++++---
 packages/icon/src/generated/Coin.tsx          |  50 +++++---
 packages/icon/src/generated/Colon.tsx         |  50 +++++---
 packages/icon/src/generated/Config.tsx        |  50 +++++---
 packages/icon/src/generated/Connect.tsx       |  50 +++++---
 packages/icon/src/generated/Copy.tsx          |  50 +++++---
 packages/icon/src/generated/CreditCard.tsx    |  50 +++++---
 packages/icon/src/generated/CurlyBraces.tsx   |  50 +++++---
 packages/icon/src/generated/Cursor.tsx        |  50 +++++---
 packages/icon/src/generated/Dashboard.tsx     |  50 +++++---
 packages/icon/src/generated/Database.tsx      |  50 +++++---
 packages/icon/src/generated/Diagram.tsx       |  50 +++++---
 packages/icon/src/generated/Diagram2.tsx      |  50 +++++---
 packages/icon/src/generated/Diagram3.tsx      |  50 +++++---
 packages/icon/src/generated/Disconnect.tsx    |  50 +++++---
 packages/icon/src/generated/Download.tsx      |  50 +++++---
 packages/icon/src/generated/Drag.tsx          |  50 +++++---
 packages/icon/src/generated/Edit.tsx          |  50 +++++---
 packages/icon/src/generated/Ellipsis.tsx      |  50 +++++---
 packages/icon/src/generated/Email.tsx         |  50 +++++---
 packages/icon/src/generated/EmptyDatabase.tsx |  50 +++++---
 packages/icon/src/generated/EmptyFolder.tsx   |  50 +++++---
 packages/icon/src/generated/Eraser.tsx        |  50 +++++---
 packages/icon/src/generated/Escalation.tsx    |  50 +++++---
 packages/icon/src/generated/Export.tsx        |  50 +++++---
 packages/icon/src/generated/Favorite.tsx      |  50 +++++---
 packages/icon/src/generated/Federation.tsx    |  50 +++++---
 packages/icon/src/generated/File.tsx          |  50 +++++---
 packages/icon/src/generated/Filter.tsx        |  50 +++++---
 packages/icon/src/generated/Folder.tsx        |  50 +++++---
 packages/icon/src/generated/Format.tsx        |  50 +++++---
 .../icon/src/generated/FullScreenEnter.tsx    |  50 +++++---
 .../icon/src/generated/FullScreenExit.tsx     |  50 +++++---
 packages/icon/src/generated/Function.tsx      |  50 +++++---
 packages/icon/src/generated/Gauge.tsx         |  50 +++++---
 packages/icon/src/generated/GlobeAmericas.tsx |  50 +++++---
 .../icon/src/generated/GovernmentBuilding.tsx |  50 +++++---
 packages/icon/src/generated/Guide.tsx         |  50 +++++---
 packages/icon/src/generated/Hash.tsx          |  50 +++++---
 .../src/generated/HiddenSecondaryNode.tsx     |  50 +++++---
 packages/icon/src/generated/Highlight.tsx     |  50 +++++---
 packages/icon/src/generated/Home.tsx          |  50 +++++---
 .../icon/src/generated/HorizontalDrag.tsx     |  50 +++++---
 packages/icon/src/generated/Import.tsx        |  50 +++++---
 .../src/generated/ImportantWithCircle.tsx     |  50 +++++---
 .../icon/src/generated/InfoWithCircle.tsx     |  50 +++++---
 .../icon/src/generated/InternalEmployee.tsx   |  50 +++++---
 packages/icon/src/generated/InviteUser.tsx    |  50 +++++---
 packages/icon/src/generated/Key.tsx           |  50 +++++---
 packages/icon/src/generated/Laptop.tsx        |  50 +++++---
 packages/icon/src/generated/LightningBolt.tsx |  50 +++++---
 packages/icon/src/generated/Link.tsx          |  50 +++++---
 packages/icon/src/generated/List.tsx          |  50 +++++---
 packages/icon/src/generated/Lock.tsx          |  50 +++++---
 packages/icon/src/generated/LogIn.tsx         |  50 +++++---
 packages/icon/src/generated/LogOut.tsx        |  50 +++++---
 .../icon/src/generated/MagnifyingGlass.tsx    |  50 +++++---
 packages/icon/src/generated/Megaphone.tsx     |  50 +++++---
 packages/icon/src/generated/Menu.tsx          |  50 +++++---
 packages/icon/src/generated/Minus.tsx         |  50 +++++---
 packages/icon/src/generated/Mobile.tsx        |  50 +++++---
 packages/icon/src/generated/Moon.tsx          |  50 +++++---
 .../src/generated/MultiDirectionArrow.tsx     |  50 +++++---
 packages/icon/src/generated/MultiLayers.tsx   |  50 +++++---
 packages/icon/src/generated/NavCollapse.tsx   |  50 +++++---
 packages/icon/src/generated/NavExpand.tsx     |  50 +++++---
 packages/icon/src/generated/NoFilter.tsx      |  50 +++++---
 packages/icon/src/generated/NotAllowed.tsx    |  50 +++++---
 packages/icon/src/generated/Note.tsx          |  50 +++++---
 packages/icon/src/generated/NumberedList.tsx  |  50 +++++---
 packages/icon/src/generated/OpenNewTab.tsx    |  50 +++++---
 .../icon/src/generated/OutlineFavorite.tsx    |  50 +++++---
 packages/icon/src/generated/Package.tsx       |  50 +++++---
 packages/icon/src/generated/Pause.tsx         |  50 +++++---
 packages/icon/src/generated/Pending.tsx       |  50 +++++---
 packages/icon/src/generated/Person.tsx        |  50 +++++---
 packages/icon/src/generated/PersonGroup.tsx   |  50 +++++---
 .../icon/src/generated/PersonWithLock.tsx     |  50 +++++---
 packages/icon/src/generated/Pin.tsx           |  50 +++++---
 packages/icon/src/generated/Play.tsx          |  50 +++++---
 packages/icon/src/generated/Plus.tsx          |  50 +++++---
 .../icon/src/generated/PlusWithCircle.tsx     |  50 +++++---
 packages/icon/src/generated/Primary.tsx       |  50 +++++---
 packages/icon/src/generated/Project.tsx       |  50 +++++---
 .../src/generated/QuestionMarkWithCircle.tsx  |  50 +++++---
 packages/icon/src/generated/Read.tsx          |  50 +++++---
 packages/icon/src/generated/Recommended.tsx   |  50 +++++---
 packages/icon/src/generated/Redo.tsx          |  50 +++++---
 packages/icon/src/generated/Refresh.tsx       |  50 +++++---
 packages/icon/src/generated/Relationship.tsx  |  50 +++++---
 packages/icon/src/generated/ReplicaSet.tsx    |  50 +++++---
 packages/icon/src/generated/Resize.tsx        |  50 +++++---
 packages/icon/src/generated/Resource.tsx      |  50 +++++---
 packages/icon/src/generated/Return.tsx        |  50 +++++---
 packages/icon/src/generated/Revert.tsx        |  50 +++++---
 packages/icon/src/generated/Router.tsx        |  50 +++++---
 packages/icon/src/generated/SMS.tsx           |  50 +++++---
 packages/icon/src/generated/Save.tsx          |  50 +++++---
 packages/icon/src/generated/SearchIndex.tsx   |  50 +++++---
 packages/icon/src/generated/Secondary.tsx     |  50 +++++---
 packages/icon/src/generated/Serverless.tsx    |  50 +++++---
 packages/icon/src/generated/Settings.tsx      |  50 +++++---
 .../icon/src/generated/ShardedCluster.tsx     |  50 +++++---
 packages/icon/src/generated/Shell.tsx         |  50 +++++---
 packages/icon/src/generated/Shield.tsx        |  50 +++++---
 packages/icon/src/generated/Shirt.tsx         |  50 +++++---
 packages/icon/src/generated/Shortcut.tsx      |  50 +++++---
 packages/icon/src/generated/SortAscending.tsx |  50 +++++---
 .../icon/src/generated/SortDescending.tsx     |  50 +++++---
 packages/icon/src/generated/Sparkle.tsx       |  50 +++++---
 .../icon/src/generated/SplitHorizontal.tsx    |  50 +++++---
 packages/icon/src/generated/SplitVertical.tsx |  50 +++++---
 packages/icon/src/generated/Stitch.tsx        |  50 +++++---
 packages/icon/src/generated/Stop.tsx          |  50 +++++---
 packages/icon/src/generated/Streaming.tsx     |  50 +++++---
 packages/icon/src/generated/String.tsx        |  50 +++++---
 packages/icon/src/generated/Sun.tsx           |  50 +++++---
 packages/icon/src/generated/Support.tsx       |  50 +++++---
 packages/icon/src/generated/Sweep.tsx         |  50 +++++---
 packages/icon/src/generated/Table.tsx         |  50 +++++---
 packages/icon/src/generated/Tag.tsx           |  50 +++++---
 .../icon/src/generated/TemporaryTable.tsx     |  50 +++++---
 packages/icon/src/generated/ThumbsDown.tsx    |  50 +++++---
 packages/icon/src/generated/ThumbsUp.tsx      |  50 +++++---
 packages/icon/src/generated/TimeSeries.tsx    |  50 +++++---
 .../src/generated/TimeSeriesCollection.tsx    |  50 +++++---
 packages/icon/src/generated/Trash.tsx         |  50 +++++---
 packages/icon/src/generated/Undo.tsx          |  50 +++++---
 packages/icon/src/generated/University.tsx    |  50 +++++---
 packages/icon/src/generated/Unlock.tsx        |  50 +++++---
 packages/icon/src/generated/Unsorted.tsx      |  50 +++++---
 packages/icon/src/generated/UpDownCarets.tsx  |  50 +++++---
 packages/icon/src/generated/Upload.tsx        |  50 +++++---
 .../icon/src/generated/VerticalEllipsis.tsx   |  50 +++++---
 packages/icon/src/generated/View.tsx          |  50 +++++---
 packages/icon/src/generated/Visibility.tsx    |  50 +++++---
 packages/icon/src/generated/VisibilityOff.tsx |  50 +++++---
 packages/icon/src/generated/Warning.tsx       |  50 +++++---
 packages/icon/src/generated/Wizard.tsx        |  50 +++++---
 packages/icon/src/generated/Wrench.tsx        |  50 +++++---
 packages/icon/src/generated/Write.tsx         |  50 +++++---
 packages/icon/src/generated/X.tsx             |  50 +++++---
 packages/icon/src/generated/XWithCircle.tsx   |  50 +++++---
 pnpm-lock.yaml                                | 120 ++----------------
 187 files changed, 6466 insertions(+), 2947 deletions(-)
 create mode 100644 .changeset/itchy-friends-change.md
 delete mode 100644 packages/icon/scripts/prebuild/svgrTemplate.ts

diff --git a/.changeset/itchy-friends-change.md b/.changeset/itchy-friends-change.md
new file mode 100644
index 0000000000..8c86915164
--- /dev/null
+++ b/.changeset/itchy-friends-change.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': minor
+---
+
+Bumps svgr dependency from v5 to v8
diff --git a/packages/icon/package.json b/packages/icon/package.json
index c320f63beb..c58edc8d55 100644
--- a/packages/icon/package.json
+++ b/packages/icon/package.json
@@ -43,7 +43,7 @@
     "@lg-tools/build": "workspace:^",
     "@lg-tools/lint": "workspace:^",
     "@lg-tools/storybook-utils": "workspace:^",
-    "@svgr/core": "^5.3.1",
+    "@svgr/core": "^8.1.0",
     "@types/xml2json": "^0.11.0",
     "commander": "^11.0.0",
     "rollup": "4.16.1",
diff --git a/packages/icon/scripts/prebuild/index.ts b/packages/icon/scripts/prebuild/index.ts
index 4de77989dd..3ca3b83683 100644
--- a/packages/icon/scripts/prebuild/index.ts
+++ b/packages/icon/scripts/prebuild/index.ts
@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import { formatLG } from '@lg-tools/lint';
-// @ts-ignore - no types in svgr v5.5 // TODO: update to v8 LG-5484
-import { default as svgr } from '@svgr/core';
+import { transform } from '@svgr/core';
 import { Command } from 'commander';
 import fs from 'fs';
 import path from 'path';
@@ -9,7 +8,6 @@ import path from 'path';
 import { getChecksum } from './checksum';
 import { indexTemplate } from './indexTemplate';
 import { FileObject, PrebuildOptions } from './prebuild.types';
-import { svgrTemplate } from './svgrTemplate';
 
 const SRC_PATH = path.resolve(__dirname, '..', '..', 'src');
 
@@ -117,32 +115,102 @@ function makeFileProcessor(outputDir: string, options?: PrebuildOptions) {
       encoding: 'utf8',
     });
 
-    // Note: must use `require` since svgrrc is a CommonJS module
-    // @ts-ignore - svgrrc is not typed
-    const svgrrc = await require('../../.svgrrc.js');
-
-    const processedSVGR = await svgr(
+    // Generate basic React component first
+    const processedSVGR = await transform(
       svgContent,
       {
-        ...svgrrc,
-        template: svgrTemplate,
+        plugins: ['@svgr/plugin-jsx'],
+        typescript: true,
+        jsx: {
+          babelConfig: {
+            plugins: [
+              [
+                '@svgr/babel-plugin-replace-jsx-attribute-value',
+                {
+                  values: [
+                    { value: '#000', newValue: 'currentColor' },
+                    { value: '#000000', newValue: 'currentColor' },
+                    { value: 'black', newValue: 'currentColor' },
+                  ],
+                },
+              ],
+            ],
+          },
+        },
       },
+      { componentName: file.name },
+    );
+
+    // Post-process to add custom LeafyGreen wrapper
+    const customizedSVGR = processedSVGR.replace(
+      /import \* as React from "react";\nimport type \{ SVGProps \} from "react";\nconst (\w+) = \(props: SVGProps<SVGSVGElement>\) => (.*?);\nexport default \1;/s,
+      `import * as React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+
+export interface $1Props extends LGGlyph.ComponentProps {}
+
+const $1 = ({
+  className,
+  size = 16,
+  title,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: $1Props) => {
+  const fillStyle = css\`
+    color: \${fill};
+  \`;
+
+  const noFlexShrink = css\`
+    flex-shrink: 0;
+  \`;
+
+  const accessibleProps = generateAccessibleProps(role, '$1', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = $2;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
       {
-        componentName: file.name,
+        [fillStyle]: fill != null,
       },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
+  });
+};
+
+$1.displayName = '$1';
+$1.isGlyph = true;
+
+export default $1;`,
     );
 
     const scriptPath =
       'packages/icon/' +
       path.relative(path.resolve(__dirname, process.cwd()), __filename);
 
-    const checksum = getChecksum(svgContent, processedSVGR);
+    const finalContent = customizedSVGR || processedSVGR;
+    const checksum = getChecksum(svgContent, finalContent);
 
     const outfilePath = path.resolve(outputDir, `${file.name}.tsx`);
     const annotatedFileContent = annotateFileContent(
       scriptPath,
       checksum,
-      processedSVGR,
+      finalContent,
     );
 
     if (options?.verbose) {
diff --git a/packages/icon/scripts/prebuild/svgrTemplate.ts b/packages/icon/scripts/prebuild/svgrTemplate.ts
deleted file mode 100644
index a3d2381883..0000000000
--- a/packages/icon/scripts/prebuild/svgrTemplate.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-interface BabelAPI extends Record<string, any> {
-  template: {
-    smart: (opts: Record<string, any>) => any;
-  } & Record<string, any>;
-}
-
-interface SVGROptions extends Record<string, any> {
-  state: {
-    componentName: string;
-  } & Record<string, any>;
-}
-
-interface ASTParts extends Record<string, any> {
-  jsx: Record<string, any>;
-  componentName: object;
-  imports: string;
-  exports: string;
-  interfaces: string;
-  props: string;
-}
-
-export function svgrTemplate(
-  { template }: BabelAPI,
-  { state: { componentName } }: SVGROptions,
-  { imports, jsx, exports }: ASTParts,
-) {
-  const typeScriptTpl = template.smart({ plugins: ['jsx', 'typescript'] });
-
-  const jsxAttributes = typeScriptTpl.ast`
-    <Glyph
-      className={cx(
-        {
-          [fillStyle]: fill != null,
-        },
-        noFlexShrink,
-        className,
-      )}
-      height={typeof size === 'number' ? size : sizeMap[size]}
-      width={typeof size === 'number' ? size : sizeMap[size]}
-      role={role}
-      {...accessibleProps}
-      {...props}
-    />`;
-
-  // Augment the `<svg attributes />` so we can customize it with the values above.
-  jsx.openingElement.attributes =
-    jsxAttributes.expression.openingElement.attributes.concat(
-      jsx.openingElement.attributes[2],
-    );
-
-  return typeScriptTpl(`
-    %%imports%%
-    import { css, cx } from '@leafygreen-ui/emotion';
-    import { generateAccessibleProps, sizeMap } from '../glyphCommon';
-    import { LGGlyph } from '../types';
-  
-    export interface ${componentName}Props extends LGGlyph.ComponentProps {}
-
-    const ${componentName} = ({
-      className,
-      size = 16,
-      title,
-      ['aria-label']: ariaLabel,
-      ['aria-labelledby']: ariaLabelledby,
-      fill,
-      role = 'img',
-      ...props
-    }: ${componentName}Props) => {
-      const fillStyle = css\`
-        color: \${fill};
-      \`;
-
-      const noFlexShrink = css\`
-        flex-shrink: 0;
-      \`;
-
-      const accessibleProps = generateAccessibleProps(role, '${componentName}', { title, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledby })
-
-      return %%jsx%%;
-    }
-
-    ${componentName}.displayName = '${componentName}';
-
-    ${componentName}.isGlyph = true;
-
-    %%exports%%
-  `)({
-    imports: imports,
-    jsx: jsx,
-    exports: exports,
-  });
-}
diff --git a/packages/icon/src/generated/AIModel.tsx b/packages/icon/src/generated/AIModel.tsx
index bbd7c217e7..146d5c8f8e 100644
--- a/packages/icon/src/generated/AIModel.tsx
+++ b/packages/icon/src/generated/AIModel.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1b3d40728665f27a2c0b6039f0387bf8
+* @checksum b1565b6a8cc976654fe8825255b35ade
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface AIModelProps extends LGGlyph.ComponentProps {}
+
 const AIModel = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: AIModelProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'AIModel', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'AIModel', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13.5625 5.30957V10.6895L8 13.4414L2.4375 10.6895V5.30957L8 2.55762L13.5625 5.30957Z" stroke="currentColor" /><path d="M8 2L8 14" stroke="currentColor" strokeWidth={0.5} /><path d="M3.09998 10.8594L12.5324 5.19998" stroke="currentColor" strokeWidth={0.5} strokeLinecap="round" /><path d="M3.19995 5.20001L12.6324 10.8595" stroke="currentColor" strokeWidth={0.5} strokeLinecap="round" /><circle cx={8} cy={2.75} r={1.75} fill="currentColor" /><circle cx={8} cy={2.75} r={1.75} stroke="currentColor" /><circle cx={8} cy={13.25} r={1.75} fill="currentColor" /><circle cx={8} cy={13.25} r={1.75} stroke="currentColor" /><circle cx={8} cy={8} r={1.75} fill="currentColor" /><circle cx={8} cy={8} r={1.75} stroke="currentColor" /><circle cx={13.25} cy={5} r={1.75} fill="currentColor" /><circle cx={13.25} cy={5} r={1.75} stroke="currentColor" /><circle cx={13.25} cy={10.75} r={1.75} fill="currentColor" /><circle cx={13.25} cy={10.75} r={1.75} stroke="currentColor" /><circle cx={2.75} cy={10.75} r={1.75} fill="currentColor" /><circle cx={2.75} cy={10.75} r={1.75} stroke="currentColor" /><circle cx={2.75} cy={5} r={1.75} fill="currentColor" /><circle cx={2.75} cy={5} r={1.75} stroke="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.5625 5.30957V10.6895L8 13.4414L2.4375 10.6895V5.30957L8 2.55762L13.5625 5.30957Z" stroke={'currentColor'} /><path d="M8 2L8 14" stroke={'currentColor'} strokeWidth={0.5} /><path d="M3.09998 10.8594L12.5324 5.19998" stroke={'currentColor'} strokeWidth={0.5} strokeLinecap="round" /><path d="M3.19995 5.20001L12.6324 10.8595" stroke={'currentColor'} strokeWidth={0.5} strokeLinecap="round" /><circle cx={8} cy={2.75} r={1.75} fill={'currentColor'} /><circle cx={8} cy={2.75} r={1.75} stroke={'currentColor'} /><circle cx={8} cy={13.25} r={1.75} fill={'currentColor'} /><circle cx={8} cy={13.25} r={1.75} stroke={'currentColor'} /><circle cx={8} cy={8} r={1.75} fill={'currentColor'} /><circle cx={8} cy={8} r={1.75} stroke={'currentColor'} /><circle cx={13.25} cy={5} r={1.75} fill={'currentColor'} /><circle cx={13.25} cy={5} r={1.75} stroke={'currentColor'} /><circle cx={13.25} cy={10.75} r={1.75} fill={'currentColor'} /><circle cx={13.25} cy={10.75} r={1.75} stroke={'currentColor'} /><circle cx={2.75} cy={10.75} r={1.75} fill={'currentColor'} /><circle cx={2.75} cy={10.75} r={1.75} stroke={'currentColor'} /><circle cx={2.75} cy={5} r={1.75} fill={'currentColor'} /><circle cx={2.75} cy={5} r={1.75} stroke={'currentColor'} /></svg>;
 };
+
 AIModel.displayName = 'AIModel';
 AIModel.isGlyph = true;
+
 export default AIModel;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ActivityFeed.tsx b/packages/icon/src/generated/ActivityFeed.tsx
index 2d129c5dba..d15c8e4462 100644
--- a/packages/icon/src/generated/ActivityFeed.tsx
+++ b/packages/icon/src/generated/ActivityFeed.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 260808bc7119d3af4c161e80ea57a6c5
+* @checksum 9e3ed49fd95300c4db96ff45d3c5d0ed
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ActivityFeedProps extends LGGlyph.ComponentProps {}
+
 const ActivityFeed = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ActivityFeedProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ActivityFeed', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ActivityFeed', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1 13V7H5.5C6.32843 7 7 6.32843 7 5.5V1H9C10.1046 1 11 1.89543 11 3V7.51491C10.9701 7.51164 10.9401 7.50889 10.9099 7.50668C9.80561 7.42578 8.77964 8.08094 8.38847 9.11682L7.32818 11.9246C6.27375 12.2181 5.5 13.1854 5.5 14.3333C5.5 14.5642 5.53129 14.7878 5.58987 15H3C1.89543 15 1 14.1046 1 13ZM4.91421 1H5.83333V4.83333C5.83333 5.38562 5.38562 5.83333 4.83333 5.83333H1V4.91421C1 4.649 1.10536 4.39464 1.29289 4.20711L2.5 3L4.20711 1.29289C4.39464 1.10536 4.649 1 4.91421 1Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M10.8003 9.00268C11.2421 9.03504 11.6099 9.35411 11.7043 9.78684L12.3135 12.5789L12.8215 11.8647C13.0091 11.601 13.3128 11.4444 13.6364 11.4444H15C15.5523 11.4444 16 11.8922 16 12.4444C16 12.9967 15.5523 13.4444 15 13.4444H14.1522L12.633 15.5797C12.4036 15.9022 12.0055 16.059 11.6178 15.9797C11.23 15.9004 10.9255 15.5999 10.8412 15.2132L10.47 13.512L10.0264 14.6866C9.87947 15.0758 9.50691 15.3333 9.09091 15.3333H8C7.44772 15.3333 7 14.8856 7 14.3333C7 13.7811 7.44772 13.3333 8 13.3333H8.39961L9.79175 9.64673C9.94822 9.23238 10.3586 8.97032 10.8003 9.00268Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 13V7H5.5C6.32843 7 7 6.32843 7 5.5V1H9C10.1046 1 11 1.89543 11 3V7.51491C10.9701 7.51164 10.9401 7.50889 10.9099 7.50668C9.80561 7.42578 8.77964 8.08094 8.38847 9.11682L7.32818 11.9246C6.27375 12.2181 5.5 13.1854 5.5 14.3333C5.5 14.5642 5.53129 14.7878 5.58987 15H3C1.89543 15 1 14.1046 1 13ZM4.91421 1H5.83333V4.83333C5.83333 5.38562 5.38562 5.83333 4.83333 5.83333H1V4.91421C1 4.649 1.10536 4.39464 1.29289 4.20711L2.5 3L4.20711 1.29289C4.39464 1.10536 4.649 1 4.91421 1Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M10.8003 9.00268C11.2421 9.03504 11.6099 9.35411 11.7043 9.78684L12.3135 12.5789L12.8215 11.8647C13.0091 11.601 13.3128 11.4444 13.6364 11.4444H15C15.5523 11.4444 16 11.8922 16 12.4444C16 12.9967 15.5523 13.4444 15 13.4444H14.1522L12.633 15.5797C12.4036 15.9022 12.0055 16.059 11.6178 15.9797C11.23 15.9004 10.9255 15.5999 10.8412 15.2132L10.47 13.512L10.0264 14.6866C9.87947 15.0758 9.50691 15.3333 9.09091 15.3333H8C7.44772 15.3333 7 14.8856 7 14.3333C7 13.7811 7.44772 13.3333 8 13.3333H8.39961L9.79175 9.64673C9.94822 9.23238 10.3586 8.97032 10.8003 9.00268Z" fill={'currentColor'} /></svg>;
 };
+
 ActivityFeed.displayName = 'ActivityFeed';
 ActivityFeed.isGlyph = true;
+
 export default ActivityFeed;
\ No newline at end of file
diff --git a/packages/icon/src/generated/AddFile.tsx b/packages/icon/src/generated/AddFile.tsx
index 78008accee..82ecfbf5bd 100644
--- a/packages/icon/src/generated/AddFile.tsx
+++ b/packages/icon/src/generated/AddFile.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cc1e1cbb6d61f3388205f4e843e3e712
+* @checksum a32fe4bc24d1d06940e8ad5b4759ca90
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface AddFileProps extends LGGlyph.ComponentProps {}
+
 const AddFile = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: AddFileProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'AddFile', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'AddFile', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1 7V13C1 14.1046 1.89543 15 3 15H8.9682C8.24461 14.6259 7.75 13.8707 7.75 13C7.75 11.8376 8.63145 10.8811 9.7624 10.7624C9.84441 9.98094 10.3264 9.31861 11 8.98388V3C11 1.89543 10.1046 1 9 1H7V5.5C7 6.32843 6.32843 7 5.5 7H1ZM9 13C9 13.5523 9.44772 14 10 14H10.7324H11V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14H14C14.5523 14 15 13.5523 15 13C15 12.4477 14.5523 12 14 12H13V11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V12H10C9.44772 12 9 12.4477 9 13ZM5.83333 1H4.91421C4.649 1 4.39464 1.10536 4.20711 1.29289L2.5 3L1.29289 4.20711C1.10536 4.39464 1 4.649 1 4.91421V5.83333H4.83333C5.38562 5.83333 5.83333 5.38562 5.83333 4.83333V1Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 7V13C1 14.1046 1.89543 15 3 15H8.9682C8.24461 14.6259 7.75 13.8707 7.75 13C7.75 11.8376 8.63145 10.8811 9.7624 10.7624C9.84441 9.98094 10.3264 9.31861 11 8.98388V3C11 1.89543 10.1046 1 9 1H7V5.5C7 6.32843 6.32843 7 5.5 7H1ZM9 13C9 13.5523 9.44772 14 10 14H10.7324H11V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14H14C14.5523 14 15 13.5523 15 13C15 12.4477 14.5523 12 14 12H13V11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V12H10C9.44772 12 9 12.4477 9 13ZM5.83333 1H4.91421C4.649 1 4.39464 1.10536 4.20711 1.29289L2.5 3L1.29289 4.20711C1.10536 4.39464 1 4.649 1 4.91421V5.83333H4.83333C5.38562 5.83333 5.83333 5.38562 5.83333 4.83333V1Z" fill={'currentColor'} /></svg>;
 };
+
 AddFile.displayName = 'AddFile';
 AddFile.isGlyph = true;
+
 export default AddFile;
\ No newline at end of file
diff --git a/packages/icon/src/generated/AllProducts.tsx b/packages/icon/src/generated/AllProducts.tsx
index 8a47f63a7f..7328b62914 100644
--- a/packages/icon/src/generated/AllProducts.tsx
+++ b/packages/icon/src/generated/AllProducts.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5c37a6bef3cb4644287c2c3f068f875a
+* @checksum 82e659690fa9df7d45ffab92ea74f2d2
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface AllProductsProps extends LGGlyph.ComponentProps {}
+
 const AllProducts = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: AllProductsProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'AllProducts', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'AllProducts', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.5 3.5C2.5 2.94772 2.94772 2.5 3.5 2.5H4.5C5.05228 2.5 5.5 2.94772 5.5 3.5V4.5C5.5 5.05228 5.05228 5.5 4.5 5.5H3.5C2.94772 5.5 2.5 5.05228 2.5 4.5V3.5Z" fill="currentColor" /><path d="M6.5 3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H8.5C9.05228 2.5 9.5 2.94772 9.5 3.5V4.5C9.5 5.05228 9.05228 5.5 8.5 5.5H7.5C6.94772 5.5 6.5 5.05228 6.5 4.5V3.5Z" fill="currentColor" /><path d="M11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5V4.5C10.5 5.05228 10.9477 5.5 11.5 5.5H12.5C13.0523 5.5 13.5 5.05228 13.5 4.5V3.5C13.5 2.94772 13.0523 2.5 12.5 2.5H11.5Z" fill="currentColor" /><path d="M2.5 7.5C2.5 6.94772 2.94772 6.5 3.5 6.5H4.5C5.05228 6.5 5.5 6.94772 5.5 7.5V8.5C5.5 9.05228 5.05228 9.5 4.5 9.5H3.5C2.94772 9.5 2.5 9.05228 2.5 8.5V7.5Z" fill="currentColor" /><path d="M7.5 6.5C6.94772 6.5 6.5 6.94772 6.5 7.5V8.5C6.5 9.05228 6.94772 9.5 7.5 9.5H8.5C9.05228 9.5 9.5 9.05228 9.5 8.5V7.5C9.5 6.94772 9.05228 6.5 8.5 6.5H7.5Z" fill="currentColor" /><path d="M10.5 7.5C10.5 6.94772 10.9477 6.5 11.5 6.5H12.5C13.0523 6.5 13.5 6.94772 13.5 7.5V8.5C13.5 9.05228 13.0523 9.5 12.5 9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V7.5Z" fill="currentColor" /><path d="M3.5 10.5C2.94772 10.5 2.5 10.9477 2.5 11.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H4.5C5.05228 13.5 5.5 13.0523 5.5 12.5V11.5C5.5 10.9477 5.05228 10.5 4.5 10.5H3.5Z" fill="currentColor" /><path d="M6.5 11.5C6.5 10.9477 6.94772 10.5 7.5 10.5H8.5C9.05228 10.5 9.5 10.9477 9.5 11.5V12.5C9.5 13.0523 9.05228 13.5 8.5 13.5H7.5C6.94772 13.5 6.5 13.0523 6.5 12.5V11.5Z" fill="currentColor" /><path d="M11.5 10.5C10.9477 10.5 10.5 10.9477 10.5 11.5V12.5C10.5 13.0523 10.9477 13.5 11.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V11.5C13.5 10.9477 13.0523 10.5 12.5 10.5H11.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.5 3.5C2.5 2.94772 2.94772 2.5 3.5 2.5H4.5C5.05228 2.5 5.5 2.94772 5.5 3.5V4.5C5.5 5.05228 5.05228 5.5 4.5 5.5H3.5C2.94772 5.5 2.5 5.05228 2.5 4.5V3.5Z" fill={'currentColor'} /><path d="M6.5 3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H8.5C9.05228 2.5 9.5 2.94772 9.5 3.5V4.5C9.5 5.05228 9.05228 5.5 8.5 5.5H7.5C6.94772 5.5 6.5 5.05228 6.5 4.5V3.5Z" fill={'currentColor'} /><path d="M11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5V4.5C10.5 5.05228 10.9477 5.5 11.5 5.5H12.5C13.0523 5.5 13.5 5.05228 13.5 4.5V3.5C13.5 2.94772 13.0523 2.5 12.5 2.5H11.5Z" fill={'currentColor'} /><path d="M2.5 7.5C2.5 6.94772 2.94772 6.5 3.5 6.5H4.5C5.05228 6.5 5.5 6.94772 5.5 7.5V8.5C5.5 9.05228 5.05228 9.5 4.5 9.5H3.5C2.94772 9.5 2.5 9.05228 2.5 8.5V7.5Z" fill={'currentColor'} /><path d="M7.5 6.5C6.94772 6.5 6.5 6.94772 6.5 7.5V8.5C6.5 9.05228 6.94772 9.5 7.5 9.5H8.5C9.05228 9.5 9.5 9.05228 9.5 8.5V7.5C9.5 6.94772 9.05228 6.5 8.5 6.5H7.5Z" fill={'currentColor'} /><path d="M10.5 7.5C10.5 6.94772 10.9477 6.5 11.5 6.5H12.5C13.0523 6.5 13.5 6.94772 13.5 7.5V8.5C13.5 9.05228 13.0523 9.5 12.5 9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V7.5Z" fill={'currentColor'} /><path d="M3.5 10.5C2.94772 10.5 2.5 10.9477 2.5 11.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H4.5C5.05228 13.5 5.5 13.0523 5.5 12.5V11.5C5.5 10.9477 5.05228 10.5 4.5 10.5H3.5Z" fill={'currentColor'} /><path d="M6.5 11.5C6.5 10.9477 6.94772 10.5 7.5 10.5H8.5C9.05228 10.5 9.5 10.9477 9.5 11.5V12.5C9.5 13.0523 9.05228 13.5 8.5 13.5H7.5C6.94772 13.5 6.5 13.0523 6.5 12.5V11.5Z" fill={'currentColor'} /><path d="M11.5 10.5C10.9477 10.5 10.5 10.9477 10.5 11.5V12.5C10.5 13.0523 10.9477 13.5 11.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V11.5C13.5 10.9477 13.0523 10.5 12.5 10.5H11.5Z" fill={'currentColor'} /></svg>;
 };
+
 AllProducts.displayName = 'AllProducts';
 AllProducts.isGlyph = true;
+
 export default AllProducts;
\ No newline at end of file
diff --git a/packages/icon/src/generated/AnalyticsNode.tsx b/packages/icon/src/generated/AnalyticsNode.tsx
index 0dfc35791f..ad8181499a 100644
--- a/packages/icon/src/generated/AnalyticsNode.tsx
+++ b/packages/icon/src/generated/AnalyticsNode.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9805552df6dff2c768c44ca81aa213c4
+* @checksum 0f78dc3016a5dfcc4c834e28fc886fc8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface AnalyticsNodeProps extends LGGlyph.ComponentProps {}
+
 const AnalyticsNode = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: AnalyticsNodeProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'AnalyticsNode', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'AnalyticsNode', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M4.23999 11.1535L7.27999 4.05352H8.71999L11.76 11.1535H10.1L9.46999 9.65352H6.52999L5.89999 11.1535H4.23999ZM7.10999 8.27352H8.88999L7.99999 6.13352L7.10999 8.27352Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.23999 11.1535L7.27999 4.05352H8.71999L11.76 11.1535H10.1L9.46999 9.65352H6.52999L5.89999 11.1535H4.23999ZM7.10999 8.27352H8.88999L7.99999 6.13352L7.10999 8.27352Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill={'currentColor'} /></svg>;
 };
+
 AnalyticsNode.displayName = 'AnalyticsNode';
 AnalyticsNode.isGlyph = true;
+
 export default AnalyticsNode;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Apps.tsx b/packages/icon/src/generated/Apps.tsx
index 71b47db97c..5466df1363 100644
--- a/packages/icon/src/generated/Apps.tsx
+++ b/packages/icon/src/generated/Apps.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 425e40d61dd5d93e2cee0b03900ae595
+* @checksum 80f4c527f038cd8fbe383f7f092904c8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface AppsProps extends LGGlyph.ComponentProps {}
+
 const Apps = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: AppsProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Apps', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Apps', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7 3H3V7H7V3ZM7 9H3V13H7V9ZM9 3H13V7H9V3ZM13 9H9V13H13V9Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7 3H3V7H7V3ZM7 9H3V13H7V9ZM9 3H13V7H9V3ZM13 9H9V13H13V9Z" fill={'currentColor'} /></svg>;
 };
+
 Apps.displayName = 'Apps';
 Apps.isGlyph = true;
+
 export default Apps;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Array.tsx b/packages/icon/src/generated/Array.tsx
index 78c6b1b423..8878abf29a 100644
--- a/packages/icon/src/generated/Array.tsx
+++ b/packages/icon/src/generated/Array.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3bf0a50a840b53f371336851204c2a5
+* @checksum e698630955b15ff74135249e3d785085
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ArrayProps extends LGGlyph.ComponentProps {}
+
 const Array = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ArrayProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Array', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Array', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z" fill="currentColor" /><path d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z" fill={'currentColor'} /><path d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.5Z" fill={'currentColor'} /></svg>;
 };
+
 Array.displayName = 'Array';
 Array.isGlyph = true;
+
 export default Array;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ArrowDown.tsx b/packages/icon/src/generated/ArrowDown.tsx
index e3ee37d12b..5ffaa2fd8b 100644
--- a/packages/icon/src/generated/ArrowDown.tsx
+++ b/packages/icon/src/generated/ArrowDown.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 80388a72ab7b330b3a6580b0c297fddf
+* @checksum 1d38f19bad05cbf5fd063565aec8ac7f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ArrowDownProps extends LGGlyph.ComponentProps {}
+
 const ArrowDown = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ArrowDownProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ArrowDown', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ArrowDown', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M9.16788 3L9.16788 9.94442L10.7029 8.40941C11.0934 8.01888 11.7266 8.01889 12.1171 8.40941L12.356 8.64833C12.7465 9.03885 12.7465 9.67201 12.356 10.0625L8.97339 13.4452C8.96483 13.4544 8.95605 13.4635 8.94708 13.4725L8.70816 13.7114C8.31763 14.1019 7.68447 14.1019 7.29395 13.7114L3.64279 10.0602C3.25227 9.66972 3.25227 9.03656 3.64279 8.64603L3.88171 8.40712C4.27223 8.01659 4.9054 8.01659 5.29592 8.40712L6.83 9.9412L6.83 3C6.83 2.44771 7.27772 2 7.83001 2L8.16788 2C8.72017 2 9.16788 2.44772 9.16788 3Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M9.16788 3L9.16788 9.94442L10.7029 8.40941C11.0934 8.01888 11.7266 8.01889 12.1171 8.40941L12.356 8.64833C12.7465 9.03885 12.7465 9.67201 12.356 10.0625L8.97339 13.4452C8.96483 13.4544 8.95605 13.4635 8.94708 13.4725L8.70816 13.7114C8.31763 14.1019 7.68447 14.1019 7.29395 13.7114L3.64279 10.0602C3.25227 9.66972 3.25227 9.03656 3.64279 8.64603L3.88171 8.40712C4.27223 8.01659 4.9054 8.01659 5.29592 8.40712L6.83 9.9412L6.83 3C6.83 2.44771 7.27772 2 7.83001 2L8.16788 2C8.72017 2 9.16788 2.44772 9.16788 3Z" fill={'currentColor'} /></svg>;
 };
+
 ArrowDown.displayName = 'ArrowDown';
 ArrowDown.isGlyph = true;
+
 export default ArrowDown;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ArrowLeft.tsx b/packages/icon/src/generated/ArrowLeft.tsx
index a93f71ef36..812daa4086 100644
--- a/packages/icon/src/generated/ArrowLeft.tsx
+++ b/packages/icon/src/generated/ArrowLeft.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b616058bc8611a0f41a0b72ef9007615
+* @checksum 9e636cdf4b9dc5618600f933b1c14c26
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ArrowLeftProps extends LGGlyph.ComponentProps {}
+
 const ArrowLeft = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ArrowLeftProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ArrowLeft', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ArrowLeft', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13 6.83212L6.05559 6.83212L7.59059 5.29711C7.98112 4.90659 7.98112 4.27342 7.59059 3.8829L7.35168 3.64398C6.96115 3.25346 6.32799 3.25345 5.93746 3.64398L2.55483 7.02661C2.5456 7.03518 2.5365 7.04395 2.52752 7.05292L2.2886 7.29184C1.89808 7.68237 1.89808 8.31553 2.2886 8.70605L5.93975 12.3572C6.33028 12.7477 6.96344 12.7477 7.35397 12.3572L7.59288 12.1183C7.98341 11.7278 7.98341 11.0946 7.59288 10.7041L6.0588 9.17L13 9.17C13.5523 9.17 14 8.72228 14 8.17V7.83212C14 7.27983 13.5523 6.83212 13 6.83212Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13 6.83212L6.05559 6.83212L7.59059 5.29711C7.98112 4.90659 7.98112 4.27342 7.59059 3.8829L7.35168 3.64398C6.96115 3.25346 6.32799 3.25345 5.93746 3.64398L2.55483 7.02661C2.5456 7.03518 2.5365 7.04395 2.52752 7.05292L2.2886 7.29184C1.89808 7.68237 1.89808 8.31553 2.2886 8.70605L5.93975 12.3572C6.33028 12.7477 6.96344 12.7477 7.35397 12.3572L7.59288 12.1183C7.98341 11.7278 7.98341 11.0946 7.59288 10.7041L6.0588 9.17L13 9.17C13.5523 9.17 14 8.72228 14 8.17V7.83212C14 7.27983 13.5523 6.83212 13 6.83212Z" fill={'currentColor'} /></svg>;
 };
+
 ArrowLeft.displayName = 'ArrowLeft';
 ArrowLeft.isGlyph = true;
+
 export default ArrowLeft;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ArrowRight.tsx b/packages/icon/src/generated/ArrowRight.tsx
index e520a7fbd0..c07b45d202 100644
--- a/packages/icon/src/generated/ArrowRight.tsx
+++ b/packages/icon/src/generated/ArrowRight.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 23de185adab4900108b14253a1e923ae
+* @checksum e27715f2d8871b82dc2e58f26758f03e
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ArrowRightProps extends LGGlyph.ComponentProps {}
+
 const ArrowRight = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ArrowRightProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ArrowRight', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ArrowRight', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M3 6.83212L9.94442 6.83212L8.40941 5.29711C8.01888 4.90659 8.01889 4.27342 8.40941 3.8829L8.64833 3.64398C9.03885 3.25346 9.67201 3.25345 10.0625 3.64398L13.4452 7.02661C13.4544 7.03518 13.4635 7.04395 13.4725 7.05292L13.7114 7.29184C14.1019 7.68237 14.1019 8.31553 13.7114 8.70605L10.0602 12.3572C9.66972 12.7477 9.03656 12.7477 8.64603 12.3572L8.40712 12.1183C8.01659 11.7278 8.01659 11.0946 8.40712 10.7041L9.9412 9.17L3 9.17C2.44771 9.17 2 8.72228 2 8.17L2 7.83212C2 7.27983 2.44772 6.83212 3 6.83212Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3 6.83212L9.94442 6.83212L8.40941 5.29711C8.01888 4.90659 8.01889 4.27342 8.40941 3.8829L8.64833 3.64398C9.03885 3.25346 9.67201 3.25345 10.0625 3.64398L13.4452 7.02661C13.4544 7.03518 13.4635 7.04395 13.4725 7.05292L13.7114 7.29184C14.1019 7.68237 14.1019 8.31553 13.7114 8.70605L10.0602 12.3572C9.66972 12.7477 9.03656 12.7477 8.64603 12.3572L8.40712 12.1183C8.01659 11.7278 8.01659 11.0946 8.40712 10.7041L9.9412 9.17L3 9.17C2.44771 9.17 2 8.72228 2 8.17L2 7.83212C2 7.27983 2.44772 6.83212 3 6.83212Z" fill={'currentColor'} /></svg>;
 };
+
 ArrowRight.displayName = 'ArrowRight';
 ArrowRight.isGlyph = true;
+
 export default ArrowRight;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ArrowUp.tsx b/packages/icon/src/generated/ArrowUp.tsx
index e599f19f22..3ce7ff1ead 100644
--- a/packages/icon/src/generated/ArrowUp.tsx
+++ b/packages/icon/src/generated/ArrowUp.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 49ee0cf73d7b62b81389b9ff02da9762
+* @checksum bbdcd6cc340ceffd3ba19f4d214a8e3d
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ArrowUpProps extends LGGlyph.ComponentProps {}
+
 const ArrowUp = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ArrowUpProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ArrowUp', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ArrowUp', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M9.16788 13L9.16788 6.05558L10.7029 7.59059C11.0934 7.98112 11.7266 7.98112 12.1171 7.59059L12.356 7.35168C12.7465 6.96115 12.7465 6.32799 12.356 5.93746L8.97339 2.55483C8.96482 2.5456 8.95605 2.5365 8.94707 2.52752L8.70816 2.2886C8.31763 1.89808 7.68447 1.89808 7.29394 2.2886L3.64279 5.93975C3.25227 6.33028 3.25227 6.96344 3.64279 7.35397L3.88171 7.59288C4.27223 7.98341 4.9054 7.98341 5.29592 7.59288L6.83 6.0588L6.83 13C6.83 13.5523 7.27772 14 7.83 14H8.16788C8.72017 14 9.16788 13.5523 9.16788 13Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M9.16788 13L9.16788 6.05558L10.7029 7.59059C11.0934 7.98112 11.7266 7.98112 12.1171 7.59059L12.356 7.35168C12.7465 6.96115 12.7465 6.32799 12.356 5.93746L8.97339 2.55483C8.96482 2.5456 8.95605 2.5365 8.94707 2.52752L8.70816 2.2886C8.31763 1.89808 7.68447 1.89808 7.29394 2.2886L3.64279 5.93975C3.25227 6.33028 3.25227 6.96344 3.64279 7.35397L3.88171 7.59288C4.27223 7.98341 4.9054 7.98341 5.29592 7.59288L6.83 6.0588L6.83 13C6.83 13.5523 7.27772 14 7.83 14H8.16788C8.72017 14 9.16788 13.5523 9.16788 13Z" fill={'currentColor'} /></svg>;
 };
+
 ArrowUp.displayName = 'ArrowUp';
 ArrowUp.isGlyph = true;
+
 export default ArrowUp;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Award.tsx b/packages/icon/src/generated/Award.tsx
index 4b5f8a12c5..c84d7754da 100644
--- a/packages/icon/src/generated/Award.tsx
+++ b/packages/icon/src/generated/Award.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3b9e32a25f51f7150b52bafd3268e9e7
+* @checksum 5fc35f531fa72646021ec013c3e47285
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface AwardProps extends LGGlyph.ComponentProps {}
+
 const Award = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: AwardProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Award', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Award', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M7.86523 4.50095C7.91495 4.37545 8.08505 4.37545 8.13477 4.50095L8.58203 5.63056C8.60293 5.68332 8.64988 5.71981 8.7041 5.72453L9.86621 5.82242C9.99499 5.83357 10.0474 6.00227 9.94922 6.09063L9.06445 6.88644C9.023 6.92372 9.00492 6.98243 9.01758 7.03817L9.28711 8.22749C9.31712 8.35959 9.18073 8.46438 9.07031 8.3939L8.07617 7.75568C8.0296 7.72581 7.9704 7.72581 7.92383 7.75568L6.92969 8.3939C6.81926 8.46437 6.68288 8.35959 6.71289 8.22749L6.98242 7.03817C6.99508 6.98243 6.977 6.92372 6.93555 6.88644L6.05078 6.09063C5.95261 6.00227 6.00503 5.83356 6.13379 5.82242L7.2959 5.72453C7.35011 5.7198 7.39706 5.68331 7.41797 5.63056L7.86523 4.50095Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M8 1.3999C10.7614 1.3999 13 3.64376 13 6.41169C13 7.54003 12.6278 8.58111 12 9.41877V13.5975C12 14.1511 11.5523 14.5999 11 14.5999H10.9727C10.8025 14.5999 10.635 14.5565 10.4863 14.4736L8 13.0856L5.51367 14.4736C5.36498 14.5565 5.1975 14.5999 5.02734 14.5999H5C4.44772 14.5999 4 14.1511 4 13.5975V9.41877C3.37223 8.58111 3 7.54003 3 6.41169C3 3.64376 5.23858 1.3999 8 1.3999ZM11 10.4201C10.1642 11.0496 9.1259 11.4235 8 11.4235C6.8741 11.4235 5.83577 11.0496 5 10.4201V13.5975H5.02734L7.51367 12.2095C7.81599 12.0409 8.18401 12.0409 8.48633 12.2095L10.9727 13.5975H11V10.4201ZM8 2.40226C5.79086 2.40226 4 4.19734 4 6.41169C4 8.62604 5.79086 10.4211 8 10.4211C10.2091 10.4211 12 8.62604 12 6.41169C12 4.19734 10.2091 2.40226 8 2.40226Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M7.86523 4.50095C7.91495 4.37545 8.08505 4.37545 8.13477 4.50095L8.58203 5.63056C8.60293 5.68332 8.64988 5.71981 8.7041 5.72453L9.86621 5.82242C9.99499 5.83357 10.0474 6.00227 9.94922 6.09063L9.06445 6.88644C9.023 6.92372 9.00492 6.98243 9.01758 7.03817L9.28711 8.22749C9.31712 8.35959 9.18073 8.46438 9.07031 8.3939L8.07617 7.75568C8.0296 7.72581 7.9704 7.72581 7.92383 7.75568L6.92969 8.3939C6.81926 8.46437 6.68288 8.35959 6.71289 8.22749L6.98242 7.03817C6.99508 6.98243 6.977 6.92372 6.93555 6.88644L6.05078 6.09063C5.95261 6.00227 6.00503 5.83356 6.13379 5.82242L7.2959 5.72453C7.35011 5.7198 7.39706 5.68331 7.41797 5.63056L7.86523 4.50095Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 1.3999C10.7614 1.3999 13 3.64376 13 6.41169C13 7.54003 12.6278 8.58111 12 9.41877V13.5975C12 14.1511 11.5523 14.5999 11 14.5999H10.9727C10.8025 14.5999 10.635 14.5565 10.4863 14.4736L8 13.0856L5.51367 14.4736C5.36498 14.5565 5.1975 14.5999 5.02734 14.5999H5C4.44772 14.5999 4 14.1511 4 13.5975V9.41877C3.37223 8.58111 3 7.54003 3 6.41169C3 3.64376 5.23858 1.3999 8 1.3999ZM11 10.4201C10.1642 11.0496 9.1259 11.4235 8 11.4235C6.8741 11.4235 5.83577 11.0496 5 10.4201V13.5975H5.02734L7.51367 12.2095C7.81599 12.0409 8.18401 12.0409 8.48633 12.2095L10.9727 13.5975H11V10.4201ZM8 2.40226C5.79086 2.40226 4 4.19734 4 6.41169C4 8.62604 5.79086 10.4211 8 10.4211C10.2091 10.4211 12 8.62604 12 6.41169C12 4.19734 10.2091 2.40226 8 2.40226Z" fill={'currentColor'} /></svg>;
 };
+
 Award.displayName = 'Award';
 Award.isGlyph = true;
+
 export default Award;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Beaker.tsx b/packages/icon/src/generated/Beaker.tsx
index 11d0ee9095..0ba4795ff7 100644
--- a/packages/icon/src/generated/Beaker.tsx
+++ b/packages/icon/src/generated/Beaker.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 672dda640a4f6847536982968cfb0a72
+* @checksum 896c982d51a7557c82d3198e2a06fdde
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface BeakerProps extends LGGlyph.ComponentProps {}
+
 const Beaker = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: BeakerProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Beaker', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Beaker', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M5.95288 1.8C5.95288 1.51997 5.95288 1.37996 6.00738 1.273C6.05532 1.17892 6.13181 1.10243 6.22589 1.0545C6.33284 1 6.47286 1 6.75288 1H9.15288C9.43291 1 9.57292 1 9.67988 1.0545C9.77396 1.10243 9.85045 1.17892 9.89839 1.273C9.95288 1.37996 9.95288 1.51997 9.95288 1.8V2.2C9.95288 2.48003 9.95288 2.62004 9.89839 2.727C9.85045 2.82108 9.77396 2.89757 9.67988 2.9455C9.57292 3 9.43291 3 9.15288 3H6.75288C6.47286 3 6.33284 3 6.22589 2.9455C6.13181 2.89757 6.05532 2.82108 6.00738 2.727C5.95288 2.62004 5.95288 2.48003 5.95288 2.2V1.8ZM6.00919 4.26951C5.95289 4.37788 5.95289 4.52025 5.95289 4.805V6H5.95288L2.94611 11.4122C2.28339 12.6051 1.95203 13.2015 2.01416 13.6895C2.06606 14.097 2.28284 14.4654 2.61388 14.7087C3.01025 15 3.69257 15 5.0572 15H10.8485C12.2132 15 12.8955 15 13.2919 14.7087C13.6229 14.4654 13.8397 14.097 13.8916 13.6895C13.9537 13.2015 13.6224 12.6051 12.9596 11.4122L12.9596 11.4122L9.95289 6.00003V4.805C9.95289 4.52025 9.95289 4.37788 9.8966 4.26951C9.84916 4.17819 9.7747 4.10373 9.68338 4.05629C9.57501 4 9.43264 4 9.14789 4H6.75789C6.47315 4 6.33077 4 6.2224 4.05629C6.13108 4.10373 6.05662 4.17819 6.00919 4.26951ZM9.33288 9L6.30288 9.5L5.01554 11.8106C4.79758 12.2019 4.6886 12.3975 4.70716 12.5576C4.72336 12.6973 4.79764 12.8237 4.9118 12.9059C5.04264 13 5.26656 13 5.71439 13H10.1939C10.641 13 10.8646 13 10.9954 12.906C11.1095 12.824 11.1838 12.6977 11.2001 12.5582C11.2189 12.3982 11.1104 12.2027 10.8934 11.8118L9.33288 9Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M5.95288 1.8C5.95288 1.51997 5.95288 1.37996 6.00738 1.273C6.05532 1.17892 6.13181 1.10243 6.22589 1.0545C6.33284 1 6.47286 1 6.75288 1H9.15288C9.43291 1 9.57292 1 9.67988 1.0545C9.77396 1.10243 9.85045 1.17892 9.89839 1.273C9.95288 1.37996 9.95288 1.51997 9.95288 1.8V2.2C9.95288 2.48003 9.95288 2.62004 9.89839 2.727C9.85045 2.82108 9.77396 2.89757 9.67988 2.9455C9.57292 3 9.43291 3 9.15288 3H6.75288C6.47286 3 6.33284 3 6.22589 2.9455C6.13181 2.89757 6.05532 2.82108 6.00738 2.727C5.95288 2.62004 5.95288 2.48003 5.95288 2.2V1.8ZM6.00919 4.26951C5.95289 4.37788 5.95289 4.52025 5.95289 4.805V6H5.95288L2.94611 11.4122C2.28339 12.6051 1.95203 13.2015 2.01416 13.6895C2.06606 14.097 2.28284 14.4654 2.61388 14.7087C3.01025 15 3.69257 15 5.0572 15H10.8485C12.2132 15 12.8955 15 13.2919 14.7087C13.6229 14.4654 13.8397 14.097 13.8916 13.6895C13.9537 13.2015 13.6224 12.6051 12.9596 11.4122L12.9596 11.4122L9.95289 6.00003V4.805C9.95289 4.52025 9.95289 4.37788 9.8966 4.26951C9.84916 4.17819 9.7747 4.10373 9.68338 4.05629C9.57501 4 9.43264 4 9.14789 4H6.75789C6.47315 4 6.33077 4 6.2224 4.05629C6.13108 4.10373 6.05662 4.17819 6.00919 4.26951ZM9.33288 9L6.30288 9.5L5.01554 11.8106C4.79758 12.2019 4.6886 12.3975 4.70716 12.5576C4.72336 12.6973 4.79764 12.8237 4.9118 12.9059C5.04264 13 5.26656 13 5.71439 13H10.1939C10.641 13 10.8646 13 10.9954 12.906C11.1095 12.824 11.1838 12.6977 11.2001 12.5582C11.2189 12.3982 11.1104 12.2027 10.8934 11.8118L9.33288 9Z" fill={'currentColor'} /></svg>;
 };
+
 Beaker.displayName = 'Beaker';
 Beaker.isGlyph = true;
+
 export default Beaker;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Bell.tsx b/packages/icon/src/generated/Bell.tsx
index 232b92e7d7..f526a25b62 100644
--- a/packages/icon/src/generated/Bell.tsx
+++ b/packages/icon/src/generated/Bell.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c63a1d36f26f487d4e09ec57d2e07e96
+* @checksum 7f2b8d3bd1e5e9f9b6797bd4a2773a97
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface BellProps extends LGGlyph.ComponentProps {}
+
 const Bell = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: BellProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Bell', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Bell', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M12.6248 6.1383C12.4098 4.25462 11.09 2.74034 9.35673 2.21251C9.2281 1.52063 8.66955 1 8 1C7.33044 1 6.77189 1.52063 6.64326 2.21251C4.91 2.74034 3.59017 4.25462 3.37524 6.1383L2.92307 10.1011H2.94943C2.42507 10.1011 2 10.5262 2 11.0506C2 11.5749 2.42507 12 2.94943 12H13.0506C13.5749 12 14 11.5749 14 11.0506C14 10.5262 13.5749 10.1011 13.0506 10.1011H13.0769L12.6248 6.1383ZM8 15C6.89543 15 6 14.1046 6 13H10C10 14.1046 9.10457 15 8 15Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M12.6248 6.1383C12.4098 4.25462 11.09 2.74034 9.35673 2.21251C9.2281 1.52063 8.66955 1 8 1C7.33044 1 6.77189 1.52063 6.64326 2.21251C4.91 2.74034 3.59017 4.25462 3.37524 6.1383L2.92307 10.1011H2.94943C2.42507 10.1011 2 10.5262 2 11.0506C2 11.5749 2.42507 12 2.94943 12H13.0506C13.5749 12 14 11.5749 14 11.0506C14 10.5262 13.5749 10.1011 13.0506 10.1011H13.0769L12.6248 6.1383ZM8 15C6.89543 15 6 14.1046 6 13H10C10 14.1046 9.10457 15 8 15Z" fill={'currentColor'} /></svg>;
 };
+
 Bell.displayName = 'Bell';
 Bell.isGlyph = true;
+
 export default Bell;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Biometric.tsx b/packages/icon/src/generated/Biometric.tsx
index 957643de7b..03171cf970 100644
--- a/packages/icon/src/generated/Biometric.tsx
+++ b/packages/icon/src/generated/Biometric.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b38fe171af2489e14639cf28ce6f82a9
+* @checksum 56cd3920c12120fa82e83da32ec4d76b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface BiometricProps extends LGGlyph.ComponentProps {}
+
 const Biometric = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: BiometricProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Biometric', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Biometric', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7.5 1C4.46243 1 2 3.46243 2 6.5V9.5C2 12.5376 4.46243 15 7.5 15H8.5C11.5376 15 14 12.5376 14 9.5V6.5C14 3.46243 11.5376 1 8.5 1H7.5ZM8.57432 7.75001C8.57432 7.43282 8.31719 7.17569 8 7.17569C7.68281 7.17569 7.42567 7.43282 7.42567 7.75001V10.2069C7.42567 10.5241 7.68281 10.7812 8 10.7812C8.31719 10.7812 8.57432 10.5241 8.57432 10.2069V7.75001ZM8.00001 5.33783C6.66781 5.33783 5.58785 6.41779 5.58785 7.74999V10.3164C5.58785 10.5802 5.48308 10.8331 5.2966 11.0196C5.07232 11.2438 5.07232 11.6075 5.2966 11.8318C5.52089 12.0561 5.88453 12.0561 6.10882 11.8318C6.51071 11.4299 6.7365 10.8848 6.7365 10.3164V7.74999C6.7365 7.05217 7.30219 6.48648 8.00001 6.48648C8.69783 6.48648 9.26352 7.05217 9.26352 7.74999V10.3983C9.26352 10.8104 9.03068 11.1871 8.66208 11.3714C8.37838 11.5133 8.26338 11.8583 8.40524 12.142C8.54709 12.4257 8.89207 12.5407 9.17577 12.3988C9.93352 12.0199 10.4122 11.2455 10.4122 10.3983V7.74999C10.4122 6.41779 9.33221 5.33783 8.00001 5.33783ZM4.89865 7.75C4.89865 6.03717 6.28717 4.64865 8 4.64865C8.6033 4.64865 9.16475 4.82034 9.64017 5.11727C9.9092 5.28529 10.2635 5.20341 10.4315 4.93438C10.5996 4.66535 10.5177 4.31104 10.2486 4.14302C9.59605 3.73544 8.82464 3.5 8 3.5C5.65279 3.5 3.75 5.40279 3.75 7.75V10.0473C3.75 10.3645 4.00713 10.6216 4.32432 10.6216C4.64151 10.6216 4.89865 10.3645 4.89865 10.0473V7.75ZM11.7861 5.81757C11.6417 5.53515 11.2957 5.42326 11.0133 5.56765C10.7309 5.71205 10.619 6.05805 10.7634 6.34047C10.9793 6.76274 11.1014 7.24128 11.1014 7.75V9.12838C11.1014 9.44557 11.3585 9.7027 11.6757 9.7027C11.9929 9.7027 12.25 9.44557 12.25 9.12838V7.75C12.25 7.0553 12.0829 6.39796 11.7861 5.81757Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.5 1C4.46243 1 2 3.46243 2 6.5V9.5C2 12.5376 4.46243 15 7.5 15H8.5C11.5376 15 14 12.5376 14 9.5V6.5C14 3.46243 11.5376 1 8.5 1H7.5ZM8.57432 7.75001C8.57432 7.43282 8.31719 7.17569 8 7.17569C7.68281 7.17569 7.42567 7.43282 7.42567 7.75001V10.2069C7.42567 10.5241 7.68281 10.7812 8 10.7812C8.31719 10.7812 8.57432 10.5241 8.57432 10.2069V7.75001ZM8.00001 5.33783C6.66781 5.33783 5.58785 6.41779 5.58785 7.74999V10.3164C5.58785 10.5802 5.48308 10.8331 5.2966 11.0196C5.07232 11.2438 5.07232 11.6075 5.2966 11.8318C5.52089 12.0561 5.88453 12.0561 6.10882 11.8318C6.51071 11.4299 6.7365 10.8848 6.7365 10.3164V7.74999C6.7365 7.05217 7.30219 6.48648 8.00001 6.48648C8.69783 6.48648 9.26352 7.05217 9.26352 7.74999V10.3983C9.26352 10.8104 9.03068 11.1871 8.66208 11.3714C8.37838 11.5133 8.26338 11.8583 8.40524 12.142C8.54709 12.4257 8.89207 12.5407 9.17577 12.3988C9.93352 12.0199 10.4122 11.2455 10.4122 10.3983V7.74999C10.4122 6.41779 9.33221 5.33783 8.00001 5.33783ZM4.89865 7.75C4.89865 6.03717 6.28717 4.64865 8 4.64865C8.6033 4.64865 9.16475 4.82034 9.64017 5.11727C9.9092 5.28529 10.2635 5.20341 10.4315 4.93438C10.5996 4.66535 10.5177 4.31104 10.2486 4.14302C9.59605 3.73544 8.82464 3.5 8 3.5C5.65279 3.5 3.75 5.40279 3.75 7.75V10.0473C3.75 10.3645 4.00713 10.6216 4.32432 10.6216C4.64151 10.6216 4.89865 10.3645 4.89865 10.0473V7.75ZM11.7861 5.81757C11.6417 5.53515 11.2957 5.42326 11.0133 5.56765C10.7309 5.71205 10.619 6.05805 10.7634 6.34047C10.9793 6.76274 11.1014 7.24128 11.1014 7.75V9.12838C11.1014 9.44557 11.3585 9.7027 11.6757 9.7027C11.9929 9.7027 12.25 9.44557 12.25 9.12838V7.75C12.25 7.0553 12.0829 6.39796 11.7861 5.81757Z" fill={'currentColor'} /></svg>;
 };
+
 Biometric.displayName = 'Biometric';
 Biometric.isGlyph = true;
+
 export default Biometric;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Boolean.tsx b/packages/icon/src/generated/Boolean.tsx
index 3a6d040086..e375f2b3b8 100644
--- a/packages/icon/src/generated/Boolean.tsx
+++ b/packages/icon/src/generated/Boolean.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 224d52aa04474618343045cb91eb024b
+* @checksum eb50c8689347217f62e42fdab024fcb2
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface BooleanProps extends LGGlyph.ComponentProps {}
+
 const Boolean = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: BooleanProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Boolean', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Boolean', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM12 8C12 10.2091 10.2091 12 8 12V4C10.2091 4 12 5.79086 12 8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM12 8C12 10.2091 10.2091 12 8 12V4C10.2091 4 12 5.79086 12 8Z" fill={'currentColor'} /></svg>;
 };
+
 Boolean.displayName = 'Boolean';
 Boolean.isGlyph = true;
+
 export default Boolean;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Building.tsx b/packages/icon/src/generated/Building.tsx
index 0db5ed0386..c067aaceaa 100644
--- a/packages/icon/src/generated/Building.tsx
+++ b/packages/icon/src/generated/Building.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cd0cc93f287eb3cfa85f6b4f23f219ea
+* @checksum 09c08da572e2f70a35ce65ca09f4f9f3
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface BuildingProps extends LGGlyph.ComponentProps {}
+
 const Building = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: BuildingProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Building', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Building', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1 2C1 1.44772 1.44772 1 2 1H7C7.55228 1 8 1.44772 8 2V7.5V10.5V15H6V13H4V15H1V11H5.5C5.77614 11 6 10.7761 6 10.5C6 10.2239 5.77614 10 5.5 10H1V8H5.5C5.77614 8 6 7.77614 6 7.5C6 7.22386 5.77614 7 5.5 7H1V5H5.5C5.77614 5 6 4.77614 6 4.5C6 4.22386 5.77614 4 5.5 4H1V2ZM9 11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H9V8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H9V5C9 4.44772 9.44772 4 10 4H15C15.5523 4 16 4.44772 16 5V15H14V13H12V15H9V11Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 2C1 1.44772 1.44772 1 2 1H7C7.55228 1 8 1.44772 8 2V7.5V10.5V15H6V13H4V15H1V11H5.5C5.77614 11 6 10.7761 6 10.5C6 10.2239 5.77614 10 5.5 10H1V8H5.5C5.77614 8 6 7.77614 6 7.5C6 7.22386 5.77614 7 5.5 7H1V5H5.5C5.77614 5 6 4.77614 6 4.5C6 4.22386 5.77614 4 5.5 4H1V2ZM9 11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H9V8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H9V5C9 4.44772 9.44772 4 10 4H15C15.5523 4 16 4.44772 16 5V15H14V13H12V15H9V11Z" fill={'currentColor'} /></svg>;
 };
+
 Building.displayName = 'Building';
 Building.isGlyph = true;
+
 export default Building;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Bulb.tsx b/packages/icon/src/generated/Bulb.tsx
index 1c1ee511c7..e2399e2e34 100644
--- a/packages/icon/src/generated/Bulb.tsx
+++ b/packages/icon/src/generated/Bulb.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a01c0e6b2545e3d46df479877be7691a
+* @checksum 01a18b28d71adbc717736589886bb930
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface BulbProps extends LGGlyph.ComponentProps {}
+
 const Bulb = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: BulbProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Bulb', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Bulb', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M12.3311 8.5C12.7565 7.76457 13 6.91072 13 6C13 3.23858 10.7614 1 8 1C5.23858 1 3 3.23858 3 6C3 6.94628 3.26287 7.83117 3.71958 8.58561L5.40749 11.501C5.58628 11.8099 5.91607 12 6.27291 12H6.5V6C6.5 5.17157 7.17157 4.5 8 4.5C8.82843 4.5 9.5 5.17157 9.5 6V12H9.72368C10.0793 12 10.4082 11.8111 10.5874 11.5039L12.34 8.5H12.3311Z" fill="currentColor" /><path d="M7.5 6V12H8.5V6C8.5 5.72386 8.27614 5.5 8 5.5C7.72386 5.5 7.5 5.72386 7.5 6Z" fill="currentColor" /><path d="M10 14V13H6V14C6 14.5523 6.44772 15 7 15H9C9.55228 15 10 14.5523 10 14Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M12.3311 8.5C12.7565 7.76457 13 6.91072 13 6C13 3.23858 10.7614 1 8 1C5.23858 1 3 3.23858 3 6C3 6.94628 3.26287 7.83117 3.71958 8.58561L5.40749 11.501C5.58628 11.8099 5.91607 12 6.27291 12H6.5V6C6.5 5.17157 7.17157 4.5 8 4.5C8.82843 4.5 9.5 5.17157 9.5 6V12H9.72368C10.0793 12 10.4082 11.8111 10.5874 11.5039L12.34 8.5H12.3311Z" fill={'currentColor'} /><path d="M7.5 6V12H8.5V6C8.5 5.72386 8.27614 5.5 8 5.5C7.72386 5.5 7.5 5.72386 7.5 6Z" fill={'currentColor'} /><path d="M10 14V13H6V14C6 14.5523 6.44772 15 7 15H9C9.55228 15 10 14.5523 10 14Z" fill={'currentColor'} /></svg>;
 };
+
 Bulb.displayName = 'Bulb';
 Bulb.isGlyph = true;
+
 export default Bulb;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Calendar.tsx b/packages/icon/src/generated/Calendar.tsx
index 25f8664acf..3eade8012c 100644
--- a/packages/icon/src/generated/Calendar.tsx
+++ b/packages/icon/src/generated/Calendar.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7112ff5b67ee7b683204ef6c2ef8f4bc
+* @checksum 8cedeea29c00f7829d8c21a1f4ad344c
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CalendarProps extends LGGlyph.ComponentProps {}
+
 const Calendar = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CalendarProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Calendar', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Calendar', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M4 2C4 1.44772 4.44772 1 5 1C5.55228 1 6 1.44772 6 2V3C6 3.55228 5.55228 4 5 4C4.44772 4 4 3.55228 4 3V2Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M9 3H7C7 4.10457 6.10457 5 5 5C3.89543 5 3 4.10457 3 3C1.89543 3 1 3.89543 1 5V12C1 13.1046 1.89543 14 3 14H13C14.1046 14 15 13.1046 15 12V5C15 3.89543 14.1046 3 13 3C13 4.10457 12.1046 5 11 5C9.89543 5 9 4.10457 9 3ZM12 7H9V10H12V7Z" fill="currentColor" /><path d="M10 3C10 3.55228 10.4477 4 11 4C11.5523 4 12 3.55228 12 3V2C12 1.44772 11.5523 1 11 1C10.4477 1 10 1.44772 10 2V3Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4 2C4 1.44772 4.44772 1 5 1C5.55228 1 6 1.44772 6 2V3C6 3.55228 5.55228 4 5 4C4.44772 4 4 3.55228 4 3V2Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M9 3H7C7 4.10457 6.10457 5 5 5C3.89543 5 3 4.10457 3 3C1.89543 3 1 3.89543 1 5V12C1 13.1046 1.89543 14 3 14H13C14.1046 14 15 13.1046 15 12V5C15 3.89543 14.1046 3 13 3C13 4.10457 12.1046 5 11 5C9.89543 5 9 4.10457 9 3ZM12 7H9V10H12V7Z" fill={'currentColor'} /><path d="M10 3C10 3.55228 10.4477 4 11 4C11.5523 4 12 3.55228 12 3V2C12 1.44772 11.5523 1 11 1C10.4477 1 10 1.44772 10 2V3Z" fill={'currentColor'} /></svg>;
 };
+
 Calendar.displayName = 'Calendar';
 Calendar.isGlyph = true;
+
 export default Calendar;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Camera.tsx b/packages/icon/src/generated/Camera.tsx
index 6106ea1236..d322335cfc 100644
--- a/packages/icon/src/generated/Camera.tsx
+++ b/packages/icon/src/generated/Camera.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 47b24752cf1f046d783a987dcb3c42dd
+* @checksum 29e8feab0e20f78a47f4f950aac0a2e5
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CameraProps extends LGGlyph.ComponentProps {}
+
 const Camera = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CameraProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Camera', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Camera', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10.25 8.5C10.25 9.74264 9.24264 10.75 8 10.75C6.75736 10.75 5.75 9.74264 5.75 8.5C5.75 7.25736 6.75736 6.25 8 6.25C9.24264 6.25 10.25 7.25736 10.25 8.5Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M4.58541 3.32918C4.8395 2.821 5.35889 2.5 5.92705 2.5H10.0729C10.6411 2.5 11.1605 2.821 11.4146 3.32918L11.7236 3.94721C11.893 4.286 12.2393 4.5 12.618 4.5H13.5C14.3284 4.5 15 5.17157 15 6V12C15 12.8284 14.3284 13.5 13.5 13.5H2.5C1.67157 13.5 1 12.8284 1 12V6C1 5.17157 1.67157 4.5 2.5 4.5H3.38197C3.76074 4.5 4.107 4.286 4.27639 3.94721L4.58541 3.32918ZM11.5 8.5C11.5 10.433 9.933 12 8 12C6.067 12 4.5 10.433 4.5 8.5C4.5 6.567 6.067 5 8 5C9.933 5 11.5 6.567 11.5 8.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.25 8.5C10.25 9.74264 9.24264 10.75 8 10.75C6.75736 10.75 5.75 9.74264 5.75 8.5C5.75 7.25736 6.75736 6.25 8 6.25C9.24264 6.25 10.25 7.25736 10.25 8.5Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4.58541 3.32918C4.8395 2.821 5.35889 2.5 5.92705 2.5H10.0729C10.6411 2.5 11.1605 2.821 11.4146 3.32918L11.7236 3.94721C11.893 4.286 12.2393 4.5 12.618 4.5H13.5C14.3284 4.5 15 5.17157 15 6V12C15 12.8284 14.3284 13.5 13.5 13.5H2.5C1.67157 13.5 1 12.8284 1 12V6C1 5.17157 1.67157 4.5 2.5 4.5H3.38197C3.76074 4.5 4.107 4.286 4.27639 3.94721L4.58541 3.32918ZM11.5 8.5C11.5 10.433 9.933 12 8 12C6.067 12 4.5 10.433 4.5 8.5C4.5 6.567 6.067 5 8 5C9.933 5 11.5 6.567 11.5 8.5Z" fill={'currentColor'} /></svg>;
 };
+
 Camera.displayName = 'Camera';
 Camera.isGlyph = true;
+
 export default Camera;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Cap.tsx b/packages/icon/src/generated/Cap.tsx
index 1337230605..7387960666 100644
--- a/packages/icon/src/generated/Cap.tsx
+++ b/packages/icon/src/generated/Cap.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4e96db1fcbbe1eaff9f36dcc67cde9f2
+* @checksum e5e388e26ee943034846238c8348ce27
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CapProps extends LGGlyph.ComponentProps {}
+
 const Cap = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CapProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Cap', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Cap', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.96929 8.00791V10.3071C2.96929 10.3383 2.96986 10.3693 2.97099 10.4002C2.96986 10.4862 2.96929 10.5734 2.96929 10.6618C2.96929 12.5877 5.50373 13.5 7.96929 13.5C10.4348 13.5 12.9693 12.5877 12.9693 10.6618C12.9693 10.5773 12.9686 10.4938 12.9672 10.4113C12.9686 10.3767 12.9693 10.342 12.9693 10.3071V8.00118L8.70622 9.78705C8.20883 9.99541 7.64838 9.99409 7.15198 9.78338L2.96929 8.00791Z" fill="currentColor" /><path d="M7.56463 2.58331C7.81791 2.4729 8.10559 2.47221 8.3594 2.5814L14.7092 5.31304C15.1145 5.4874 15.1118 6.06303 14.7048 6.23351L8.35054 8.89542C8.10185 8.9996 7.82162 8.99894 7.57343 8.89358L1.30463 6.23261C0.90058 6.0611 0.897823 5.48941 1.3002 5.31401L7.56463 2.58331Z" fill="currentColor" /><path d="M13.9693 7.62582V9.10335C13.6704 9.27626 13.4693 9.59943 13.4693 9.96957C13.4693 10.5219 13.917 10.9696 14.4693 10.9696C15.0216 10.9696 15.4693 10.5219 15.4693 9.96957C15.4693 9.59943 15.2682 9.27626 14.9693 9.10336V7.20691L13.9693 7.62582Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.96929 8.00791V10.3071C2.96929 10.3383 2.96986 10.3693 2.97099 10.4002C2.96986 10.4862 2.96929 10.5734 2.96929 10.6618C2.96929 12.5877 5.50373 13.5 7.96929 13.5C10.4348 13.5 12.9693 12.5877 12.9693 10.6618C12.9693 10.5773 12.9686 10.4938 12.9672 10.4113C12.9686 10.3767 12.9693 10.342 12.9693 10.3071V8.00118L8.70622 9.78705C8.20883 9.99541 7.64838 9.99409 7.15198 9.78338L2.96929 8.00791Z" fill={'currentColor'} /><path d="M7.56463 2.58331C7.81791 2.4729 8.10559 2.47221 8.3594 2.5814L14.7092 5.31304C15.1145 5.4874 15.1118 6.06303 14.7048 6.23351L8.35054 8.89542C8.10185 8.9996 7.82162 8.99894 7.57343 8.89358L1.30463 6.23261C0.90058 6.0611 0.897823 5.48941 1.3002 5.31401L7.56463 2.58331Z" fill={'currentColor'} /><path d="M13.9693 7.62582V9.10335C13.6704 9.27626 13.4693 9.59943 13.4693 9.96957C13.4693 10.5219 13.917 10.9696 14.4693 10.9696C15.0216 10.9696 15.4693 10.5219 15.4693 9.96957C15.4693 9.59943 15.2682 9.27626 14.9693 9.10336V7.20691L13.9693 7.62582Z" fill={'currentColor'} /></svg>;
 };
+
 Cap.displayName = 'Cap';
 Cap.isGlyph = true;
+
 export default Cap;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CaretDown.tsx b/packages/icon/src/generated/CaretDown.tsx
index 653b7202b9..b1e0aa3f03 100644
--- a/packages/icon/src/generated/CaretDown.tsx
+++ b/packages/icon/src/generated/CaretDown.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b7cc7a9061c98a368fd005b771e1f18d
+* @checksum d76a42b4bda3b14a89c2a331f1b18a1a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CaretDownProps extends LGGlyph.ComponentProps {}
+
 const CaretDown = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CaretDownProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CaretDown', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CaretDown', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.67903 10.7962C8.45271 11.0679 8.04729 11.0679 7.82097 10.7962L4.63962 6.97649C4.3213 6.59428 4.5824 6 5.06866 6L11.4313 6C11.9176 6 12.1787 6.59428 11.8604 6.97649L8.67903 10.7962Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.67903 10.7962C8.45271 11.0679 8.04729 11.0679 7.82097 10.7962L4.63962 6.97649C4.3213 6.59428 4.5824 6 5.06866 6L11.4313 6C11.9176 6 12.1787 6.59428 11.8604 6.97649L8.67903 10.7962Z" fill={'currentColor'} /></svg>;
 };
+
 CaretDown.displayName = 'CaretDown';
 CaretDown.isGlyph = true;
+
 export default CaretDown;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CaretLeft.tsx b/packages/icon/src/generated/CaretLeft.tsx
index e02f7e30eb..ff7b29fe30 100644
--- a/packages/icon/src/generated/CaretLeft.tsx
+++ b/packages/icon/src/generated/CaretLeft.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0bc57fb243bd763d1297c5e8acd52d96
+* @checksum aa2cf9cc9aba76ef98aa3a7fc9027dbb
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CaretLeftProps extends LGGlyph.ComponentProps {}
+
 const CaretLeft = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CaretLeftProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CaretLeft', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CaretLeft', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M5.20381 8.67903C4.93207 8.45271 4.93207 8.04729 5.20381 7.82097L9.02351 4.63963C9.40572 4.3213 10 4.5824 10 5.06866L10 11.4313C10 11.9176 9.40572 12.1787 9.02351 11.8604L5.20381 8.67903Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M5.20381 8.67903C4.93207 8.45271 4.93207 8.04729 5.20381 7.82097L9.02351 4.63963C9.40572 4.3213 10 4.5824 10 5.06866L10 11.4313C10 11.9176 9.40572 12.1787 9.02351 11.8604L5.20381 8.67903Z" fill={'currentColor'} /></svg>;
 };
+
 CaretLeft.displayName = 'CaretLeft';
 CaretLeft.isGlyph = true;
+
 export default CaretLeft;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CaretRight.tsx b/packages/icon/src/generated/CaretRight.tsx
index d75f1eee06..46ef1ee4eb 100644
--- a/packages/icon/src/generated/CaretRight.tsx
+++ b/packages/icon/src/generated/CaretRight.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 47bdb54fcab8aca96858ae2be419aa77
+* @checksum 17c0b289eda7b133019afc3f4ecd9aac
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CaretRightProps extends LGGlyph.ComponentProps {}
+
 const CaretRight = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CaretRightProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CaretRight', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CaretRight', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10.7962 7.32097C11.0679 7.54729 11.0679 7.95271 10.7962 8.17903L6.97649 11.3604C6.59428 11.6787 6 11.4176 6 10.9313L6 4.56866C6 4.0824 6.59428 3.82129 6.97649 4.13962L10.7962 7.32097Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.7962 7.32097C11.0679 7.54729 11.0679 7.95271 10.7962 8.17903L6.97649 11.3604C6.59428 11.6787 6 11.4176 6 10.9313L6 4.56866C6 4.0824 6.59428 3.82129 6.97649 4.13962L10.7962 7.32097Z" fill={'currentColor'} /></svg>;
 };
+
 CaretRight.displayName = 'CaretRight';
 CaretRight.isGlyph = true;
+
 export default CaretRight;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CaretUp.tsx b/packages/icon/src/generated/CaretUp.tsx
index 1b34d42904..14d028b009 100644
--- a/packages/icon/src/generated/CaretUp.tsx
+++ b/packages/icon/src/generated/CaretUp.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 467de2169295f5b5a3166cda3118c90f
+* @checksum a58b38a5f30c0ea17cd53ef325b11bfb
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CaretUpProps extends LGGlyph.ComponentProps {}
+
 const CaretUp = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CaretUpProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CaretUp', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CaretUp', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M7.32097 5.20381C7.54729 4.93207 7.95271 4.93207 8.17903 5.20381L11.3604 9.02351C11.6787 9.40572 11.4176 10 10.9313 10L4.56866 10C4.0824 10 3.8213 9.40572 4.13962 9.02351L7.32097 5.20381Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M7.32097 5.20381C7.54729 4.93207 7.95271 4.93207 8.17903 5.20381L11.3604 9.02351C11.6787 9.40572 11.4176 10 10.9313 10L4.56866 10C4.0824 10 3.8213 9.40572 4.13962 9.02351L7.32097 5.20381Z" fill={'currentColor'} /></svg>;
 };
+
 CaretUp.displayName = 'CaretUp';
 CaretUp.isGlyph = true;
+
 export default CaretUp;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ChartFilled.tsx b/packages/icon/src/generated/ChartFilled.tsx
index 4cf46ecb3a..f7bb14cd6e 100644
--- a/packages/icon/src/generated/ChartFilled.tsx
+++ b/packages/icon/src/generated/ChartFilled.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 52a2e2fd93d3181057afc417ae9a2118
+* @checksum 2072f115e3eee30d21a61c93e2852de0
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ChartFilledProps extends LGGlyph.ComponentProps {}
+
 const ChartFilled = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ChartFilledProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ChartFilled', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ChartFilled', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M3 2.5C1.89543 2.5 1 3.39543 1 4.5V11.5C1 12.6046 1.89543 13.5 3 13.5H13C14.1046 13.5 15 12.6046 15 11.5V4.5C15 3.39543 14.1046 2.5 13 2.5H3ZM11.25 4.5C10.8358 4.5 10.5 4.83579 10.5 5.25V11.5H12V5.25C12 4.83579 11.6642 4.5 11.25 4.5ZM7.5 7.25C7.5 6.83579 7.83579 6.5 8.25 6.5C8.66421 6.5 9 6.83579 9 7.25V11.5H7.5V7.25ZM5.25 9C4.83579 9 4.5 9.33579 4.5 9.75V11.5H6V9.75C6 9.33579 5.66421 9 5.25 9Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M3 2.5C1.89543 2.5 1 3.39543 1 4.5V11.5C1 12.6046 1.89543 13.5 3 13.5H13C14.1046 13.5 15 12.6046 15 11.5V4.5C15 3.39543 14.1046 2.5 13 2.5H3ZM11.25 4.5C10.8358 4.5 10.5 4.83579 10.5 5.25V11.5H12V5.25C12 4.83579 11.6642 4.5 11.25 4.5ZM7.5 7.25C7.5 6.83579 7.83579 6.5 8.25 6.5C8.66421 6.5 9 6.83579 9 7.25V11.5H7.5V7.25ZM5.25 9C4.83579 9 4.5 9.33579 4.5 9.75V11.5H6V9.75C6 9.33579 5.66421 9 5.25 9Z" fill={'currentColor'} /></svg>;
 };
+
 ChartFilled.displayName = 'ChartFilled';
 ChartFilled.isGlyph = true;
+
 export default ChartFilled;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Charts.tsx b/packages/icon/src/generated/Charts.tsx
index 1a2ad662a7..d37b1a4139 100644
--- a/packages/icon/src/generated/Charts.tsx
+++ b/packages/icon/src/generated/Charts.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eb9e11c27066d151ace30e0570051ecc
+* @checksum e461e1fe8e4917d6824b6bf3987372a3
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ChartsProps extends LGGlyph.ComponentProps {}
+
 const Charts = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ChartsProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Charts', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Charts', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M11.5 13C11.5 13.5523 11.9477 14 12.5 14H13.5C14.0523 14 14.5 13.5523 14.5 13V3C14.5 2.44772 14.0523 2 13.5 2H12.5C11.9477 2 11.5 2.44772 11.5 3L11.5 13Z" fill="currentColor" /><path d="M7.5 14C6.94772 14 6.5 13.5523 6.5 13L6.5 6C6.5 5.44772 6.94771 5 7.5 5H8.5C9.05228 5 9.5 5.44772 9.5 6V13C9.5 13.5523 9.05229 14 8.5 14H7.5Z" fill="currentColor" /><path d="M2.5 14C1.94772 14 1.5 13.5523 1.5 13V9C1.5 8.44772 1.94772 8 2.5 8H3.5C4.05229 8 4.5 8.44772 4.5 9L4.5 13C4.5 13.5523 4.05229 14 3.5 14H2.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M11.5 13C11.5 13.5523 11.9477 14 12.5 14H13.5C14.0523 14 14.5 13.5523 14.5 13V3C14.5 2.44772 14.0523 2 13.5 2H12.5C11.9477 2 11.5 2.44772 11.5 3L11.5 13Z" fill={'currentColor'} /><path d="M7.5 14C6.94772 14 6.5 13.5523 6.5 13L6.5 6C6.5 5.44772 6.94771 5 7.5 5H8.5C9.05228 5 9.5 5.44772 9.5 6V13C9.5 13.5523 9.05229 14 8.5 14H7.5Z" fill={'currentColor'} /><path d="M2.5 14C1.94772 14 1.5 13.5523 1.5 13V9C1.5 8.44772 1.94772 8 2.5 8H3.5C4.05229 8 4.5 8.44772 4.5 9L4.5 13C4.5 13.5523 4.05229 14 3.5 14H2.5Z" fill={'currentColor'} /></svg>;
 };
+
 Charts.displayName = 'Charts';
 Charts.isGlyph = true;
+
 export default Charts;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Checkmark.tsx b/packages/icon/src/generated/Checkmark.tsx
index 9de89d5ac6..cc89c0b052 100644
--- a/packages/icon/src/generated/Checkmark.tsx
+++ b/packages/icon/src/generated/Checkmark.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5c8f29787a59e9aa2cb10f982fb0e34e
+* @checksum 81750f71cde8eaedefead268c26a2ead
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CheckmarkProps extends LGGlyph.ComponentProps {}
+
 const Checkmark = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CheckmarkProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Checkmark', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Checkmark', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M6.30583 9.05037L11.7611 3.59509C12.1516 3.20457 12.7848 3.20457 13.1753 3.59509L13.8824 4.3022C14.273 4.69273 14.273 5.32589 13.8824 5.71642L6.81525 12.7836C6.38819 13.2106 5.68292 13.1646 5.31505 12.6856L2.26638 8.71605C1.92998 8.27804 2.01235 7.65025 2.45036 7.31385L3.04518 6.85702C3.59269 6.43652 4.37742 6.53949 4.79792 7.087L6.30583 9.05037Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M6.30583 9.05037L11.7611 3.59509C12.1516 3.20457 12.7848 3.20457 13.1753 3.59509L13.8824 4.3022C14.273 4.69273 14.273 5.32589 13.8824 5.71642L6.81525 12.7836C6.38819 13.2106 5.68292 13.1646 5.31505 12.6856L2.26638 8.71605C1.92998 8.27804 2.01235 7.65025 2.45036 7.31385L3.04518 6.85702C3.59269 6.43652 4.37742 6.53949 4.79792 7.087L6.30583 9.05037Z" fill={'currentColor'} /></svg>;
 };
+
 Checkmark.displayName = 'Checkmark';
 Checkmark.isGlyph = true;
+
 export default Checkmark;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CheckmarkWithCircle.tsx b/packages/icon/src/generated/CheckmarkWithCircle.tsx
index 68543dac2b..77ecfdadc8 100644
--- a/packages/icon/src/generated/CheckmarkWithCircle.tsx
+++ b/packages/icon/src/generated/CheckmarkWithCircle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 01e3301b68ab1c0849499c3fd52b9c64
+* @checksum 6cf44df4218b587f40c79278019b1481
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CheckmarkWithCircleProps extends LGGlyph.ComponentProps {}
+
 const CheckmarkWithCircle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CheckmarkWithCircleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CheckmarkWithCircle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CheckmarkWithCircle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM10.4485 4.89583C10.8275 4.45816 11.4983 4.43411 11.9077 4.84352C12.2777 5.21345 12.2989 5.80633 11.9564 6.2018L7.38365 11.4818C7.31367 11.5739 7.22644 11.6552 7.12309 11.7208C6.65669 12.0166 6.03882 11.8783 5.74302 11.4119L3.9245 8.54448C3.6287 8.07809 3.767 7.46021 4.2334 7.16442C4.69979 6.86863 5.31767 7.00693 5.61346 7.47332L6.71374 9.20819L10.4485 4.89583Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM10.4485 4.89583C10.8275 4.45816 11.4983 4.43411 11.9077 4.84352C12.2777 5.21345 12.2989 5.80633 11.9564 6.2018L7.38365 11.4818C7.31367 11.5739 7.22644 11.6552 7.12309 11.7208C6.65669 12.0166 6.03882 11.8783 5.74302 11.4119L3.9245 8.54448C3.6287 8.07809 3.767 7.46021 4.2334 7.16442C4.69979 6.86863 5.31767 7.00693 5.61346 7.47332L6.71374 9.20819L10.4485 4.89583Z" fill={'currentColor'} /></svg>;
 };
+
 CheckmarkWithCircle.displayName = 'CheckmarkWithCircle';
 CheckmarkWithCircle.isGlyph = true;
+
 export default CheckmarkWithCircle;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ChevronDown.tsx b/packages/icon/src/generated/ChevronDown.tsx
index a07bdfd8e4..4a97202951 100644
--- a/packages/icon/src/generated/ChevronDown.tsx
+++ b/packages/icon/src/generated/ChevronDown.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1b70552302dc5f33ef29f45169b61722
+* @checksum beb6b957e7648df0f85f7dedac0c3b6d
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ChevronDownProps extends LGGlyph.ComponentProps {}
+
 const ChevronDown = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ChevronDownProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ChevronDown', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ChevronDown', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1.63604 5.36396C1.24551 5.75449 1.24551 6.38765 1.63604 6.77817L6.58579 11.7279L7.29289 12.435C7.68342 12.8256 8.31658 12.8256 8.70711 12.435L9.41421 11.7279L14.364 6.77817C14.7545 6.38765 14.7545 5.75449 14.364 5.36396L13.6569 4.65685C13.2663 4.26633 12.6332 4.26633 12.2426 4.65685L8 8.89949L3.75736 4.65685C3.36684 4.26633 2.73367 4.26633 2.34315 4.65685L1.63604 5.36396Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1.63604 5.36396C1.24551 5.75449 1.24551 6.38765 1.63604 6.77817L6.58579 11.7279L7.29289 12.435C7.68342 12.8256 8.31658 12.8256 8.70711 12.435L9.41421 11.7279L14.364 6.77817C14.7545 6.38765 14.7545 5.75449 14.364 5.36396L13.6569 4.65685C13.2663 4.26633 12.6332 4.26633 12.2426 4.65685L8 8.89949L3.75736 4.65685C3.36684 4.26633 2.73367 4.26633 2.34315 4.65685L1.63604 5.36396Z" fill={'currentColor'} /></svg>;
 };
+
 ChevronDown.displayName = 'ChevronDown';
 ChevronDown.isGlyph = true;
+
 export default ChevronDown;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ChevronLeft.tsx b/packages/icon/src/generated/ChevronLeft.tsx
index f75e5d69c9..a609e6a878 100644
--- a/packages/icon/src/generated/ChevronLeft.tsx
+++ b/packages/icon/src/generated/ChevronLeft.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b256a3ede62cb851b7e7e09ceb3fe12c
+* @checksum 07b56ed992e4a9003e8165edf8da37e3
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ChevronLeftProps extends LGGlyph.ComponentProps {}
+
 const ChevronLeft = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ChevronLeftProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ChevronLeft', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ChevronLeft', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M10.7782 1.63604C10.3877 1.24551 9.75449 1.24551 9.36396 1.63604L4.41421 6.58579L3.70711 7.29289C3.31658 7.68342 3.31658 8.31658 3.70711 8.70711L4.41421 9.41421L9.36396 14.364C9.75448 14.7545 10.3876 14.7545 10.7782 14.364L11.4853 13.6569C11.8758 13.2663 11.8758 12.6332 11.4853 12.2426L7.24264 8L11.4853 3.75736C11.8758 3.36684 11.8758 2.73367 11.4853 2.34315L10.7782 1.63604Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M10.7782 1.63604C10.3877 1.24551 9.75449 1.24551 9.36396 1.63604L4.41421 6.58579L3.70711 7.29289C3.31658 7.68342 3.31658 8.31658 3.70711 8.70711L4.41421 9.41421L9.36396 14.364C9.75448 14.7545 10.3876 14.7545 10.7782 14.364L11.4853 13.6569C11.8758 13.2663 11.8758 12.6332 11.4853 12.2426L7.24264 8L11.4853 3.75736C11.8758 3.36684 11.8758 2.73367 11.4853 2.34315L10.7782 1.63604Z" fill={'currentColor'} /></svg>;
 };
+
 ChevronLeft.displayName = 'ChevronLeft';
 ChevronLeft.isGlyph = true;
+
 export default ChevronLeft;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ChevronRight.tsx b/packages/icon/src/generated/ChevronRight.tsx
index 1fc2ad7886..10517d515a 100644
--- a/packages/icon/src/generated/ChevronRight.tsx
+++ b/packages/icon/src/generated/ChevronRight.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 61deb1cc5f8aaabad3c9303f7ffdfd45
+* @checksum a0c6ffafc84573887fa4d5d3481cd41a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ChevronRightProps extends LGGlyph.ComponentProps {}
+
 const ChevronRight = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ChevronRightProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ChevronRight', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ChevronRight', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M5.36396 14.364C5.75449 14.7545 6.38765 14.7545 6.77818 14.364L11.7279 9.41421L12.435 8.70711C12.8256 8.31658 12.8256 7.68342 12.435 7.29289L11.7279 6.58579L6.77817 1.63604C6.38765 1.24552 5.75449 1.24551 5.36396 1.63604L4.65685 2.34315C4.26633 2.73367 4.26633 3.36684 4.65685 3.75736L8.89949 8L4.65685 12.2426C4.26633 12.6332 4.26633 13.2663 4.65686 13.6569L5.36396 14.364Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M5.36396 14.364C5.75449 14.7545 6.38765 14.7545 6.77818 14.364L11.7279 9.41421L12.435 8.70711C12.8256 8.31658 12.8256 7.68342 12.435 7.29289L11.7279 6.58579L6.77817 1.63604C6.38765 1.24552 5.75449 1.24551 5.36396 1.63604L4.65685 2.34315C4.26633 2.73367 4.26633 3.36684 4.65685 3.75736L8.89949 8L4.65685 12.2426C4.26633 12.6332 4.26633 13.2663 4.65686 13.6569L5.36396 14.364Z" fill={'currentColor'} /></svg>;
 };
+
 ChevronRight.displayName = 'ChevronRight';
 ChevronRight.isGlyph = true;
+
 export default ChevronRight;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ChevronUp.tsx b/packages/icon/src/generated/ChevronUp.tsx
index 0dfd213cfd..4a5243611f 100644
--- a/packages/icon/src/generated/ChevronUp.tsx
+++ b/packages/icon/src/generated/ChevronUp.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c2e9544b35690bffab1838d83caa496d
+* @checksum 84c45abb0ccb8941a760633a6bb67b36
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ChevronUpProps extends LGGlyph.ComponentProps {}
+
 const ChevronUp = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ChevronUpProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ChevronUp', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ChevronUp', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M14.364 10.7782C14.7545 10.3877 14.7545 9.75449 14.364 9.36396L9.41421 4.41421L8.70711 3.70711C8.31658 3.31658 7.68342 3.31658 7.29289 3.70711L6.58579 4.41421L1.63604 9.36396C1.24552 9.75448 1.24551 10.3876 1.63604 10.7782L2.34315 11.4853C2.73367 11.8758 3.36684 11.8758 3.75736 11.4853L8 7.24264L12.2426 11.4853C12.6332 11.8758 13.2663 11.8758 13.6569 11.4853L14.364 10.7782Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M14.364 10.7782C14.7545 10.3877 14.7545 9.75449 14.364 9.36396L9.41421 4.41421L8.70711 3.70711C8.31658 3.31658 7.68342 3.31658 7.29289 3.70711L6.58579 4.41421L1.63604 9.36396C1.24552 9.75448 1.24551 10.3876 1.63604 10.7782L2.34315 11.4853C2.73367 11.8758 3.36684 11.8758 3.75736 11.4853L8 7.24264L12.2426 11.4853C12.6332 11.8758 13.2663 11.8758 13.6569 11.4853L14.364 10.7782Z" fill={'currentColor'} /></svg>;
 };
+
 ChevronUp.displayName = 'ChevronUp';
 ChevronUp.isGlyph = true;
+
 export default ChevronUp;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Circle.tsx b/packages/icon/src/generated/Circle.tsx
index 470f504696..39974de786 100644
--- a/packages/icon/src/generated/Circle.tsx
+++ b/packages/icon/src/generated/Circle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 58c735cc8fda3c43338ae2f01473a0cf
+* @checksum db9a774b0503f55260428a2ec81db14c
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CircleProps extends LGGlyph.ComponentProps {}
+
 const Circle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CircleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Circle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Circle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><circle cx={8} cy={8} r={7} fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><circle cx={8} cy={8} r={7} fill={'currentColor'} /></svg>;
 };
+
 Circle.displayName = 'Circle';
 Circle.isGlyph = true;
+
 export default Circle;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Clock.tsx b/packages/icon/src/generated/Clock.tsx
index 984ef11aeb..bea04608bf 100644
--- a/packages/icon/src/generated/Clock.tsx
+++ b/packages/icon/src/generated/Clock.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0c4caec1c47768a8921a638fb73034dc
+* @checksum 642c56f82ffce9fa09ae0568dec0d726
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ClockProps extends LGGlyph.ComponentProps {}
+
 const Clock = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ClockProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Clock', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Clock', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 4.75C7.25 4.33579 7.58579 4 8 4C8.41421 4 8.75 4.33579 8.75 4.75V7.90966L10.4939 9.43556C10.8056 9.70832 10.8372 10.1821 10.5644 10.4939C10.2917 10.8056 9.81786 10.8372 9.50613 10.5644L7.51059 8.81833C7.5014 8.8104 7.4924 8.80226 7.48361 8.79391C7.41388 8.7278 7.35953 8.65117 7.32087 8.56867C7.27541 8.47195 7.25 8.36394 7.25 8.25V4.75Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 4.75C7.25 4.33579 7.58579 4 8 4C8.41421 4 8.75 4.33579 8.75 4.75V7.90966L10.4939 9.43556C10.8056 9.70832 10.8372 10.1821 10.5644 10.4939C10.2917 10.8056 9.81786 10.8372 9.50613 10.5644L7.51059 8.81833C7.5014 8.8104 7.4924 8.80226 7.48361 8.79391C7.41388 8.7278 7.35953 8.65117 7.32087 8.56867C7.27541 8.47195 7.25 8.36394 7.25 8.25V4.75Z" fill={'currentColor'} /></svg>;
 };
+
 Clock.displayName = 'Clock';
 Clock.isGlyph = true;
+
 export default Clock;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ClockWithArrow.tsx b/packages/icon/src/generated/ClockWithArrow.tsx
index 562e846d21..bf39cc72c7 100644
--- a/packages/icon/src/generated/ClockWithArrow.tsx
+++ b/packages/icon/src/generated/ClockWithArrow.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c10e62ba77cbd413359726526d086577
+* @checksum b00c5cd4a22378150711205b5e1b3ff8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ClockWithArrowProps extends LGGlyph.ComponentProps {}
+
 const ClockWithArrow = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ClockWithArrowProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ClockWithArrow', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ClockWithArrow', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13 8C13 10.7614 10.7614 13 8 13C7.16895 13 6.38526 12.7973 5.69568 12.4385C5.34783 12.2576 4.90944 12.3087 4.65841 12.6099L4.32712 13.0075C4.05174 13.3379 4.1087 13.8355 4.48034 14.0521C5.51438 14.6548 6.71687 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C6.05606 1 4.2972 1.7924 3.02879 3.07181L1.96954 2.14618C1.56206 1.7901 0.931193 2.13127 1.00611 2.66721L1.4606 5.9185C1.50083 6.20624 1.7463 6.4287 2.03684 6.43H5.31972C5.86086 6.43241 6.1144 5.76821 5.70691 5.41212L4.53896 4.3915C5.4373 3.52965 6.65679 3 8 3C10.7614 3 13 5.23858 13 8Z" fill="currentColor" /><path d="M7.25 5.25C7.25 4.83579 7.58579 4.5 8 4.5C8.41421 4.5 8.75 4.83579 8.75 5.25V7.91793L10.4294 9.44169C10.7412 9.71445 10.7728 10.1883 10.5 10.5C10.2272 10.8117 9.75342 10.8433 9.44169 10.5706L7.50697 8.81519C7.49904 8.80826 7.49125 8.80117 7.48361 8.79391C7.41388 8.72781 7.35954 8.65118 7.32088 8.56868C7.27541 8.47196 7.25 8.36395 7.25 8.25V5.25Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13 8C13 10.7614 10.7614 13 8 13C7.16895 13 6.38526 12.7973 5.69568 12.4385C5.34783 12.2576 4.90944 12.3087 4.65841 12.6099L4.32712 13.0075C4.05174 13.3379 4.1087 13.8355 4.48034 14.0521C5.51438 14.6548 6.71687 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C6.05606 1 4.2972 1.7924 3.02879 3.07181L1.96954 2.14618C1.56206 1.7901 0.931193 2.13127 1.00611 2.66721L1.4606 5.9185C1.50083 6.20624 1.7463 6.4287 2.03684 6.43H5.31972C5.86086 6.43241 6.1144 5.76821 5.70691 5.41212L4.53896 4.3915C5.4373 3.52965 6.65679 3 8 3C10.7614 3 13 5.23858 13 8Z" fill={'currentColor'} /><path d="M7.25 5.25C7.25 4.83579 7.58579 4.5 8 4.5C8.41421 4.5 8.75 4.83579 8.75 5.25V7.91793L10.4294 9.44169C10.7412 9.71445 10.7728 10.1883 10.5 10.5C10.2272 10.8117 9.75342 10.8433 9.44169 10.5706L7.50697 8.81519C7.49904 8.80826 7.49125 8.80117 7.48361 8.79391C7.41388 8.72781 7.35954 8.65118 7.32088 8.56868C7.27541 8.47196 7.25 8.36395 7.25 8.25V5.25Z" fill={'currentColor'} /></svg>;
 };
+
 ClockWithArrow.displayName = 'ClockWithArrow';
 ClockWithArrow.isGlyph = true;
+
 export default ClockWithArrow;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Clone.tsx b/packages/icon/src/generated/Clone.tsx
index 3b0a8f5e52..16efb12c23 100644
--- a/packages/icon/src/generated/Clone.tsx
+++ b/packages/icon/src/generated/Clone.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c49bb6f86ac38132c73ffe2cd13d6343
+* @checksum 850dac53b0905f4e0f683179eda6fe4d
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CloneProps extends LGGlyph.ComponentProps {}
+
 const Clone = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CloneProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Clone', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Clone', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M5.5 12C5.5 13.1046 6.39543 14 7.5 14H12.5C13.6046 14 14.5 13.1046 14.5 12V8C14.5 6.89543 13.6046 6 12.5 6H7.5C6.39543 6 5.5 6.89543 5.5 8V12Z" fill="currentColor" /><path d="M4.25 10H3.5C2.39543 10 1.5 9.10457 1.5 8V4C1.5 2.89543 2.39543 2 3.5 2H8.5C9.60457 2 10.5 2.89543 10.5 4V4.75H8.5V4H3.5L3.5 8H4.25V10Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M5.5 12C5.5 13.1046 6.39543 14 7.5 14H12.5C13.6046 14 14.5 13.1046 14.5 12V8C14.5 6.89543 13.6046 6 12.5 6H7.5C6.39543 6 5.5 6.89543 5.5 8V12Z" fill={'currentColor'} /><path d="M4.25 10H3.5C2.39543 10 1.5 9.10457 1.5 8V4C1.5 2.89543 2.39543 2 3.5 2H8.5C9.60457 2 10.5 2.89543 10.5 4V4.75H8.5V4H3.5L3.5 8H4.25V10Z" fill={'currentColor'} /></svg>;
 };
+
 Clone.displayName = 'Clone';
 Clone.isGlyph = true;
+
 export default Clone;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Cloud.tsx b/packages/icon/src/generated/Cloud.tsx
index 3bd89316dd..4e04ca2913 100644
--- a/packages/icon/src/generated/Cloud.tsx
+++ b/packages/icon/src/generated/Cloud.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b794844aa742da6b09e629854e0d0342
+* @checksum 434c0c7540d613023b36bf0bdff6da78
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CloudProps extends LGGlyph.ComponentProps {}
+
 const Cloud = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CloudProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Cloud', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Cloud', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M12.5714 8.14286C12.5714 9.91806 11.672 11.4832 10.304 12.4074L10.2902 12.4167C9.4721 12.9655 8.48773 13.2857 7.42857 13.2857L2.85714 13.2857C1.27919 13.2857 0 12.0065 0 10.4286C0 9.03717 0.994597 7.87807 2.31162 7.62345C2.57202 5.02705 4.76357 3 7.42857 3C9.67227 3 11.5804 4.43682 12.283 6.44054C12.4698 6.97334 12.5714 7.54624 12.5714 8.14286Z" fill="currentColor" /><path d="M13.8214 8.14286C13.8214 10.1439 12.902 11.9302 11.4626 13.1025C11.8104 13.2213 12.1834 13.2857 12.5714 13.2857C14.465 13.2857 16 11.7507 16 9.85715C16 8.33414 15.007 7.04306 13.633 6.5961C13.7561 7.09139 13.8214 7.6095 13.8214 8.14286Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M12.5714 8.14286C12.5714 9.91806 11.672 11.4832 10.304 12.4074L10.2902 12.4167C9.4721 12.9655 8.48773 13.2857 7.42857 13.2857L2.85714 13.2857C1.27919 13.2857 0 12.0065 0 10.4286C0 9.03717 0.994597 7.87807 2.31162 7.62345C2.57202 5.02705 4.76357 3 7.42857 3C9.67227 3 11.5804 4.43682 12.283 6.44054C12.4698 6.97334 12.5714 7.54624 12.5714 8.14286Z" fill={'currentColor'} /><path d="M13.8214 8.14286C13.8214 10.1439 12.902 11.9302 11.4626 13.1025C11.8104 13.2213 12.1834 13.2857 12.5714 13.2857C14.465 13.2857 16 11.7507 16 9.85715C16 8.33414 15.007 7.04306 13.633 6.5961C13.7561 7.09139 13.8214 7.6095 13.8214 8.14286Z" fill={'currentColor'} /></svg>;
 };
+
 Cloud.displayName = 'Cloud';
 Cloud.isGlyph = true;
+
 export default Cloud;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Code.tsx b/packages/icon/src/generated/Code.tsx
index f0fed72cee..4827e18d93 100644
--- a/packages/icon/src/generated/Code.tsx
+++ b/packages/icon/src/generated/Code.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 30e648aaf8cce9b86c913f565c132d42
+* @checksum be59bec38f0a49c5817704820003b084
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CodeProps extends LGGlyph.ComponentProps {}
+
 const Code = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CodeProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Code', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Code', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M6.10919 13.2623C6.05677 13.5335 6.23405 13.7959 6.50517 13.8484L7.24153 13.9908C7.51265 14.0433 7.77494 13.8659 7.82736 13.5946L9.92574 2.73775C9.97817 2.4665 9.80088 2.20409 9.52976 2.15164L8.7934 2.00919C8.52228 1.95674 8.25999 2.13411 8.20757 2.40536L6.10919 13.2623Z" fill="currentColor" /><path d="M1.35982 7.24558L3.97571 5.11122C4.18784 4.93814 4.50313 4.9662 4.67991 5.17391L5.32009 5.92607C5.49687 6.13378 5.46821 6.44247 5.25607 6.61556L3.56205 7.99774L5.25607 9.37993C5.46821 9.55302 5.49687 9.86171 5.32009 10.0694L4.67991 10.8216C4.50313 11.0293 4.18784 11.0574 3.97571 10.8843L1.35982 8.74991C1.13182 8.56389 1 8.28832 1 7.99774C1 7.70717 1.13182 7.4316 1.35982 7.24558Z" fill="currentColor" /><path d="M14.6362 7.24558L12.0203 5.11122C11.8082 4.93814 11.4929 4.9662 11.3161 5.17391L10.6759 5.92607C10.4991 6.13378 10.5278 6.44247 10.7399 6.61556L12.4339 7.99774L10.7399 9.37993C10.5278 9.55302 10.4991 9.86171 10.6759 10.0694L11.3161 10.8216C11.4929 11.0293 11.8082 11.0574 12.0203 10.8843L14.6362 8.74991C14.8642 8.56389 14.996 8.28832 14.996 7.99774C14.996 7.70717 14.8642 7.4316 14.6362 7.24558Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M6.10919 13.2623C6.05677 13.5335 6.23405 13.7959 6.50517 13.8484L7.24153 13.9908C7.51265 14.0433 7.77494 13.8659 7.82736 13.5946L9.92574 2.73775C9.97817 2.4665 9.80088 2.20409 9.52976 2.15164L8.7934 2.00919C8.52228 1.95674 8.25999 2.13411 8.20757 2.40536L6.10919 13.2623Z" fill={'currentColor'} /><path d="M1.35982 7.24558L3.97571 5.11122C4.18784 4.93814 4.50313 4.9662 4.67991 5.17391L5.32009 5.92607C5.49687 6.13378 5.46821 6.44247 5.25607 6.61556L3.56205 7.99774L5.25607 9.37993C5.46821 9.55302 5.49687 9.86171 5.32009 10.0694L4.67991 10.8216C4.50313 11.0293 4.18784 11.0574 3.97571 10.8843L1.35982 8.74991C1.13182 8.56389 1 8.28832 1 7.99774C1 7.70717 1.13182 7.4316 1.35982 7.24558Z" fill={'currentColor'} /><path d="M14.6362 7.24558L12.0203 5.11122C11.8082 4.93814 11.4929 4.9662 11.3161 5.17391L10.6759 5.92607C10.4991 6.13378 10.5278 6.44247 10.7399 6.61556L12.4339 7.99774L10.7399 9.37993C10.5278 9.55302 10.4991 9.86171 10.6759 10.0694L11.3161 10.8216C11.4929 11.0293 11.8082 11.0574 12.0203 10.8843L14.6362 8.74991C14.8642 8.56389 14.996 8.28832 14.996 7.99774C14.996 7.70717 14.8642 7.4316 14.6362 7.24558Z" fill={'currentColor'} /></svg>;
 };
+
 Code.displayName = 'Code';
 Code.isGlyph = true;
+
 export default Code;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CodeBlock.tsx b/packages/icon/src/generated/CodeBlock.tsx
index eb28ea3d80..d44bde9ab5 100644
--- a/packages/icon/src/generated/CodeBlock.tsx
+++ b/packages/icon/src/generated/CodeBlock.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5386522dad3a43ade4466bb31a7c5bc6
+* @checksum 3ef832e185478dc8f01e61e1bfaa4df8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CodeBlockProps extends LGGlyph.ComponentProps {}
+
 const CodeBlock = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CodeBlockProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CodeBlock', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CodeBlock', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M13 4H3L3 12H13V4ZM3 2C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H13C14.1046 14 15 13.1046 15 12V4C15 2.89543 14.1046 2 13 2H3Z" fill="currentColor" /><path d="M4.22142 7.42141L6.256 5.7796C6.42099 5.64646 6.66621 5.66804 6.80371 5.82782L7.30163 6.4064C7.43913 6.56618 7.41683 6.80364 7.25184 6.93678L5.93426 8L7.25184 9.06322C7.41683 9.19636 7.43913 9.43382 7.30163 9.59359L6.80371 10.1722C6.66621 10.332 6.42099 10.3535 6.256 10.2204L4.22142 8.57859C4.04409 8.4355 3.94156 8.22352 3.94156 8C3.94156 7.77648 4.04409 7.5645 4.22142 7.42141Z" fill="currentColor" /><path d="M11.7786 7.42141L9.74399 5.7796C9.57899 5.64646 9.33377 5.66804 9.19628 5.82782L8.69836 6.4064C8.56086 6.56618 8.58315 6.80364 8.74815 6.93678L10.0657 8L8.74815 9.06322C8.58315 9.19636 8.56086 9.43382 8.69836 9.59359L9.19628 10.1722C9.33377 10.332 9.57899 10.3535 9.74399 10.2204L11.7786 8.57859C11.9559 8.4355 12.0584 8.22352 12.0584 8C12.0584 7.77648 11.9559 7.5645 11.7786 7.42141Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13 4H3L3 12H13V4ZM3 2C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H13C14.1046 14 15 13.1046 15 12V4C15 2.89543 14.1046 2 13 2H3Z" fill={'currentColor'} /><path d="M4.22142 7.42141L6.256 5.7796C6.42099 5.64646 6.66621 5.66804 6.80371 5.82782L7.30163 6.4064C7.43913 6.56618 7.41683 6.80364 7.25184 6.93678L5.93426 8L7.25184 9.06322C7.41683 9.19636 7.43913 9.43382 7.30163 9.59359L6.80371 10.1722C6.66621 10.332 6.42099 10.3535 6.256 10.2204L4.22142 8.57859C4.04409 8.4355 3.94156 8.22352 3.94156 8C3.94156 7.77648 4.04409 7.5645 4.22142 7.42141Z" fill={'currentColor'} /><path d="M11.7786 7.42141L9.74399 5.7796C9.57899 5.64646 9.33377 5.66804 9.19628 5.82782L8.69836 6.4064C8.56086 6.56618 8.58315 6.80364 8.74815 6.93678L10.0657 8L8.74815 9.06322C8.58315 9.19636 8.56086 9.43382 8.69836 9.59359L9.19628 10.1722C9.33377 10.332 9.57899 10.3535 9.74399 10.2204L11.7786 8.57859C11.9559 8.4355 12.0584 8.22352 12.0584 8C12.0584 7.77648 11.9559 7.5645 11.7786 7.42141Z" fill={'currentColor'} /></svg>;
 };
+
 CodeBlock.displayName = 'CodeBlock';
 CodeBlock.isGlyph = true;
+
 export default CodeBlock;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Coin.tsx b/packages/icon/src/generated/Coin.tsx
index 671429b0b0..3b707aa154 100644
--- a/packages/icon/src/generated/Coin.tsx
+++ b/packages/icon/src/generated/Coin.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum acc25b6acacb32da914ddd0746bfce3f
+* @checksum cd5a4604cdbba480464f0aa6a6579974
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CoinProps extends LGGlyph.ComponentProps {}
+
 const Coin = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CoinProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Coin', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Coin', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M8 1C4.13 1 1 4.13 1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1ZM10.29 10.41C10.2 10.67 10.06 10.87 9.86 11.02C9.66 11.17 9.4 11.27 9.08 11.33C8.82 11.38 8.51 11.41 8.16 11.42L8.06 12.49H6.95L7.05 11.39C7.05 11.39 6.98 11.39 6.94 11.39C6.53 11.36 6.05 11.29 5.52 11.17L5.61 10.08C6 10.08 6.33 10.1 6.62 10.11C6.91 10.11 7.15 10.12 7.36 10.12H7.89C8.15 10.12 8.35 10.1 8.5 10.07C8.65 10.04 8.76 9.97 8.82 9.88C8.88 9.79 8.91 9.65 8.91 9.46C8.91 9.3 8.89 9.17 8.84 9.08C8.8 8.98 8.73 8.9 8.63 8.85C8.54 8.79 8.41 8.74 8.24 8.69L6.87 8.21C6.35 8.02 5.98 7.76 5.76 7.45C5.55 7.14 5.44 6.72 5.44 6.21C5.44 5.81 5.49 5.49 5.58 5.24C5.67 4.99 5.82 4.79 6.02 4.65C6.23 4.51 6.49 4.41 6.81 4.36C7.09 4.31 7.42 4.29 7.79 4.29L7.89 3.38H9L8.89 4.33C8.95 4.33 8.99 4.33 9.05 4.33C9.44 4.36 9.83 4.44 10.2 4.55L10.1 5.56C9.81 5.56 9.47 5.55 9.08 5.54C8.69 5.54 8.31 5.53 7.94 5.53C7.76 5.53 7.61 5.53 7.48 5.55C7.35 5.55 7.25 5.58 7.17 5.63L7 5.82C6.97 5.91 6.95 6.03 6.95 6.18C6.95 6.41 7 6.58 7.11 6.69C7.22 6.8 7.42 6.89 7.69 6.98L8.98 7.41C9.52 7.6 9.9 7.85 10.11 8.17C10.32 8.49 10.43 8.91 10.43 9.43C10.43 9.82 10.38 10.15 10.29 10.41Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8 1C4.13 1 1 4.13 1 8C1 11.87 4.13 15 8 15C11.87 15 15 11.87 15 8C15 4.13 11.87 1 8 1ZM10.29 10.41C10.2 10.67 10.06 10.87 9.86 11.02C9.66 11.17 9.4 11.27 9.08 11.33C8.82 11.38 8.51 11.41 8.16 11.42L8.06 12.49H6.95L7.05 11.39C7.05 11.39 6.98 11.39 6.94 11.39C6.53 11.36 6.05 11.29 5.52 11.17L5.61 10.08C6 10.08 6.33 10.1 6.62 10.11C6.91 10.11 7.15 10.12 7.36 10.12H7.89C8.15 10.12 8.35 10.1 8.5 10.07C8.65 10.04 8.76 9.97 8.82 9.88C8.88 9.79 8.91 9.65 8.91 9.46C8.91 9.3 8.89 9.17 8.84 9.08C8.8 8.98 8.73 8.9 8.63 8.85C8.54 8.79 8.41 8.74 8.24 8.69L6.87 8.21C6.35 8.02 5.98 7.76 5.76 7.45C5.55 7.14 5.44 6.72 5.44 6.21C5.44 5.81 5.49 5.49 5.58 5.24C5.67 4.99 5.82 4.79 6.02 4.65C6.23 4.51 6.49 4.41 6.81 4.36C7.09 4.31 7.42 4.29 7.79 4.29L7.89 3.38H9L8.89 4.33C8.95 4.33 8.99 4.33 9.05 4.33C9.44 4.36 9.83 4.44 10.2 4.55L10.1 5.56C9.81 5.56 9.47 5.55 9.08 5.54C8.69 5.54 8.31 5.53 7.94 5.53C7.76 5.53 7.61 5.53 7.48 5.55C7.35 5.55 7.25 5.58 7.17 5.63L7 5.82C6.97 5.91 6.95 6.03 6.95 6.18C6.95 6.41 7 6.58 7.11 6.69C7.22 6.8 7.42 6.89 7.69 6.98L8.98 7.41C9.52 7.6 9.9 7.85 10.11 8.17C10.32 8.49 10.43 8.91 10.43 9.43C10.43 9.82 10.38 10.15 10.29 10.41Z" fill={'currentColor'} /></svg>;
 };
+
 Coin.displayName = 'Coin';
 Coin.isGlyph = true;
+
 export default Coin;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Colon.tsx b/packages/icon/src/generated/Colon.tsx
index c29db41b6b..ca5e909b66 100644
--- a/packages/icon/src/generated/Colon.tsx
+++ b/packages/icon/src/generated/Colon.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7edf17e577c84d506317f7a87288b5aa
+* @checksum 0da19b04e372be9da1106a635cd2d45e
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ColonProps extends LGGlyph.ComponentProps {}
+
 const Colon = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ColonProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Colon', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Colon', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10 4.5C10 5.60457 9.10457 6.5 8 6.5C6.89543 6.5 6 5.60457 6 4.5C6 3.39543 6.89543 2.5 8 2.5C9.10457 2.5 10 3.39543 10 4.5Z" fill="currentColor" /><path d="M10 11.5C10 12.6046 9.10457 13.5 8 13.5C6.89543 13.5 6 12.6046 6 11.5C6 10.3954 6.89543 9.5 8 9.5C9.10457 9.5 10 10.3954 10 11.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10 4.5C10 5.60457 9.10457 6.5 8 6.5C6.89543 6.5 6 5.60457 6 4.5C6 3.39543 6.89543 2.5 8 2.5C9.10457 2.5 10 3.39543 10 4.5Z" fill={'currentColor'} /><path d="M10 11.5C10 12.6046 9.10457 13.5 8 13.5C6.89543 13.5 6 12.6046 6 11.5C6 10.3954 6.89543 9.5 8 9.5C9.10457 9.5 10 10.3954 10 11.5Z" fill={'currentColor'} /></svg>;
 };
+
 Colon.displayName = 'Colon';
 Colon.isGlyph = true;
+
 export default Colon;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Config.tsx b/packages/icon/src/generated/Config.tsx
index 0d5ec1768b..2c774e50b5 100644
--- a/packages/icon/src/generated/Config.tsx
+++ b/packages/icon/src/generated/Config.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9fadfbc8315f706fab1639b48cefccfe
+* @checksum 9dd3318e8e32f8c41dd7e41665788cba
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ConfigProps extends LGGlyph.ComponentProps {}
+
 const Config = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ConfigProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Config', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Config', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M12.7 2.56989C12.41 2.56989 12.17 2.80989 12.17 3.09989V4.34989L11.32 3.49989C9.21 1.39989 5.75 1.51989 3.78 3.75989C2.65 5.03989 2.23 6.82989 2.68 8.48989C3.24 10.5299 4.98 12.0099 7.08 12.2299L8.1 12.3399C8.42 13.2799 9.3 13.9499 10.34 13.9499C11.65 13.9499 12.71 12.8899 12.71 11.5799C12.71 10.2699 11.65 9.20989 10.34 9.20989C9.14 9.20989 8.16 10.0999 8 11.2599L7.19 11.1799C5.53 11.0099 4.14 9.82989 3.7 8.21989C3.34 6.90989 3.67 5.48989 4.58 4.46989C6.15 2.68989 8.9 2.59989 10.57 4.26989L11.42 5.11989H10.17C9.88 5.11989 9.64 5.35989 9.64 5.64989C9.64 5.93989 9.88 6.17989 10.17 6.17989H12.71C13 6.17989 13.24 5.93989 13.24 5.64989V3.09989C13.24 2.80989 13 2.56989 12.71 2.56989H12.7ZM10.34 10.3099C11.04 10.3099 11.6 10.8799 11.6 11.5699C11.6 12.2599 11.03 12.8299 10.34 12.8299C9.65 12.8299 9.08 12.2599 9.08 11.5699C9.08 10.8799 9.65 10.3099 10.34 10.3099Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M12.7 2.56989C12.41 2.56989 12.17 2.80989 12.17 3.09989V4.34989L11.32 3.49989C9.21 1.39989 5.75 1.51989 3.78 3.75989C2.65 5.03989 2.23 6.82989 2.68 8.48989C3.24 10.5299 4.98 12.0099 7.08 12.2299L8.1 12.3399C8.42 13.2799 9.3 13.9499 10.34 13.9499C11.65 13.9499 12.71 12.8899 12.71 11.5799C12.71 10.2699 11.65 9.20989 10.34 9.20989C9.14 9.20989 8.16 10.0999 8 11.2599L7.19 11.1799C5.53 11.0099 4.14 9.82989 3.7 8.21989C3.34 6.90989 3.67 5.48989 4.58 4.46989C6.15 2.68989 8.9 2.59989 10.57 4.26989L11.42 5.11989H10.17C9.88 5.11989 9.64 5.35989 9.64 5.64989C9.64 5.93989 9.88 6.17989 10.17 6.17989H12.71C13 6.17989 13.24 5.93989 13.24 5.64989V3.09989C13.24 2.80989 13 2.56989 12.71 2.56989H12.7ZM10.34 10.3099C11.04 10.3099 11.6 10.8799 11.6 11.5699C11.6 12.2599 11.03 12.8299 10.34 12.8299C9.65 12.8299 9.08 12.2599 9.08 11.5699C9.08 10.8799 9.65 10.3099 10.34 10.3099Z" fill={'currentColor'} /></svg>;
 };
+
 Config.displayName = 'Config';
 Config.isGlyph = true;
+
 export default Config;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Connect.tsx b/packages/icon/src/generated/Connect.tsx
index c6de807e15..6f61a91f4c 100644
--- a/packages/icon/src/generated/Connect.tsx
+++ b/packages/icon/src/generated/Connect.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0184ac81eca23f9e9fa3a02d1572db34
+* @checksum ee44cbad088bf315d888bb72b4b42852
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ConnectProps extends LGGlyph.ComponentProps {}
+
 const Connect = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ConnectProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Connect', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Connect', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M12.8674 8.89755C14.165 7.59995 14.3939 5.63211 13.554 4.09804L14.8289 2.82315C15.057 2.59505 15.057 2.22522 14.8289 1.99712L14.0029 1.17108C13.7748 0.942981 13.405 0.942983 13.1769 1.17109L11.8867 2.4612C10.3625 1.66314 8.43194 1.90377 7.15275 3.18294L5.2772 5.05844C5.26266 5.06875 5.24879 5.08041 5.23576 5.09343L3.18162 7.14751C1.90122 8.42791 1.66139 10.3609 2.46214 11.8858L1.17108 13.1769C0.942974 13.405 0.942974 13.7748 1.17108 14.0029L1.99711 14.8289C2.22521 15.057 2.59504 15.057 2.82315 14.8289L4.10098 13.5511C5.63447 14.3882 7.59986 14.1585 8.89625 12.8621L10.7718 10.9866C10.7863 10.9763 10.8002 10.9646 10.8132 10.9516L12.8674 8.89755ZM6.56112 6.77578L4.68548 8.65134C3.9392 9.39765 3.9392 10.612 4.68548 11.3583C5.43176 12.1045 6.64608 12.1046 7.39242 11.3583L9.44653 9.3042C9.45953 9.2912 9.47337 9.27956 9.48788 9.26927L11.3635 7.39371C12.1098 6.64741 12.1098 5.4331 11.3635 4.68679C10.6172 3.94051 9.40292 3.94049 8.65658 4.68679L6.60247 6.74085C6.58947 6.75385 6.57563 6.7655 6.56112 6.77578Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M12.8674 8.89755C14.165 7.59995 14.3939 5.63211 13.554 4.09804L14.8289 2.82315C15.057 2.59505 15.057 2.22522 14.8289 1.99712L14.0029 1.17108C13.7748 0.942981 13.405 0.942983 13.1769 1.17109L11.8867 2.4612C10.3625 1.66314 8.43194 1.90377 7.15275 3.18294L5.2772 5.05844C5.26266 5.06875 5.24879 5.08041 5.23576 5.09343L3.18162 7.14751C1.90122 8.42791 1.66139 10.3609 2.46214 11.8858L1.17108 13.1769C0.942974 13.405 0.942974 13.7748 1.17108 14.0029L1.99711 14.8289C2.22521 15.057 2.59504 15.057 2.82315 14.8289L4.10098 13.5511C5.63447 14.3882 7.59986 14.1585 8.89625 12.8621L10.7718 10.9866C10.7863 10.9763 10.8002 10.9646 10.8132 10.9516L12.8674 8.89755ZM6.56112 6.77578L4.68548 8.65134C3.9392 9.39765 3.9392 10.612 4.68548 11.3583C5.43176 12.1045 6.64608 12.1046 7.39242 11.3583L9.44653 9.3042C9.45953 9.2912 9.47337 9.27956 9.48788 9.26927L11.3635 7.39371C12.1098 6.64741 12.1098 5.4331 11.3635 4.68679C10.6172 3.94051 9.40292 3.94049 8.65658 4.68679L6.60247 6.74085C6.58947 6.75385 6.57563 6.7655 6.56112 6.77578Z" fill={'currentColor'} /></svg>;
 };
+
 Connect.displayName = 'Connect';
 Connect.isGlyph = true;
+
 export default Connect;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Copy.tsx b/packages/icon/src/generated/Copy.tsx
index 6a236e05e1..789fa2e8f8 100644
--- a/packages/icon/src/generated/Copy.tsx
+++ b/packages/icon/src/generated/Copy.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 757446df7bed5d8ee0b4515c2a908b82
+* @checksum 05bc1b863da3c29cd86c4b92515d801e
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CopyProps extends LGGlyph.ComponentProps {}
+
 const Copy = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CopyProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Copy', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Copy', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1 5.71428V10.2857C1 11.2325 1.76751 12 2.71429 12H5.75V7.10957C5.75 6.54414 5.97724 6.00244 6.38065 5.60623L8.67403 3.35381C8.77447 3.25516 8.88376 3.16757 9 3.09182V2.71429C9 1.76751 8.23249 1 7.28571 1H5.8V4.42857C5.8 5.13865 5.22437 5.71428 4.51429 5.71428H1ZM9 4.78571L7.25654 6.49804C7.24689 6.50752 7.23749 6.5172 7.22834 6.52708C7.22208 6.53383 7.21594 6.54068 7.20991 6.54762C7.07504 6.70295 7 6.90234 7 7.10957V7.79762H9H10.0095C10.4829 7.79762 10.8667 7.41386 10.8667 6.94047V4H10.1505C9.92587 4 9.7102 4.0882 9.54992 4.24562L9 4.78571ZM4.86667 1H4.15053C3.92587 1 3.7102 1.0882 3.54992 1.24562L1.25654 3.49804C1.09244 3.65921 1 3.87957 1 4.10957V4.79762H4.00952C4.48291 4.79762 4.86667 4.41386 4.86667 3.94047V1ZM7 12V8.71428H9H10.5143C11.2244 8.71428 11.8 8.13865 11.8 7.42857V4H13.2857C14.2325 4 15 4.76751 15 5.71429V13.2857C15 14.2325 14.2325 15 13.2857 15H8.71429C7.76751 15 7 14.2325 7 13.2857V12Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 5.71428V10.2857C1 11.2325 1.76751 12 2.71429 12H5.75V7.10957C5.75 6.54414 5.97724 6.00244 6.38065 5.60623L8.67403 3.35381C8.77447 3.25516 8.88376 3.16757 9 3.09182V2.71429C9 1.76751 8.23249 1 7.28571 1H5.8V4.42857C5.8 5.13865 5.22437 5.71428 4.51429 5.71428H1ZM9 4.78571L7.25654 6.49804C7.24689 6.50752 7.23749 6.5172 7.22834 6.52708C7.22208 6.53383 7.21594 6.54068 7.20991 6.54762C7.07504 6.70295 7 6.90234 7 7.10957V7.79762H9H10.0095C10.4829 7.79762 10.8667 7.41386 10.8667 6.94047V4H10.1505C9.92587 4 9.7102 4.0882 9.54992 4.24562L9 4.78571ZM4.86667 1H4.15053C3.92587 1 3.7102 1.0882 3.54992 1.24562L1.25654 3.49804C1.09244 3.65921 1 3.87957 1 4.10957V4.79762H4.00952C4.48291 4.79762 4.86667 4.41386 4.86667 3.94047V1ZM7 12V8.71428H9H10.5143C11.2244 8.71428 11.8 8.13865 11.8 7.42857V4H13.2857C14.2325 4 15 4.76751 15 5.71429V13.2857C15 14.2325 14.2325 15 13.2857 15H8.71429C7.76751 15 7 14.2325 7 13.2857V12Z" fill={'currentColor'} /></svg>;
 };
+
 Copy.displayName = 'Copy';
 Copy.isGlyph = true;
+
 export default Copy;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CreditCard.tsx b/packages/icon/src/generated/CreditCard.tsx
index 96be9052d0..5da62f0fae 100644
--- a/packages/icon/src/generated/CreditCard.tsx
+++ b/packages/icon/src/generated/CreditCard.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 50cfcb04ce79f8c7f4b7ab5c8594ccfc
+* @checksum 89831e72e3fc7ce0adb76d157a62bfe5
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CreditCardProps extends LGGlyph.ComponentProps {}
+
 const CreditCard = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CreditCardProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CreditCard', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CreditCard', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M3 3C1.89543 3 1 3.89543 1 5L15 5C15 3.89543 14.1046 3 13 3H3Z" fill="currentColor" /><path d="M15 7L1 7V11C1 12.1046 1.89543 13 3 13H13C14.1046 13 15 12.1046 15 11V7Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3 3C1.89543 3 1 3.89543 1 5L15 5C15 3.89543 14.1046 3 13 3H3Z" fill={'currentColor'} /><path d="M15 7L1 7V11C1 12.1046 1.89543 13 3 13H13C14.1046 13 15 12.1046 15 11V7Z" fill={'currentColor'} /></svg>;
 };
+
 CreditCard.displayName = 'CreditCard';
 CreditCard.isGlyph = true;
+
 export default CreditCard;
\ No newline at end of file
diff --git a/packages/icon/src/generated/CurlyBraces.tsx b/packages/icon/src/generated/CurlyBraces.tsx
index b7c5b82b54..0f95482542 100644
--- a/packages/icon/src/generated/CurlyBraces.tsx
+++ b/packages/icon/src/generated/CurlyBraces.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 76897dc0cfe4ff71bcce816038e398a7
+* @checksum 5cd76e271d1b186f17261ebc3cb22c16
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CurlyBracesProps extends LGGlyph.ComponentProps {}
+
 const CurlyBraces = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CurlyBracesProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'CurlyBraces', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'CurlyBraces', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M3.00003 3.54401C3.00003 2.16329 4.11933 1.04401 5.50004 1.04401H6.50002C6.77617 1.04401 7.00002 1.26786 7.00002 1.54401L7.00001 2.64918C7.00001 2.84422 6.8419 3.00233 6.64687 3.00233L5.85772 3.00233C5.38403 3.00233 5.00002 3.38633 5.00002 3.86003L5.00002 6.66157C5.00002 7.24368 4.66843 7.74835 4.18383 7.99699C4.66843 8.24563 5.00003 8.75029 5.00003 9.33241V12.1349C5.00052 12.6081 5.38434 12.9917 5.85773 12.9917H6.6469C6.84192 12.9917 7.00002 13.1497 7.00002 13.3448L7.00003 14.45C7.00003 14.7261 6.77617 14.95 6.50003 14.95H5.50004C4.11933 14.95 3.00004 13.8307 3.00004 12.45L3.00003 10.494C3.00003 9.6656 2.32845 8.99403 1.50003 8.99403C1.22389 8.99403 1.00003 8.77017 1.00003 8.49403L1 7.49402C1 7.21789 1.22385 6.99403 1.49999 6.99403C2.32842 6.99403 2.99999 6.32246 2.99999 5.49403L3.00003 3.54401Z" fill="currentColor" /><path d="M13 12.45C13 13.8307 11.8807 14.95 10.5 14.95L9.49998 14.95C9.22383 14.95 8.99998 14.7262 8.99998 14.45L8.99999 13.3448C8.99999 13.1498 9.1581 12.9917 9.35314 12.9917H10.1423C10.616 12.9917 11 12.6077 11 12.134L11 9.33245C11 8.75033 11.3316 8.24567 11.8162 7.99703C11.3316 7.74839 11 7.24372 11 6.66161V3.85915C10.9995 3.38588 10.6157 3.00236 10.1423 3.00236H9.3531C9.15808 3.00236 8.99998 2.84427 8.99998 2.64925L8.99997 1.54401C8.99997 1.26787 9.22383 1.04401 9.49997 1.04401L10.5 1.04401C11.8807 1.04401 13 2.1633 13 3.54401L13 5.49999C13 6.32842 13.6715 6.99999 14.5 6.99999C14.7761 6.99999 15 7.22385 15 7.49998L15 8.49999C15 8.77613 14.7761 8.99999 14.5 8.99999C13.6716 8.99999 13 9.67156 13 10.5L13 12.45Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3.00003 3.54401C3.00003 2.16329 4.11933 1.04401 5.50004 1.04401H6.50002C6.77617 1.04401 7.00002 1.26786 7.00002 1.54401L7.00001 2.64918C7.00001 2.84422 6.8419 3.00233 6.64687 3.00233L5.85772 3.00233C5.38403 3.00233 5.00002 3.38633 5.00002 3.86003L5.00002 6.66157C5.00002 7.24368 4.66843 7.74835 4.18383 7.99699C4.66843 8.24563 5.00003 8.75029 5.00003 9.33241V12.1349C5.00052 12.6081 5.38434 12.9917 5.85773 12.9917H6.6469C6.84192 12.9917 7.00002 13.1497 7.00002 13.3448L7.00003 14.45C7.00003 14.7261 6.77617 14.95 6.50003 14.95H5.50004C4.11933 14.95 3.00004 13.8307 3.00004 12.45L3.00003 10.494C3.00003 9.6656 2.32845 8.99403 1.50003 8.99403C1.22389 8.99403 1.00003 8.77017 1.00003 8.49403L1 7.49402C1 7.21789 1.22385 6.99403 1.49999 6.99403C2.32842 6.99403 2.99999 6.32246 2.99999 5.49403L3.00003 3.54401Z" fill={'currentColor'} /><path d="M13 12.45C13 13.8307 11.8807 14.95 10.5 14.95L9.49998 14.95C9.22383 14.95 8.99998 14.7262 8.99998 14.45L8.99999 13.3448C8.99999 13.1498 9.1581 12.9917 9.35314 12.9917H10.1423C10.616 12.9917 11 12.6077 11 12.134L11 9.33245C11 8.75033 11.3316 8.24567 11.8162 7.99703C11.3316 7.74839 11 7.24372 11 6.66161V3.85915C10.9995 3.38588 10.6157 3.00236 10.1423 3.00236H9.3531C9.15808 3.00236 8.99998 2.84427 8.99998 2.64925L8.99997 1.54401C8.99997 1.26787 9.22383 1.04401 9.49997 1.04401L10.5 1.04401C11.8807 1.04401 13 2.1633 13 3.54401L13 5.49999C13 6.32842 13.6715 6.99999 14.5 6.99999C14.7761 6.99999 15 7.22385 15 7.49998L15 8.49999C15 8.77613 14.7761 8.99999 14.5 8.99999C13.6716 8.99999 13 9.67156 13 10.5L13 12.45Z" fill={'currentColor'} /></svg>;
 };
+
 CurlyBraces.displayName = 'CurlyBraces';
 CurlyBraces.isGlyph = true;
+
 export default CurlyBraces;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Cursor.tsx b/packages/icon/src/generated/Cursor.tsx
index 499f52e37a..8ed0b2a0e1 100644
--- a/packages/icon/src/generated/Cursor.tsx
+++ b/packages/icon/src/generated/Cursor.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d503f7f7b2910c436fc8350192119667
+* @checksum a4914ab6b85f7b3a04c9eaeb81388c3d
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface CursorProps extends LGGlyph.ComponentProps {}
+
 const Cursor = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: CursorProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Cursor', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Cursor', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8.53436 8.53438L9.00697 8.26403L11.3957 6.89757L4.64845 4.64847L6.89754 11.3958L8.26401 9.00699L8.53436 8.53438ZM10 10.0001L14.4801 7.4373C15.2139 7.10378 15.1582 6.04354 14.3936 5.78866L3.16879 2.04707C2.47551 1.81597 1.81595 2.47553 2.04704 3.16881L5.78864 14.3936C6.04352 15.1582 7.10375 15.2139 7.43728 14.4801L10 10.0001Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.53436 8.53438L9.00697 8.26403L11.3957 6.89757L4.64845 4.64847L6.89754 11.3958L8.26401 9.00699L8.53436 8.53438ZM10 10.0001L14.4801 7.4373C15.2139 7.10378 15.1582 6.04354 14.3936 5.78866L3.16879 2.04707C2.47551 1.81597 1.81595 2.47553 2.04704 3.16881L5.78864 14.3936C6.04352 15.1582 7.10375 15.2139 7.43728 14.4801L10 10.0001Z" fill={'currentColor'} /></svg>;
 };
+
 Cursor.displayName = 'Cursor';
 Cursor.isGlyph = true;
+
 export default Cursor;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Dashboard.tsx b/packages/icon/src/generated/Dashboard.tsx
index 1ff6b0d04d..3264b76713 100644
--- a/packages/icon/src/generated/Dashboard.tsx
+++ b/packages/icon/src/generated/Dashboard.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 20ca1d9aa8b48ee77c0b1e1036622ed1
+* @checksum b57e16ee6552fb5ac8613fcfc5abd183
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface DashboardProps extends LGGlyph.ComponentProps {}
+
 const Dashboard = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: DashboardProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Dashboard', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Dashboard', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2 2.5C2 2.22386 2.22386 2 2.5 2H5.5C5.77614 2 6 2.22386 6 2.5V8.5C6 8.77614 5.77614 9 5.5 9H2.5C2.22386 9 2 8.77614 2 8.5V2.5Z" fill="currentColor" /><path d="M7 7.5C7 7.22386 7.22386 7 7.5 7H13.5C13.7761 7 14 7.22386 14 7.5V13.5C14 13.7761 13.7761 14 13.5 14H7.5C7.22386 14 7 13.7761 7 13.5V7.5Z" fill="currentColor" /><path d="M7 2.5C7 2.22386 7.22386 2 7.5 2H13.5C13.7761 2 14 2.22386 14 2.5V5.5C14 5.77614 13.7761 6 13.5 6H7.5C7.22386 6 7 5.77614 7 5.5V2.5Z" fill="currentColor" /><path d="M2 10.5C2 10.2239 2.22386 10 2.5 10H5.5C5.77614 10 6 10.2239 6 10.5V13.5C6 13.7761 5.77614 14 5.5 14H2.5C2.22386 14 2 13.7761 2 13.5V10.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2 2.5C2 2.22386 2.22386 2 2.5 2H5.5C5.77614 2 6 2.22386 6 2.5V8.5C6 8.77614 5.77614 9 5.5 9H2.5C2.22386 9 2 8.77614 2 8.5V2.5Z" fill={'currentColor'} /><path d="M7 7.5C7 7.22386 7.22386 7 7.5 7H13.5C13.7761 7 14 7.22386 14 7.5V13.5C14 13.7761 13.7761 14 13.5 14H7.5C7.22386 14 7 13.7761 7 13.5V7.5Z" fill={'currentColor'} /><path d="M7 2.5C7 2.22386 7.22386 2 7.5 2H13.5C13.7761 2 14 2.22386 14 2.5V5.5C14 5.77614 13.7761 6 13.5 6H7.5C7.22386 6 7 5.77614 7 5.5V2.5Z" fill={'currentColor'} /><path d="M2 10.5C2 10.2239 2.22386 10 2.5 10H5.5C5.77614 10 6 10.2239 6 10.5V13.5C6 13.7761 5.77614 14 5.5 14H2.5C2.22386 14 2 13.7761 2 13.5V10.5Z" fill={'currentColor'} /></svg>;
 };
+
 Dashboard.displayName = 'Dashboard';
 Dashboard.isGlyph = true;
+
 export default Dashboard;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Database.tsx b/packages/icon/src/generated/Database.tsx
index 1f35795758..30524f5fa5 100644
--- a/packages/icon/src/generated/Database.tsx
+++ b/packages/icon/src/generated/Database.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eb1573d4ef4842ea3d9a2e83b80bbb57
+* @checksum 97d636fb325ed66c2014825473b41cbe
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface DatabaseProps extends LGGlyph.ComponentProps {}
+
 const Database = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: DatabaseProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Database', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Database', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M13.5 4.45183C13.5 4.54132 13.4994 4.6287 13.4981 4.71402C13.4994 4.7453 13.5 4.77673 13.5 4.80831V5.03747C13.5 5.3377 13.364 5.62601 13.0672 5.90874C12.7651 6.19655 12.3171 6.45605 11.7616 6.67306C10.6519 7.10662 9.22074 7.32913 8 7.32913C6.77926 7.32913 5.34814 7.10662 4.23838 6.67306C3.68291 6.45605 3.23494 6.19655 2.93283 5.90874C2.63605 5.62601 2.5 5.3377 2.5 5.03747V4.80831C2.5 4.77292 2.5008 4.73772 2.50239 4.70273C2.5008 4.62111 2.5 4.53749 2.5 4.45183C2.5 2.51664 5.28789 1.59998 8 1.59998C10.7121 1.59998 13.5 2.51664 13.5 4.45183Z" fill="currentColor" /><path d="M2.5 6.74736V8.70414C2.5 9.00437 2.63605 9.29268 2.93283 9.57541C3.23494 9.86322 3.68291 10.1227 4.23838 10.3397C5.34814 10.7733 6.77926 10.9958 8 10.9958C9.22074 10.9958 10.6519 10.7733 11.7616 10.3397C12.3171 10.1227 12.7651 9.86322 13.0672 9.57541C13.364 9.29268 13.5 9.00437 13.5 8.70414V6.74736C13.1078 7.06499 12.6198 7.32193 12.0952 7.52688C10.8586 8.00998 9.31057 8.2458 8 8.2458C6.68943 8.2458 5.14138 8.00998 3.90481 7.52688C3.38022 7.32193 2.8922 7.06499 2.5 6.74736Z" fill="currentColor" /><path d="M12.0952 11.1935C12.6198 10.9886 13.1078 10.7317 13.5 10.414V11.225C13.5 11.2601 13.4992 11.295 13.4977 11.3297C13.4992 11.4126 13.5 11.4965 13.5 11.5814C13.5 13.5166 10.7121 14.4333 8 14.4333C5.28789 14.4333 2.5 13.5166 2.5 11.5814C2.5 11.4926 2.50063 11.405 2.50188 11.3185C2.50063 11.2875 2.5 11.2563 2.5 11.225V10.414C2.8922 10.7317 3.38022 10.9886 3.90481 11.1935C5.14138 11.6766 6.68943 11.9125 8 11.9125C9.31057 11.9125 10.8586 11.6767 12.0952 11.1935Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.5 4.45183C13.5 4.54132 13.4994 4.6287 13.4981 4.71402C13.4994 4.7453 13.5 4.77673 13.5 4.80831V5.03747C13.5 5.3377 13.364 5.62601 13.0672 5.90874C12.7651 6.19655 12.3171 6.45605 11.7616 6.67306C10.6519 7.10662 9.22074 7.32913 8 7.32913C6.77926 7.32913 5.34814 7.10662 4.23838 6.67306C3.68291 6.45605 3.23494 6.19655 2.93283 5.90874C2.63605 5.62601 2.5 5.3377 2.5 5.03747V4.80831C2.5 4.77292 2.5008 4.73772 2.50239 4.70273C2.5008 4.62111 2.5 4.53749 2.5 4.45183C2.5 2.51664 5.28789 1.59998 8 1.59998C10.7121 1.59998 13.5 2.51664 13.5 4.45183Z" fill={'currentColor'} /><path d="M2.5 6.74736V8.70414C2.5 9.00437 2.63605 9.29268 2.93283 9.57541C3.23494 9.86322 3.68291 10.1227 4.23838 10.3397C5.34814 10.7733 6.77926 10.9958 8 10.9958C9.22074 10.9958 10.6519 10.7733 11.7616 10.3397C12.3171 10.1227 12.7651 9.86322 13.0672 9.57541C13.364 9.29268 13.5 9.00437 13.5 8.70414V6.74736C13.1078 7.06499 12.6198 7.32193 12.0952 7.52688C10.8586 8.00998 9.31057 8.2458 8 8.2458C6.68943 8.2458 5.14138 8.00998 3.90481 7.52688C3.38022 7.32193 2.8922 7.06499 2.5 6.74736Z" fill={'currentColor'} /><path d="M12.0952 11.1935C12.6198 10.9886 13.1078 10.7317 13.5 10.414V11.225C13.5 11.2601 13.4992 11.295 13.4977 11.3297C13.4992 11.4126 13.5 11.4965 13.5 11.5814C13.5 13.5166 10.7121 14.4333 8 14.4333C5.28789 14.4333 2.5 13.5166 2.5 11.5814C2.5 11.4926 2.50063 11.405 2.50188 11.3185C2.50063 11.2875 2.5 11.2563 2.5 11.225V10.414C2.8922 10.7317 3.38022 10.9886 3.90481 11.1935C5.14138 11.6766 6.68943 11.9125 8 11.9125C9.31057 11.9125 10.8586 11.6767 12.0952 11.1935Z" fill={'currentColor'} /></svg>;
 };
+
 Database.displayName = 'Database';
 Database.isGlyph = true;
+
 export default Database;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Diagram.tsx b/packages/icon/src/generated/Diagram.tsx
index 089dc15034..8859f2521e 100644
--- a/packages/icon/src/generated/Diagram.tsx
+++ b/packages/icon/src/generated/Diagram.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f5cb72651982fab52d9f3b57f86d7334
+* @checksum 6d2227a5fce6c5b63afab25b9eee86be
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface DiagramProps extends LGGlyph.ComponentProps {}
+
 const Diagram = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: DiagramProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Diagram', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Diagram', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M6 2.75C6 2.33579 6.33579 2 6.75 2H9.25C9.66421 2 10 2.33579 10 2.75V4.25C10 4.66421 9.66421 5 9.25 5H8.5V7H13.25C13.6642 7 14 7.33579 14 7.75V10H14.25C14.6642 10 15 10.3358 15 10.75V12.25C15 12.6642 14.6642 13 14.25 13H12.25C11.8358 13 11.5 12.6642 11.5 12.25V10.75C11.5 10.3358 11.8358 10 12.25 10H13V8H8.5V10H9C9.41421 10 9.75 10.3358 9.75 10.75V12.25C9.75 12.6642 9.41421 13 9 13H7C6.58579 13 6.25 12.6642 6.25 12.25V10.75C6.25 10.3358 6.58579 10 7 10H7.5V8H3V10H3.75C4.16421 10 4.5 10.3358 4.5 10.75V12.25C4.5 12.6642 4.16421 13 3.75 13H1.75C1.33579 13 1 12.6642 1 12.25V10.75C1 10.3358 1.33579 10 1.75 10H2V7.75C2 7.33579 2.33579 7 2.75 7H7.5V5H6.75C6.33579 5 6 4.66421 6 4.25V2.75Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M6 2.75C6 2.33579 6.33579 2 6.75 2H9.25C9.66421 2 10 2.33579 10 2.75V4.25C10 4.66421 9.66421 5 9.25 5H8.5V7H13.25C13.6642 7 14 7.33579 14 7.75V10H14.25C14.6642 10 15 10.3358 15 10.75V12.25C15 12.6642 14.6642 13 14.25 13H12.25C11.8358 13 11.5 12.6642 11.5 12.25V10.75C11.5 10.3358 11.8358 10 12.25 10H13V8H8.5V10H9C9.41421 10 9.75 10.3358 9.75 10.75V12.25C9.75 12.6642 9.41421 13 9 13H7C6.58579 13 6.25 12.6642 6.25 12.25V10.75C6.25 10.3358 6.58579 10 7 10H7.5V8H3V10H3.75C4.16421 10 4.5 10.3358 4.5 10.75V12.25C4.5 12.6642 4.16421 13 3.75 13H1.75C1.33579 13 1 12.6642 1 12.25V10.75C1 10.3358 1.33579 10 1.75 10H2V7.75C2 7.33579 2.33579 7 2.75 7H7.5V5H6.75C6.33579 5 6 4.66421 6 4.25V2.75Z" fill={'currentColor'} /></svg>;
 };
+
 Diagram.displayName = 'Diagram';
 Diagram.isGlyph = true;
+
 export default Diagram;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Diagram2.tsx b/packages/icon/src/generated/Diagram2.tsx
index 1b5b9a316a..4cdb1e312c 100644
--- a/packages/icon/src/generated/Diagram2.tsx
+++ b/packages/icon/src/generated/Diagram2.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 61dfaebf66fe6da158506f2714d16330
+* @checksum c7a1538f0229e2bb7e7db91f9f730a87
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface Diagram2Props extends LGGlyph.ComponentProps {}
+
 const Diagram2 = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: Diagram2Props) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Diagram2', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Diagram2', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10.72 1C10.3224 1 10 1.33579 10 1.75V2H7.48C7.2149 2 7 2.22386 7 2.5V7H5V6.75C5 6.33579 4.67765 6 4.28 6H1.72C1.32235 6 1 6.33579 1 6.75V8.25C1 8.66421 1.32235 9 1.72 9H4.28C4.67765 9 5 8.66421 5 8.25V8H7V12.5C7 12.7761 7.2149 13 7.48 13H10V13.25C10 13.6642 10.3224 14 10.72 14H12.78C13.1776 14 13.5 13.6642 13.5 13.25V11.75C13.5 11.3358 13.1776 11 12.78 11H10.72C10.3224 11 10 11.3358 10 11.75V12H8V8H10V8.25C10 8.66421 10.3224 9 10.72 9H12.78C13.1776 9 13.5 8.66421 13.5 8.25V6.75C13.5 6.33579 13.1776 6 12.78 6H10.72C10.3224 6 10 6.33579 10 6.75V7H8V3H10V3.25C10 3.66421 10.3224 4 10.72 4H12.78C13.1776 4 13.5 3.66421 13.5 3.25V1.75C13.5 1.33579 13.1776 1 12.78 1L10.72 1Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.72 1C10.3224 1 10 1.33579 10 1.75V2H7.48C7.2149 2 7 2.22386 7 2.5V7H5V6.75C5 6.33579 4.67765 6 4.28 6H1.72C1.32235 6 1 6.33579 1 6.75V8.25C1 8.66421 1.32235 9 1.72 9H4.28C4.67765 9 5 8.66421 5 8.25V8H7V12.5C7 12.7761 7.2149 13 7.48 13H10V13.25C10 13.6642 10.3224 14 10.72 14H12.78C13.1776 14 13.5 13.6642 13.5 13.25V11.75C13.5 11.3358 13.1776 11 12.78 11H10.72C10.3224 11 10 11.3358 10 11.75V12H8V8H10V8.25C10 8.66421 10.3224 9 10.72 9H12.78C13.1776 9 13.5 8.66421 13.5 8.25V6.75C13.5 6.33579 13.1776 6 12.78 6H10.72C10.3224 6 10 6.33579 10 6.75V7H8V3H10V3.25C10 3.66421 10.3224 4 10.72 4H12.78C13.1776 4 13.5 3.66421 13.5 3.25V1.75C13.5 1.33579 13.1776 1 12.78 1L10.72 1Z" fill={'currentColor'} /></svg>;
 };
+
 Diagram2.displayName = 'Diagram2';
 Diagram2.isGlyph = true;
+
 export default Diagram2;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Diagram3.tsx b/packages/icon/src/generated/Diagram3.tsx
index 5740c45ebf..506874303f 100644
--- a/packages/icon/src/generated/Diagram3.tsx
+++ b/packages/icon/src/generated/Diagram3.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 703675a1797ecdf19ce09182c94e05c4
+* @checksum 4e59864826a26bef6f48f41eb551bf2e
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface Diagram3Props extends LGGlyph.ComponentProps {}
+
 const Diagram3 = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: Diagram3Props) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Diagram3', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Diagram3', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={14} viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1.75 1C1.33579 1 1 1.33579 1 1.75V3.25C1 3.66421 1.33579 4 1.75 4H4.25C4.66421 4 5 3.66421 5 3.25V1.75C5 1.33579 4.66421 1 4.25 1H1.75ZM11 1.75C11 1.33579 11.3358 1 11.75 1H14.25C14.6642 1 15 1.33579 15 1.75V3.25C15 3.66421 14.6642 4 14.25 4H11.75C11.3358 4 11 3.66421 11 3.25V1.75ZM11 10.75C11 10.3358 11.3358 10 11.75 10H14.25C14.6642 10 15 10.3358 15 10.75V12.25C15 12.6642 14.6642 13 14.25 13H11.75C11.3358 13 11 12.6642 11 12.25V10.75ZM1 10.75C1 10.3358 1.33579 10 1.75 10H4.25C4.66421 10 5 10.3358 5 10.75V12.25C5 12.6642 4.66421 13 4.25 13H1.75C1.33579 13 1 12.6642 1 12.25V10.75ZM6 5C5.44772 5 5 5.44772 5 6V8C5 8.55228 5.44772 9 6 9H10C10.5523 9 11 8.55228 11 8V6C11 5.44772 10.5523 5 10 5H6Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1.75 1C1.33579 1 1 1.33579 1 1.75V3.25C1 3.66421 1.33579 4 1.75 4H4.25C4.66421 4 5 3.66421 5 3.25V1.75C5 1.33579 4.66421 1 4.25 1H1.75ZM11 1.75C11 1.33579 11.3358 1 11.75 1H14.25C14.6642 1 15 1.33579 15 1.75V3.25C15 3.66421 14.6642 4 14.25 4H11.75C11.3358 4 11 3.66421 11 3.25V1.75ZM11 10.75C11 10.3358 11.3358 10 11.75 10H14.25C14.6642 10 15 10.3358 15 10.75V12.25C15 12.6642 14.6642 13 14.25 13H11.75C11.3358 13 11 12.6642 11 12.25V10.75ZM1 10.75C1 10.3358 1.33579 10 1.75 10H4.25C4.66421 10 5 10.3358 5 10.75V12.25C5 12.6642 4.66421 13 4.25 13H1.75C1.33579 13 1 12.6642 1 12.25V10.75ZM6 5C5.44772 5 5 5.44772 5 6V8C5 8.55228 5.44772 9 6 9H10C10.5523 9 11 8.55228 11 8V6C11 5.44772 10.5523 5 10 5H6Z" fill={'currentColor'} /></svg>;
 };
+
 Diagram3.displayName = 'Diagram3';
 Diagram3.isGlyph = true;
+
 export default Diagram3;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Disconnect.tsx b/packages/icon/src/generated/Disconnect.tsx
index 1f17855588..7ef70600d5 100644
--- a/packages/icon/src/generated/Disconnect.tsx
+++ b/packages/icon/src/generated/Disconnect.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2c0de1f29e6f85707ac47516d174ff52
+* @checksum b4881dbd1a37df3987969bf30d9550fc
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface DisconnectProps extends LGGlyph.ComponentProps {}
+
 const Disconnect = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: DisconnectProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Disconnect', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Disconnect', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M7.09293 3.67136C6.96902 3.54745 6.96902 3.34652 7.09293 3.22258L8.14018 2.17538C9.70733 0.608258 12.2573 0.608152 13.8246 2.17538C15.3918 3.74259 15.3918 6.29263 13.8246 7.85981L12.7773 8.90702C12.6534 9.03093 12.4525 9.03093 12.3286 8.90702L11.2814 7.85989C11.1575 7.73597 11.1575 7.53505 11.2814 7.41111L12.3287 6.36392C13.071 5.62155 13.071 4.41366 12.3287 3.6713C11.5864 2.92896 10.3785 2.92893 9.63606 3.6713L8.58882 4.71849C8.4649 4.84241 8.26398 4.84241 8.14004 4.71849L7.09293 3.67136Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M1.29322 1.29322C1.68419 0.902259 2.31807 0.902259 2.70903 1.29322L14.7068 13.291C15.0977 13.6819 15.0977 14.3158 14.7068 14.7068C14.3158 15.0977 13.6819 15.0977 13.291 14.7068L10.132 11.5478L7.85982 13.8245C6.29267 15.3917 3.74267 15.3918 2.17538 13.8245C0.608205 12.2573 0.608205 9.70733 2.17538 8.14015L4.44761 5.86342L1.29322 2.70903C0.902259 2.31807 0.902259 1.68419 1.29322 1.29322ZM5.94352 7.35933L3.6713 9.63604C2.92896 10.3784 2.92896 11.5863 3.6713 12.3287C4.41363 13.071 5.62155 13.071 6.36394 12.3287L8.63614 10.0519L5.94352 7.35933Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M7.09293 3.67136C6.96902 3.54745 6.96902 3.34652 7.09293 3.22258L8.14018 2.17538C9.70733 0.608258 12.2573 0.608152 13.8246 2.17538C15.3918 3.74259 15.3918 6.29263 13.8246 7.85981L12.7773 8.90702C12.6534 9.03093 12.4525 9.03093 12.3286 8.90702L11.2814 7.85989C11.1575 7.73597 11.1575 7.53505 11.2814 7.41111L12.3287 6.36392C13.071 5.62155 13.071 4.41366 12.3287 3.6713C11.5864 2.92896 10.3785 2.92893 9.63606 3.6713L8.58882 4.71849C8.4649 4.84241 8.26398 4.84241 8.14004 4.71849L7.09293 3.67136Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M1.29322 1.29322C1.68419 0.902259 2.31807 0.902259 2.70903 1.29322L14.7068 13.291C15.0977 13.6819 15.0977 14.3158 14.7068 14.7068C14.3158 15.0977 13.6819 15.0977 13.291 14.7068L10.132 11.5478L7.85982 13.8245C6.29267 15.3917 3.74267 15.3918 2.17538 13.8245C0.608205 12.2573 0.608205 9.70733 2.17538 8.14015L4.44761 5.86342L1.29322 2.70903C0.902259 2.31807 0.902259 1.68419 1.29322 1.29322ZM5.94352 7.35933L3.6713 9.63604C2.92896 10.3784 2.92896 11.5863 3.6713 12.3287C4.41363 13.071 5.62155 13.071 6.36394 12.3287L8.63614 10.0519L5.94352 7.35933Z" fill={'currentColor'} /></svg>;
 };
+
 Disconnect.displayName = 'Disconnect';
 Disconnect.isGlyph = true;
+
 export default Disconnect;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Download.tsx b/packages/icon/src/generated/Download.tsx
index 108e94a324..3ae9b5627f 100644
--- a/packages/icon/src/generated/Download.tsx
+++ b/packages/icon/src/generated/Download.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e3557fcbfdcc2f05665dab6cb7c73753
+* @checksum 15abd9cd2d76b7a08454f6a5664a03eb
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface DownloadProps extends LGGlyph.ComponentProps {}
+
 const Download = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: DownloadProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Download', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Download', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M8.86193 2.74973L8.86193 7.95618L10.0128 6.80534C10.3056 6.51255 10.7803 6.51255 11.0731 6.80534L11.2522 6.98446C11.545 7.27725 11.545 7.75195 11.2522 8.04474L8.71611 10.5808C8.70969 10.5877 8.70311 10.5946 8.69638 10.6013L8.51726 10.7804C8.22447 11.0732 7.74976 11.0732 7.45698 10.7804L4.71959 8.04302C4.4268 7.75024 4.4268 7.27553 4.71959 6.98274L4.89871 6.80362C5.1915 6.51083 5.66621 6.51083 5.95899 6.80362L7.10914 7.95377V2.74973C7.10914 2.33567 7.44481 2 7.85888 2L8.1122 2C8.52626 2 8.86193 2.33567 8.86193 2.74973Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M3 10.25C3.41421 10.25 3.75 10.5858 3.75 11V12C3.75 12.1381 3.86193 12.25 4 12.25H12C12.1381 12.25 12.25 12.1381 12.25 12V11C12.25 10.5858 12.5858 10.25 13 10.25C13.4142 10.25 13.75 10.5858 13.75 11V12C13.75 12.9665 12.9665 13.75 12 13.75H4C3.0335 13.75 2.25 12.9665 2.25 12V11C2.25 10.5858 2.58579 10.25 3 10.25Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.86193 2.74973L8.86193 7.95618L10.0128 6.80534C10.3056 6.51255 10.7803 6.51255 11.0731 6.80534L11.2522 6.98446C11.545 7.27725 11.545 7.75195 11.2522 8.04474L8.71611 10.5808C8.70969 10.5877 8.70311 10.5946 8.69638 10.6013L8.51726 10.7804C8.22447 11.0732 7.74976 11.0732 7.45698 10.7804L4.71959 8.04302C4.4268 7.75024 4.4268 7.27553 4.71959 6.98274L4.89871 6.80362C5.1915 6.51083 5.66621 6.51083 5.95899 6.80362L7.10914 7.95377V2.74973C7.10914 2.33567 7.44481 2 7.85888 2L8.1122 2C8.52626 2 8.86193 2.33567 8.86193 2.74973Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M3 10.25C3.41421 10.25 3.75 10.5858 3.75 11V12C3.75 12.1381 3.86193 12.25 4 12.25H12C12.1381 12.25 12.25 12.1381 12.25 12V11C12.25 10.5858 12.5858 10.25 13 10.25C13.4142 10.25 13.75 10.5858 13.75 11V12C13.75 12.9665 12.9665 13.75 12 13.75H4C3.0335 13.75 2.25 12.9665 2.25 12V11C2.25 10.5858 2.58579 10.25 3 10.25Z" fill={'currentColor'} /></svg>;
 };
+
 Download.displayName = 'Download';
 Download.isGlyph = true;
+
 export default Download;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Drag.tsx b/packages/icon/src/generated/Drag.tsx
index 80b382b94f..6c4e2843a3 100644
--- a/packages/icon/src/generated/Drag.tsx
+++ b/packages/icon/src/generated/Drag.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 315987e344984b22a0951bc7bec2ac20
+* @checksum f1b3653489d1a861ece13c11208d242b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface DragProps extends LGGlyph.ComponentProps {}
+
 const Drag = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: DragProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Drag', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Drag', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M7 4C7 4.55228 6.55228 5 6 5C5.44772 5 5 4.55228 5 4C5 3.44772 5.44772 3 6 3C6.55228 3 7 3.44772 7 4Z" fill="currentColor" /><path d="M11 4C11 4.55228 10.5523 5 10 5C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3C10.5523 3 11 3.44772 11 4Z" fill="currentColor" /><path d="M7 8C7 8.55228 6.55228 9 6 9C5.44772 9 5 8.55228 5 8C5 7.44772 5.44772 7 6 7C6.55228 7 7 7.44772 7 8Z" fill="currentColor" /><path d="M7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12Z" fill="currentColor" /><path d="M11 8C11 8.55228 10.5523 9 10 9C9.44772 9 9 8.55228 9 8C9 7.44772 9.44772 7 10 7C10.5523 7 11 7.44772 11 8Z" fill="currentColor" /><path d="M11 12C11 12.5523 10.5523 13 10 13C9.44772 13 9 12.5523 9 12C9 11.4477 9.44772 11 10 11C10.5523 11 11 11.4477 11 12Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M7 4C7 4.55228 6.55228 5 6 5C5.44772 5 5 4.55228 5 4C5 3.44772 5.44772 3 6 3C6.55228 3 7 3.44772 7 4Z" fill={'currentColor'} /><path d="M11 4C11 4.55228 10.5523 5 10 5C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3C10.5523 3 11 3.44772 11 4Z" fill={'currentColor'} /><path d="M7 8C7 8.55228 6.55228 9 6 9C5.44772 9 5 8.55228 5 8C5 7.44772 5.44772 7 6 7C6.55228 7 7 7.44772 7 8Z" fill={'currentColor'} /><path d="M7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12Z" fill={'currentColor'} /><path d="M11 8C11 8.55228 10.5523 9 10 9C9.44772 9 9 8.55228 9 8C9 7.44772 9.44772 7 10 7C10.5523 7 11 7.44772 11 8Z" fill={'currentColor'} /><path d="M11 12C11 12.5523 10.5523 13 10 13C9.44772 13 9 12.5523 9 12C9 11.4477 9.44772 11 10 11C10.5523 11 11 11.4477 11 12Z" fill={'currentColor'} /></svg>;
 };
+
 Drag.displayName = 'Drag';
 Drag.isGlyph = true;
+
 export default Drag;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Edit.tsx b/packages/icon/src/generated/Edit.tsx
index 3cce815c20..18e5d977c2 100644
--- a/packages/icon/src/generated/Edit.tsx
+++ b/packages/icon/src/generated/Edit.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b7cab0d99453146719f7da2929c44003
+* @checksum 9800ec8300fa1b929f132fdf4fe32cbe
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface EditProps extends LGGlyph.ComponentProps {}
+
 const Edit = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: EditProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Edit', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Edit', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10.9219 0.681233C11.2981 0.304986 11.9082 0.304986 12.2844 0.681233L13.6469 2.04375C14.0232 2.41999 14.0232 3.03001 13.6469 3.40626L12.2844 4.76877L9.55939 2.04375L8.5375 3.06563L11.2625 5.79066L4.10934 12.9438L0.362427 13.9657L1.38431 10.2188L10.9219 0.681233Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.9219 0.681233C11.2981 0.304986 11.9082 0.304986 12.2844 0.681233L13.6469 2.04375C14.0232 2.41999 14.0232 3.03001 13.6469 3.40626L12.2844 4.76877L9.55939 2.04375L8.5375 3.06563L11.2625 5.79066L4.10934 12.9438L0.362427 13.9657L1.38431 10.2188L10.9219 0.681233Z" fill={'currentColor'} /></svg>;
 };
+
 Edit.displayName = 'Edit';
 Edit.isGlyph = true;
+
 export default Edit;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Ellipsis.tsx b/packages/icon/src/generated/Ellipsis.tsx
index 0d24c8f242..3e6855c075 100644
--- a/packages/icon/src/generated/Ellipsis.tsx
+++ b/packages/icon/src/generated/Ellipsis.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7660d6fb3d24577cfced3bb912ead720
+* @checksum 9c4a3a05dd66f272132321ee5274ecf1
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface EllipsisProps extends LGGlyph.ComponentProps {}
+
 const Ellipsis = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: EllipsisProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Ellipsis', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Ellipsis', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M2.75 6C3.7165 6 4.5 6.7835 4.5 7.75C4.5 8.7165 3.7165 9.5 2.75 9.5C1.7835 9.5 1 8.7165 1 7.75C1 6.7835 1.7835 6 2.75 6ZM7.75 6C8.7165 6 9.5 6.7835 9.5 7.75C9.5 8.7165 8.7165 9.5 7.75 9.5C6.7835 9.5 6 8.7165 6 7.75C6 6.7835 6.7835 6 7.75 6ZM14.5 7.75C14.5 6.7835 13.7165 6 12.75 6C11.7835 6 11 6.7835 11 7.75C11 8.7165 11.7835 9.5 12.75 9.5C13.7165 9.5 14.5 8.7165 14.5 7.75Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M2.75 6C3.7165 6 4.5 6.7835 4.5 7.75C4.5 8.7165 3.7165 9.5 2.75 9.5C1.7835 9.5 1 8.7165 1 7.75C1 6.7835 1.7835 6 2.75 6ZM7.75 6C8.7165 6 9.5 6.7835 9.5 7.75C9.5 8.7165 8.7165 9.5 7.75 9.5C6.7835 9.5 6 8.7165 6 7.75C6 6.7835 6.7835 6 7.75 6ZM14.5 7.75C14.5 6.7835 13.7165 6 12.75 6C11.7835 6 11 6.7835 11 7.75C11 8.7165 11.7835 9.5 12.75 9.5C13.7165 9.5 14.5 8.7165 14.5 7.75Z" fill={'currentColor'} /></svg>;
 };
+
 Ellipsis.displayName = 'Ellipsis';
 Ellipsis.isGlyph = true;
+
 export default Ellipsis;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Email.tsx b/packages/icon/src/generated/Email.tsx
index 5f567b96bc..c88bad7350 100644
--- a/packages/icon/src/generated/Email.tsx
+++ b/packages/icon/src/generated/Email.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0f01463681c2106e89d98ca898c9a2a0
+* @checksum 10618a5a29b58ab33dca9152fa8c430c
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface EmailProps extends LGGlyph.ComponentProps {}
+
 const Email = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: EmailProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Email', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Email', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.49388 4L7.20766 9.05051C7.64505 9.51914 8.35419 9.51914 8.79158 9.05051L13.5054 4H2.49388Z" fill="currentColor" /><path d="M1.13324 4.25647C1.04729 4.48631 1 4.73721 1 4.99995V11C1 11.369 1.09326 11.7146 1.25591 12.0114L4.8135 8.19963L1.13324 4.25647Z" fill="currentColor" /><path d="M2.86667 13C2.5187 13 2.19297 12.898 1.91411 12.7204L5.47346 8.90674L6.69282 10.2132C7.42179 10.9943 8.6037 10.9943 9.33268 10.2132L10.6793 8.77044L14.2535 12.6C13.9415 12.8512 13.5536 13 13.1333 13H2.86667Z" fill="currentColor" /><path d="M14.8392 11.8133C14.9425 11.5648 15 11.2896 15 11V4.99995C15 4.74466 14.9554 4.50054 14.874 4.27606L11.3392 8.06332L14.8392 11.8133Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.49388 4L7.20766 9.05051C7.64505 9.51914 8.35419 9.51914 8.79158 9.05051L13.5054 4H2.49388Z" fill={'currentColor'} /><path d="M1.13324 4.25647C1.04729 4.48631 1 4.73721 1 4.99995V11C1 11.369 1.09326 11.7146 1.25591 12.0114L4.8135 8.19963L1.13324 4.25647Z" fill={'currentColor'} /><path d="M2.86667 13C2.5187 13 2.19297 12.898 1.91411 12.7204L5.47346 8.90674L6.69282 10.2132C7.42179 10.9943 8.6037 10.9943 9.33268 10.2132L10.6793 8.77044L14.2535 12.6C13.9415 12.8512 13.5536 13 13.1333 13H2.86667Z" fill={'currentColor'} /><path d="M14.8392 11.8133C14.9425 11.5648 15 11.2896 15 11V4.99995C15 4.74466 14.9554 4.50054 14.874 4.27606L11.3392 8.06332L14.8392 11.8133Z" fill={'currentColor'} /></svg>;
 };
+
 Email.displayName = 'Email';
 Email.isGlyph = true;
+
 export default Email;
\ No newline at end of file
diff --git a/packages/icon/src/generated/EmptyDatabase.tsx b/packages/icon/src/generated/EmptyDatabase.tsx
index 7a5cc25e38..179310366b 100644
--- a/packages/icon/src/generated/EmptyDatabase.tsx
+++ b/packages/icon/src/generated/EmptyDatabase.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 191affe38345c5ac4e8dade5731ed200
+* @checksum 5fc98bf5c4985c91316dfeeca0d0b1a4
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface EmptyDatabaseProps extends LGGlyph.ComponentProps {}
+
 const EmptyDatabase = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: EmptyDatabaseProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'EmptyDatabase', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'EmptyDatabase', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7.5076 1.60749C7.65108 1.60258 7.79684 1.6001 7.94477 1.6001C8.09386 1.6001 8.24086 1.60262 8.38565 1.6076C8.79962 1.62183 9.12367 1.96896 9.10944 2.38293C9.09521 2.7969 8.74808 3.12094 8.33411 3.10671C8.20677 3.10233 8.07695 3.1001 7.94477 3.1001C7.81361 3.1001 7.68494 3.1023 7.55885 3.10661C7.14487 3.12076 6.79781 2.79664 6.78366 2.38267C6.76951 1.9687 7.09363 1.62164 7.5076 1.60749ZM6.22702 2.44453C6.33363 2.84479 6.09558 3.25569 5.69532 3.3623C5.44384 3.42928 5.21813 3.50667 5.01884 3.59163C4.6378 3.75406 4.19723 3.57685 4.0348 3.19582C3.87236 2.81478 4.04957 2.37421 4.4306 2.21178C4.70259 2.09583 4.99664 1.99609 5.30926 1.91283C5.70952 1.80622 6.12041 2.04427 6.22702 2.44453ZM9.68375 2.4478C9.7895 2.04731 10.1999 1.80839 10.6004 1.91415C10.9145 1.9971 11.2105 2.09628 11.4846 2.21139C11.8665 2.37176 12.0461 2.81136 11.8858 3.19327C11.7254 3.57518 11.2858 3.75478 10.9039 3.59442C10.7008 3.50916 10.4717 3.43158 10.2174 3.36443C9.81691 3.25868 9.57799 2.84829 9.68375 2.4478ZM12.462 3.52915C12.8556 3.40016 13.2793 3.61467 13.4083 4.00828C13.4757 4.21408 13.5109 4.42898 13.5109 4.64941C13.5109 4.86988 13.4764 5.08588 13.4029 5.293C13.2643 5.68335 12.8355 5.88747 12.4452 5.74892C12.0548 5.61036 11.8507 5.1816 11.9893 4.79125C12.0016 4.75666 12.0109 4.71148 12.0109 4.64941C12.0109 4.59034 12.0018 4.533 11.9829 4.47543C11.8539 4.08181 12.0684 3.65815 12.462 3.52915ZM3.47822 3.52968C3.87322 3.65438 4.09235 4.07567 3.96765 4.47067C3.94918 4.52918 3.94 4.58817 3.94 4.64941C3.94 4.70884 3.94906 4.7523 3.96103 4.78591C4.1 5.17611 3.89634 5.60509 3.50613 5.74406C3.11593 5.88304 2.68695 5.67937 2.54797 5.28917C2.47477 5.08363 2.44 4.86895 2.44 4.64941C2.44 4.4333 2.47316 4.22209 2.53723 4.01912C2.66193 3.62412 3.08322 3.40499 3.47822 3.52968ZM4.10042 5.91355C4.21305 5.51494 4.6275 5.28312 5.0261 5.39575C5.23484 5.45474 5.46953 5.50827 5.73012 5.55697C6.13729 5.63306 6.40567 6.02482 6.32958 6.43199C6.25348 6.83915 5.86172 7.10753 5.45456 7.03144C5.16019 6.97643 4.87998 6.9132 4.61821 6.83923C4.2196 6.72659 3.98778 6.31215 4.10042 5.91355ZM11.8289 5.92656C11.9389 6.32588 11.7045 6.73883 11.3051 6.8489C11.0414 6.92162 10.7584 6.9838 10.46 7.03795C10.0525 7.11192 9.66211 6.84149 9.58814 6.43394C9.51417 6.02638 9.7846 5.63603 10.1922 5.56206C10.4572 5.51395 10.6952 5.46109 10.9065 5.40284C11.3058 5.29276 11.7188 5.52724 11.8289 5.92656ZM6.80347 6.4788C6.84074 6.06627 7.20537 5.76205 7.6179 5.79932C7.72557 5.80904 7.83491 5.81847 7.94587 5.82766C8.05862 5.81866 8.16958 5.80942 8.27873 5.7999C8.69138 5.76392 9.05507 6.06926 9.09105 6.48191C9.12704 6.89456 8.82169 7.25825 8.40904 7.29423C8.27596 7.30584 8.14077 7.317 8.00358 7.32779C7.96371 7.33092 7.92366 7.33087 7.8838 7.32762C7.74838 7.31657 7.61472 7.30514 7.48295 7.29323C7.07042 7.25597 6.7662 6.89133 6.80347 6.4788Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M3.76945 9.31366C3.93133 8.93239 4.37164 8.75454 4.75291 8.91641C4.98254 9.01391 5.23645 9.09728 5.50262 9.16779C5.90302 9.27387 6.14162 9.68445 6.03554 10.0849C5.92946 10.4853 5.51888 10.7239 5.11848 10.6178C4.80042 10.5335 4.47639 10.4286 4.1667 10.2971C3.78543 10.1352 3.60757 9.69494 3.76945 9.31366ZM12.2243 9.32973C12.3825 9.71254 12.2005 10.1511 11.8177 10.3093C11.5048 10.4386 11.1774 10.5418 10.8559 10.6246C10.4548 10.728 10.0459 10.4867 9.94248 10.0855C9.83911 9.68444 10.0805 9.27548 10.4816 9.1721C10.7523 9.10232 11.0108 9.01974 11.2447 8.92307C11.6275 8.76486 12.0661 8.94693 12.2243 9.32973ZM6.77957 10.1849C6.80522 9.77144 7.16116 9.45709 7.57458 9.48275C7.70493 9.49083 7.80922 9.4952 7.87976 9.49752C7.915 9.49869 7.94174 9.49934 7.95902 9.49969L7.97456 9.49997L7.99052 9.49969C8.00809 9.49934 8.03523 9.4987 8.07097 9.49755C8.14249 9.49525 8.24816 9.49094 8.38021 9.48297C8.79367 9.45799 9.14909 9.77292 9.17406 10.1864C9.19904 10.5998 8.88411 10.9553 8.47065 10.9802C8.32308 10.9892 8.20324 10.9941 8.11916 10.9968C8.0771 10.9981 8.04391 10.9989 8.02061 10.9994L7.99316 10.9999L7.98522 11L7.98272 11L7.98151 11H7.96737L7.96593 11L7.96343 11L7.95548 10.9999L7.92816 10.9994C7.90499 10.9989 7.87203 10.9981 7.83029 10.9967C7.74684 10.994 7.62799 10.9889 7.48168 10.9799C7.06827 10.9542 6.75392 10.5983 6.77957 10.1849Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M3 6.85005C3.41421 6.85005 3.75 7.18584 3.75 7.60005V8.22861C3.75 8.64282 3.41421 8.97861 3 8.97861C2.58579 8.97861 2.25 8.64282 2.25 8.22861V7.60005C2.25 7.18584 2.58579 6.85005 3 6.85005ZM13 6.85005C13.4142 6.85005 13.75 7.18584 13.75 7.60005V8.22861C13.75 8.64282 13.4142 8.97861 13 8.97861C12.5858 8.97861 12.25 8.64282 12.25 8.22861V7.60005C12.25 7.18584 12.5858 6.85005 13 6.85005ZM3 10.6214C3.41421 10.6214 3.75 10.9572 3.75 11.3714V11.7228C3.75972 11.7327 3.76966 11.7425 3.77984 11.7524C4.0771 12.0409 4.08424 12.5157 3.79578 12.8129C3.50732 13.1102 3.0325 13.1173 2.73524 12.8289C2.61288 12.7102 2.50042 12.5838 2.4 12.45C2.30263 12.3201 2.25 12.1622 2.25 12V11.3714C2.25 10.9572 2.58579 10.6214 3 10.6214ZM13 10.6214C13.4142 10.6214 13.75 10.9572 13.75 11.3714V12C13.75 12.1622 13.6974 12.3201 13.6 12.45C13.494 12.5912 13.3727 12.7208 13.2422 12.8393C12.9355 13.1177 12.4612 13.0949 12.1827 12.7883C11.9043 12.4816 11.9271 12.0073 12.2337 11.7288C12.2393 11.7238 12.2447 11.7188 12.25 11.7139V11.3714C12.25 10.9572 12.5858 10.6214 13 10.6214ZM11.7533 12.9525C11.8873 13.3444 11.6783 13.7708 11.2864 13.9049C11.0264 13.9938 10.7562 14.0727 10.4803 14.1409C10.0782 14.2403 9.67167 13.9949 9.57228 13.5928C9.4729 13.1907 9.7183 12.7841 10.1204 12.6847C10.3566 12.6264 10.5847 12.5596 10.8009 12.4857C11.1928 12.3516 11.6192 12.5606 11.7533 12.9525ZM4.22533 13.0017C4.35896 12.6096 4.78512 12.4001 5.17719 12.5338C5.38606 12.605 5.61107 12.6688 5.85122 12.7239C6.25496 12.8164 6.50721 13.2188 6.41464 13.6225C6.32206 14.0262 5.91972 14.2785 5.51599 14.1859C5.22886 14.1201 4.95403 14.0424 4.69326 13.9536C4.3012 13.8199 4.0917 13.3938 4.22533 13.0017ZM9.13633 13.6577C9.15486 14.0715 8.83443 14.422 8.42063 14.4405C8.2798 14.4468 8.13941 14.4501 8 14.4501C7.8606 14.4501 7.72277 14.4478 7.5866 14.4434C7.1726 14.4301 6.84782 14.0836 6.86118 13.6696C6.87455 13.2556 7.22099 12.9308 7.63499 12.9442C7.75487 12.9481 7.87657 12.9501 8 12.9501C8.11625 12.9501 8.23426 12.9474 8.35353 12.942C8.76733 12.9235 9.1178 13.2439 9.13633 13.6577Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.5076 1.60749C7.65108 1.60258 7.79684 1.6001 7.94477 1.6001C8.09386 1.6001 8.24086 1.60262 8.38565 1.6076C8.79962 1.62183 9.12367 1.96896 9.10944 2.38293C9.09521 2.7969 8.74808 3.12094 8.33411 3.10671C8.20677 3.10233 8.07695 3.1001 7.94477 3.1001C7.81361 3.1001 7.68494 3.1023 7.55885 3.10661C7.14487 3.12076 6.79781 2.79664 6.78366 2.38267C6.76951 1.9687 7.09363 1.62164 7.5076 1.60749ZM6.22702 2.44453C6.33363 2.84479 6.09558 3.25569 5.69532 3.3623C5.44384 3.42928 5.21813 3.50667 5.01884 3.59163C4.6378 3.75406 4.19723 3.57685 4.0348 3.19582C3.87236 2.81478 4.04957 2.37421 4.4306 2.21178C4.70259 2.09583 4.99664 1.99609 5.30926 1.91283C5.70952 1.80622 6.12041 2.04427 6.22702 2.44453ZM9.68375 2.4478C9.7895 2.04731 10.1999 1.80839 10.6004 1.91415C10.9145 1.9971 11.2105 2.09628 11.4846 2.21139C11.8665 2.37176 12.0461 2.81136 11.8858 3.19327C11.7254 3.57518 11.2858 3.75478 10.9039 3.59442C10.7008 3.50916 10.4717 3.43158 10.2174 3.36443C9.81691 3.25868 9.57799 2.84829 9.68375 2.4478ZM12.462 3.52915C12.8556 3.40016 13.2793 3.61467 13.4083 4.00828C13.4757 4.21408 13.5109 4.42898 13.5109 4.64941C13.5109 4.86988 13.4764 5.08588 13.4029 5.293C13.2643 5.68335 12.8355 5.88747 12.4452 5.74892C12.0548 5.61036 11.8507 5.1816 11.9893 4.79125C12.0016 4.75666 12.0109 4.71148 12.0109 4.64941C12.0109 4.59034 12.0018 4.533 11.9829 4.47543C11.8539 4.08181 12.0684 3.65815 12.462 3.52915ZM3.47822 3.52968C3.87322 3.65438 4.09235 4.07567 3.96765 4.47067C3.94918 4.52918 3.94 4.58817 3.94 4.64941C3.94 4.70884 3.94906 4.7523 3.96103 4.78591C4.1 5.17611 3.89634 5.60509 3.50613 5.74406C3.11593 5.88304 2.68695 5.67937 2.54797 5.28917C2.47477 5.08363 2.44 4.86895 2.44 4.64941C2.44 4.4333 2.47316 4.22209 2.53723 4.01912C2.66193 3.62412 3.08322 3.40499 3.47822 3.52968ZM4.10042 5.91355C4.21305 5.51494 4.6275 5.28312 5.0261 5.39575C5.23484 5.45474 5.46953 5.50827 5.73012 5.55697C6.13729 5.63306 6.40567 6.02482 6.32958 6.43199C6.25348 6.83915 5.86172 7.10753 5.45456 7.03144C5.16019 6.97643 4.87998 6.9132 4.61821 6.83923C4.2196 6.72659 3.98778 6.31215 4.10042 5.91355ZM11.8289 5.92656C11.9389 6.32588 11.7045 6.73883 11.3051 6.8489C11.0414 6.92162 10.7584 6.9838 10.46 7.03795C10.0525 7.11192 9.66211 6.84149 9.58814 6.43394C9.51417 6.02638 9.7846 5.63603 10.1922 5.56206C10.4572 5.51395 10.6952 5.46109 10.9065 5.40284C11.3058 5.29276 11.7188 5.52724 11.8289 5.92656ZM6.80347 6.4788C6.84074 6.06627 7.20537 5.76205 7.6179 5.79932C7.72557 5.80904 7.83491 5.81847 7.94587 5.82766C8.05862 5.81866 8.16958 5.80942 8.27873 5.7999C8.69138 5.76392 9.05507 6.06926 9.09105 6.48191C9.12704 6.89456 8.82169 7.25825 8.40904 7.29423C8.27596 7.30584 8.14077 7.317 8.00358 7.32779C7.96371 7.33092 7.92366 7.33087 7.8838 7.32762C7.74838 7.31657 7.61472 7.30514 7.48295 7.29323C7.07042 7.25597 6.7662 6.89133 6.80347 6.4788Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M3.76945 9.31366C3.93133 8.93239 4.37164 8.75454 4.75291 8.91641C4.98254 9.01391 5.23645 9.09728 5.50262 9.16779C5.90302 9.27387 6.14162 9.68445 6.03554 10.0849C5.92946 10.4853 5.51888 10.7239 5.11848 10.6178C4.80042 10.5335 4.47639 10.4286 4.1667 10.2971C3.78543 10.1352 3.60757 9.69494 3.76945 9.31366ZM12.2243 9.32973C12.3825 9.71254 12.2005 10.1511 11.8177 10.3093C11.5048 10.4386 11.1774 10.5418 10.8559 10.6246C10.4548 10.728 10.0459 10.4867 9.94248 10.0855C9.83911 9.68444 10.0805 9.27548 10.4816 9.1721C10.7523 9.10232 11.0108 9.01974 11.2447 8.92307C11.6275 8.76486 12.0661 8.94693 12.2243 9.32973ZM6.77957 10.1849C6.80522 9.77144 7.16116 9.45709 7.57458 9.48275C7.70493 9.49083 7.80922 9.4952 7.87976 9.49752C7.915 9.49869 7.94174 9.49934 7.95902 9.49969L7.97456 9.49997L7.99052 9.49969C8.00809 9.49934 8.03523 9.4987 8.07097 9.49755C8.14249 9.49525 8.24816 9.49094 8.38021 9.48297C8.79367 9.45799 9.14909 9.77292 9.17406 10.1864C9.19904 10.5998 8.88411 10.9553 8.47065 10.9802C8.32308 10.9892 8.20324 10.9941 8.11916 10.9968C8.0771 10.9981 8.04391 10.9989 8.02061 10.9994L7.99316 10.9999L7.98522 11L7.98272 11L7.98151 11H7.96737L7.96593 11L7.96343 11L7.95548 10.9999L7.92816 10.9994C7.90499 10.9989 7.87203 10.9981 7.83029 10.9967C7.74684 10.994 7.62799 10.9889 7.48168 10.9799C7.06827 10.9542 6.75392 10.5983 6.77957 10.1849Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M3 6.85005C3.41421 6.85005 3.75 7.18584 3.75 7.60005V8.22861C3.75 8.64282 3.41421 8.97861 3 8.97861C2.58579 8.97861 2.25 8.64282 2.25 8.22861V7.60005C2.25 7.18584 2.58579 6.85005 3 6.85005ZM13 6.85005C13.4142 6.85005 13.75 7.18584 13.75 7.60005V8.22861C13.75 8.64282 13.4142 8.97861 13 8.97861C12.5858 8.97861 12.25 8.64282 12.25 8.22861V7.60005C12.25 7.18584 12.5858 6.85005 13 6.85005ZM3 10.6214C3.41421 10.6214 3.75 10.9572 3.75 11.3714V11.7228C3.75972 11.7327 3.76966 11.7425 3.77984 11.7524C4.0771 12.0409 4.08424 12.5157 3.79578 12.8129C3.50732 13.1102 3.0325 13.1173 2.73524 12.8289C2.61288 12.7102 2.50042 12.5838 2.4 12.45C2.30263 12.3201 2.25 12.1622 2.25 12V11.3714C2.25 10.9572 2.58579 10.6214 3 10.6214ZM13 10.6214C13.4142 10.6214 13.75 10.9572 13.75 11.3714V12C13.75 12.1622 13.6974 12.3201 13.6 12.45C13.494 12.5912 13.3727 12.7208 13.2422 12.8393C12.9355 13.1177 12.4612 13.0949 12.1827 12.7883C11.9043 12.4816 11.9271 12.0073 12.2337 11.7288C12.2393 11.7238 12.2447 11.7188 12.25 11.7139V11.3714C12.25 10.9572 12.5858 10.6214 13 10.6214ZM11.7533 12.9525C11.8873 13.3444 11.6783 13.7708 11.2864 13.9049C11.0264 13.9938 10.7562 14.0727 10.4803 14.1409C10.0782 14.2403 9.67167 13.9949 9.57228 13.5928C9.4729 13.1907 9.7183 12.7841 10.1204 12.6847C10.3566 12.6264 10.5847 12.5596 10.8009 12.4857C11.1928 12.3516 11.6192 12.5606 11.7533 12.9525ZM4.22533 13.0017C4.35896 12.6096 4.78512 12.4001 5.17719 12.5338C5.38606 12.605 5.61107 12.6688 5.85122 12.7239C6.25496 12.8164 6.50721 13.2188 6.41464 13.6225C6.32206 14.0262 5.91972 14.2785 5.51599 14.1859C5.22886 14.1201 4.95403 14.0424 4.69326 13.9536C4.3012 13.8199 4.0917 13.3938 4.22533 13.0017ZM9.13633 13.6577C9.15486 14.0715 8.83443 14.422 8.42063 14.4405C8.2798 14.4468 8.13941 14.4501 8 14.4501C7.8606 14.4501 7.72277 14.4478 7.5866 14.4434C7.1726 14.4301 6.84782 14.0836 6.86118 13.6696C6.87455 13.2556 7.22099 12.9308 7.63499 12.9442C7.75487 12.9481 7.87657 12.9501 8 12.9501C8.11625 12.9501 8.23426 12.9474 8.35353 12.942C8.76733 12.9235 9.1178 13.2439 9.13633 13.6577Z" fill={'currentColor'} /></svg>;
 };
+
 EmptyDatabase.displayName = 'EmptyDatabase';
 EmptyDatabase.isGlyph = true;
+
 export default EmptyDatabase;
\ No newline at end of file
diff --git a/packages/icon/src/generated/EmptyFolder.tsx b/packages/icon/src/generated/EmptyFolder.tsx
index fc8e3cd83f..654eaf6fc0 100644
--- a/packages/icon/src/generated/EmptyFolder.tsx
+++ b/packages/icon/src/generated/EmptyFolder.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 27e4808c89a2df3b3b4222901edb8ad0
+* @checksum aec21676700ca7ba61ad7ff95f62929c
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface EmptyFolderProps extends LGGlyph.ComponentProps {}
+
 const EmptyFolder = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: EmptyFolderProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'EmptyFolder', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'EmptyFolder', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M14.19 10.19C13.78 10.19 13.44 9.85 13.44 9.44V8.49C13.44 8.08 13.78 7.74 14.19 7.74C14.6 7.74 14.94 8.08 14.94 8.49V9.44C14.94 9.85 14.6 10.19 14.19 10.19Z" fill="currentColor" /><path d="M14.19 7.08C13.78 7.08 13.44 6.74 13.44 6.33V5.47H11.32C10.91 5.47 10.57 5.13 10.57 4.72C10.57 4.31 10.91 3.97 11.32 3.97H14.19C14.6 3.97 14.94 4.31 14.94 4.72V6.33C14.94 6.74 14.6 7.08 14.19 7.08Z" fill="currentColor" /><path d="M14.19 13.89H12.55C12.14 13.89 11.8 13.55 11.8 13.14C11.8 12.73 12.14 12.39 12.55 12.39H13.44V11.5C13.44 11.09 13.78 10.75 14.19 10.75C14.6 10.75 14.94 11.09 14.94 11.5V13.14C14.94 13.55 14.6 13.89 14.19 13.89Z" fill="currentColor" /><path d="M8.94 5.47H8.42C7.72 5.47 7.23 5.06 7.02 4.72C7.02 4.72 6.46 3.84 6.25 3.51H5.84C5.43 3.51 5.09 3.17 5.09 2.76C5.09 2.35 5.43 2.01 5.84 2.01H6.41C6.58 2.02 7.15 2.09 7.51 2.67C7.68 2.95 8.31 3.92 8.31 3.92C8.32 3.93 8.37 3.97 8.44 3.97H8.96C9.37 3.97 9.71 4.31 9.71 4.72C9.71 5.13 9.36 5.47 8.94 5.47Z" fill="currentColor" /><path d="M1.75 5.29C1.34 5.29 1 4.95 1 4.54V2.75C1 2.34 1.34 2 1.75 2H3.74C4.15 2 4.49 2.34 4.49 2.75C4.49 3.16 4.15 3.5 3.73 3.5H2.5V4.53C2.5 4.95 2.16 5.29 1.75 5.29Z" fill="currentColor" /><path d="M1.75 10.08C1.34 10.08 1 9.74 1 9.33V6.58C1 6.17 1.34 5.83 1.75 5.83C2.16 5.83 2.5 6.17 2.5 6.58V9.33C2.5 9.74 2.16 10.08 1.75 10.08Z" fill="currentColor" /><path d="M3.39 13.89H1.75C1.34 13.89 1 13.55 1 13.14V11.5C1 11.09 1.34 10.75 1.75 10.75C2.16 10.75 2.5 11.09 2.5 11.5V12.39H3.39C3.8 12.39 4.14 12.73 4.14 13.14C4.14 13.55 3.8 13.89 3.39 13.89Z" fill="currentColor" /><path d="M6.96 13.89H5.7C5.29 13.89 4.95 13.55 4.95 13.14C4.95 12.73 5.29 12.39 5.7 12.39H6.96C7.37 12.39 7.71 12.73 7.71 13.14C7.71 13.55 7.37 13.89 6.96 13.89Z" fill="currentColor" /><path d="M10.33 13.89H9.06C8.65 13.89 8.31 13.55 8.31 13.14C8.31 12.73 8.65 12.39 9.06 12.39H10.33C10.74 12.39 11.08 12.73 11.08 13.14C11.08 13.55 10.74 13.89 10.33 13.89Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M14.19 10.19C13.78 10.19 13.44 9.85 13.44 9.44V8.49C13.44 8.08 13.78 7.74 14.19 7.74C14.6 7.74 14.94 8.08 14.94 8.49V9.44C14.94 9.85 14.6 10.19 14.19 10.19Z" fill={'currentColor'} /><path d="M14.19 7.08C13.78 7.08 13.44 6.74 13.44 6.33V5.47H11.32C10.91 5.47 10.57 5.13 10.57 4.72C10.57 4.31 10.91 3.97 11.32 3.97H14.19C14.6 3.97 14.94 4.31 14.94 4.72V6.33C14.94 6.74 14.6 7.08 14.19 7.08Z" fill={'currentColor'} /><path d="M14.19 13.89H12.55C12.14 13.89 11.8 13.55 11.8 13.14C11.8 12.73 12.14 12.39 12.55 12.39H13.44V11.5C13.44 11.09 13.78 10.75 14.19 10.75C14.6 10.75 14.94 11.09 14.94 11.5V13.14C14.94 13.55 14.6 13.89 14.19 13.89Z" fill={'currentColor'} /><path d="M8.94 5.47H8.42C7.72 5.47 7.23 5.06 7.02 4.72C7.02 4.72 6.46 3.84 6.25 3.51H5.84C5.43 3.51 5.09 3.17 5.09 2.76C5.09 2.35 5.43 2.01 5.84 2.01H6.41C6.58 2.02 7.15 2.09 7.51 2.67C7.68 2.95 8.31 3.92 8.31 3.92C8.32 3.93 8.37 3.97 8.44 3.97H8.96C9.37 3.97 9.71 4.31 9.71 4.72C9.71 5.13 9.36 5.47 8.94 5.47Z" fill={'currentColor'} /><path d="M1.75 5.29C1.34 5.29 1 4.95 1 4.54V2.75C1 2.34 1.34 2 1.75 2H3.74C4.15 2 4.49 2.34 4.49 2.75C4.49 3.16 4.15 3.5 3.73 3.5H2.5V4.53C2.5 4.95 2.16 5.29 1.75 5.29Z" fill={'currentColor'} /><path d="M1.75 10.08C1.34 10.08 1 9.74 1 9.33V6.58C1 6.17 1.34 5.83 1.75 5.83C2.16 5.83 2.5 6.17 2.5 6.58V9.33C2.5 9.74 2.16 10.08 1.75 10.08Z" fill={'currentColor'} /><path d="M3.39 13.89H1.75C1.34 13.89 1 13.55 1 13.14V11.5C1 11.09 1.34 10.75 1.75 10.75C2.16 10.75 2.5 11.09 2.5 11.5V12.39H3.39C3.8 12.39 4.14 12.73 4.14 13.14C4.14 13.55 3.8 13.89 3.39 13.89Z" fill={'currentColor'} /><path d="M6.96 13.89H5.7C5.29 13.89 4.95 13.55 4.95 13.14C4.95 12.73 5.29 12.39 5.7 12.39H6.96C7.37 12.39 7.71 12.73 7.71 13.14C7.71 13.55 7.37 13.89 6.96 13.89Z" fill={'currentColor'} /><path d="M10.33 13.89H9.06C8.65 13.89 8.31 13.55 8.31 13.14C8.31 12.73 8.65 12.39 9.06 12.39H10.33C10.74 12.39 11.08 12.73 11.08 13.14C11.08 13.55 10.74 13.89 10.33 13.89Z" fill={'currentColor'} /></svg>;
 };
+
 EmptyFolder.displayName = 'EmptyFolder';
 EmptyFolder.isGlyph = true;
+
 export default EmptyFolder;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Eraser.tsx b/packages/icon/src/generated/Eraser.tsx
index 7f2e592665..f6a3a92efc 100644
--- a/packages/icon/src/generated/Eraser.tsx
+++ b/packages/icon/src/generated/Eraser.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 543c08fb00bf1c1d2c2b4f041d804f59
+* @checksum cb354d8fbd33bfc38d5681e6d5c59e96
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface EraserProps extends LGGlyph.ComponentProps {}
+
 const Eraser = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: EraserProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Eraser', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Eraser', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8.38107 1.93409C9.14619 1.16833 10.4326 1.1689 11.1977 1.93409L14.4259 5.16224C15.1917 5.92736 15.1911 7.21373 14.4259 7.97892L9.16814 13.2367H14.4569C14.7476 13.2367 14.9832 13.4723 14.9832 13.763V14.1138C14.9832 14.4045 14.7476 14.6401 14.4569 14.6401H4.9478C4.76172 14.6401 4.58325 14.5662 4.45166 14.4347L1.57442 11.558C0.808347 10.793 0.808811 9.50634 1.5741 8.74105L8.38107 1.93409ZM8.09997 12.3201C8.29523 12.1248 8.29523 11.8082 8.09997 11.613L4.74703 8.26001C4.55177 8.06475 4.23519 8.06475 4.03993 8.26001L2.56649 9.73345C2.34893 9.95101 2.34939 10.3485 2.56617 10.565L5.08428 13.0826C5.18298 13.1812 5.31682 13.2367 5.45638 13.2367H6.96536C7.10494 13.2367 7.2388 13.1812 7.3375 13.0825L8.09997 12.3201Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.38107 1.93409C9.14619 1.16833 10.4326 1.1689 11.1977 1.93409L14.4259 5.16224C15.1917 5.92736 15.1911 7.21373 14.4259 7.97892L9.16814 13.2367H14.4569C14.7476 13.2367 14.9832 13.4723 14.9832 13.763V14.1138C14.9832 14.4045 14.7476 14.6401 14.4569 14.6401H4.9478C4.76172 14.6401 4.58325 14.5662 4.45166 14.4347L1.57442 11.558C0.808347 10.793 0.808811 9.50634 1.5741 8.74105L8.38107 1.93409ZM8.09997 12.3201C8.29523 12.1248 8.29523 11.8082 8.09997 11.613L4.74703 8.26001C4.55177 8.06475 4.23519 8.06475 4.03993 8.26001L2.56649 9.73345C2.34893 9.95101 2.34939 10.3485 2.56617 10.565L5.08428 13.0826C5.18298 13.1812 5.31682 13.2367 5.45638 13.2367H6.96536C7.10494 13.2367 7.2388 13.1812 7.3375 13.0825L8.09997 12.3201Z" fill={'currentColor'} /></svg>;
 };
+
 Eraser.displayName = 'Eraser';
 Eraser.isGlyph = true;
+
 export default Eraser;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Escalation.tsx b/packages/icon/src/generated/Escalation.tsx
index e07bc0ce0d..e6c8a7ee15 100644
--- a/packages/icon/src/generated/Escalation.tsx
+++ b/packages/icon/src/generated/Escalation.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2cb3bf9191d63dec9f01a2c35a440bb2
+* @checksum ba20b2b995b4ee6d8def5918751ed0b9
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface EscalationProps extends LGGlyph.ComponentProps {}
+
 const Escalation = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: EscalationProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Escalation', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Escalation', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M13.361 4.42325C13.719 4.11978 13.5628 3.53659 13.101 3.4528L5.14569 2.00923C4.74464 1.93645 4.40436 2.30596 4.50985 2.69966L6.29744 9.37104C6.40294 9.76474 6.88238 9.9146 7.19331 9.65105L13.361 4.42325ZM2.91191 2.10161C2.61554 2.18103 2.43965 2.48567 2.51907 2.78204L5.68249 14.5881C5.7619 14.8845 6.06654 15.0603 6.36292 14.9809C6.6593 14.9015 6.83518 14.5969 6.75576 14.3005L3.59234 2.49446C3.51293 2.19808 3.20829 2.0222 2.91191 2.10161Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13.361 4.42325C13.719 4.11978 13.5628 3.53659 13.101 3.4528L5.14569 2.00923C4.74464 1.93645 4.40436 2.30596 4.50985 2.69966L6.29744 9.37104C6.40294 9.76474 6.88238 9.9146 7.19331 9.65105L13.361 4.42325ZM2.91191 2.10161C2.61554 2.18103 2.43965 2.48567 2.51907 2.78204L5.68249 14.5881C5.7619 14.8845 6.06654 15.0603 6.36292 14.9809C6.6593 14.9015 6.83518 14.5969 6.75576 14.3005L3.59234 2.49446C3.51293 2.19808 3.20829 2.0222 2.91191 2.10161Z" fill={'currentColor'} /></svg>;
 };
+
 Escalation.displayName = 'Escalation';
 Escalation.isGlyph = true;
+
 export default Escalation;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Export.tsx b/packages/icon/src/generated/Export.tsx
index d55b10dfef..c4df8515a2 100644
--- a/packages/icon/src/generated/Export.tsx
+++ b/packages/icon/src/generated/Export.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9bbfaead3792ee03dcb656e8926b60ba
+* @checksum 6e15f7d51898214ae82f63f4314e1daf
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ExportProps extends LGGlyph.ComponentProps {}
+
 const Export = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ExportProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Export', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Export', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M14.6225 5.18606C14.7258 5.07863 14.7258 4.90873 14.6225 4.80131L11.8181 1.88563C11.645 1.70566 11.3409 1.82825 11.3409 2.07801V3.50192C7.82458 3.58637 5 6.46333 5 10V10.1C5 10.9284 5.67157 11.6 6.5 11.6C7.32843 11.6 8 10.9284 8 10.1V10C8 8.12032 9.48177 6.58672 11.3409 6.50356V7.90935C11.3409 8.15911 11.645 8.2817 11.8181 8.10173L14.6225 5.18606Z" fill="currentColor" /><path d="M6.5 3.87895C6.5 3.46474 6.16421 3.12895 5.75 3.12895H4C2.89543 3.12895 2 4.02438 2 5.12895V11.9929C2 13.0975 2.89543 13.9929 4 13.9929H10.864C11.9686 13.9929 12.864 13.0975 12.864 11.9929V10.05C12.864 9.6358 12.5282 9.30002 12.114 9.30002C11.6998 9.30002 11.364 9.6358 11.364 10.05V11.9929C11.364 12.2691 11.1401 12.4929 10.864 12.4929H4C3.72386 12.4929 3.5 12.2691 3.5 11.9929V5.12895C3.5 4.85281 3.72386 4.62895 4 4.62895H5.75C6.16421 4.62895 6.5 4.29317 6.5 3.87895Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M14.6225 5.18606C14.7258 5.07863 14.7258 4.90873 14.6225 4.80131L11.8181 1.88563C11.645 1.70566 11.3409 1.82825 11.3409 2.07801V3.50192C7.82458 3.58637 5 6.46333 5 10V10.1C5 10.9284 5.67157 11.6 6.5 11.6C7.32843 11.6 8 10.9284 8 10.1V10C8 8.12032 9.48177 6.58672 11.3409 6.50356V7.90935C11.3409 8.15911 11.645 8.2817 11.8181 8.10173L14.6225 5.18606Z" fill={'currentColor'} /><path d="M6.5 3.87895C6.5 3.46474 6.16421 3.12895 5.75 3.12895H4C2.89543 3.12895 2 4.02438 2 5.12895V11.9929C2 13.0975 2.89543 13.9929 4 13.9929H10.864C11.9686 13.9929 12.864 13.0975 12.864 11.9929V10.05C12.864 9.6358 12.5282 9.30002 12.114 9.30002C11.6998 9.30002 11.364 9.6358 11.364 10.05V11.9929C11.364 12.2691 11.1401 12.4929 10.864 12.4929H4C3.72386 12.4929 3.5 12.2691 3.5 11.9929V5.12895C3.5 4.85281 3.72386 4.62895 4 4.62895H5.75C6.16421 4.62895 6.5 4.29317 6.5 3.87895Z" fill={'currentColor'} /></svg>;
 };
+
 Export.displayName = 'Export';
 Export.isGlyph = true;
+
 export default Export;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Favorite.tsx b/packages/icon/src/generated/Favorite.tsx
index 631528563c..6aa2e26385 100644
--- a/packages/icon/src/generated/Favorite.tsx
+++ b/packages/icon/src/generated/Favorite.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9105c932e585d948b3be9537b45867ba
+* @checksum 7ea20aa0e2d1e0a4bdb94d1ee83e1d9b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FavoriteProps extends LGGlyph.ComponentProps {}
+
 const Favorite = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FavoriteProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Favorite', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Favorite', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M7.53827 1.55798C7.70907 1.14734 8.2908 1.14734 8.46159 1.55798L9.99868 5.25357C10.0706 5.42669 10.2334 5.54498 10.4203 5.55996L14.41 5.87981C14.8534 5.91535 15.0331 6.46861 14.6954 6.75794L11.6556 9.3618C11.5132 9.48377 11.4511 9.67516 11.4946 9.85754L12.4232 13.7508C12.5264 14.1834 12.0558 14.5253 11.6763 14.2935L8.26056 12.2072C8.10055 12.1095 7.89931 12.1095 7.73931 12.2072L4.32356 14.2935C3.94401 14.5253 3.47339 14.1834 3.57658 13.7508L4.50527 9.85754C4.54877 9.67516 4.48659 9.48377 4.34419 9.3618L1.30446 6.75794C0.96669 6.46861 1.14645 5.91535 1.58978 5.87981L5.57948 5.55996C5.76638 5.54498 5.92918 5.42669 6.00119 5.25357L7.53827 1.55798Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M7.53827 1.55798C7.70907 1.14734 8.2908 1.14734 8.46159 1.55798L9.99868 5.25357C10.0706 5.42669 10.2334 5.54498 10.4203 5.55996L14.41 5.87981C14.8534 5.91535 15.0331 6.46861 14.6954 6.75794L11.6556 9.3618C11.5132 9.48377 11.4511 9.67516 11.4946 9.85754L12.4232 13.7508C12.5264 14.1834 12.0558 14.5253 11.6763 14.2935L8.26056 12.2072C8.10055 12.1095 7.89931 12.1095 7.73931 12.2072L4.32356 14.2935C3.94401 14.5253 3.47339 14.1834 3.57658 13.7508L4.50527 9.85754C4.54877 9.67516 4.48659 9.48377 4.34419 9.3618L1.30446 6.75794C0.96669 6.46861 1.14645 5.91535 1.58978 5.87981L5.57948 5.55996C5.76638 5.54498 5.92918 5.42669 6.00119 5.25357L7.53827 1.55798Z" fill={'currentColor'} /></svg>;
 };
+
 Favorite.displayName = 'Favorite';
 Favorite.isGlyph = true;
+
 export default Favorite;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Federation.tsx b/packages/icon/src/generated/Federation.tsx
index a24217983a..2a8409ea76 100644
--- a/packages/icon/src/generated/Federation.tsx
+++ b/packages/icon/src/generated/Federation.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 30ad3a76c1480a237c9aa289c33049ba
+* @checksum aab4618c8279f52edfe088aa78b3b02d
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FederationProps extends LGGlyph.ComponentProps {}
+
 const Federation = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FederationProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Federation', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Federation', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M9.33297 4.19058C9.33297 4.89542 8.76158 5.4668 8.05674 5.4668C7.3519 5.4668 6.78051 4.89542 6.78051 4.19058C6.78051 3.48574 7.3519 2.91435 8.05674 2.91435C8.76158 2.91435 9.33297 3.48574 9.33297 4.19058ZM9.01391 7.23507C10.3084 6.82851 11.2473 5.61919 11.2473 4.19058C11.2473 2.42848 9.81884 1.00002 8.05674 1.00002C6.29464 1.00002 4.86618 2.42848 4.86618 4.19058C4.86618 5.61919 5.80512 6.82851 7.09957 7.23507L7.09957 8.86181L5.39438 9.8463C5.21435 9.67476 5.01126 9.52169 4.78638 9.39185C3.26036 8.51081 1.30904 9.03366 0.427987 10.5597C-0.453063 12.0857 0.0697915 14.037 1.59581 14.9181C3.12184 15.7991 5.07316 15.2763 5.95421 13.7502C6.35888 13.0493 6.46738 12.2587 6.31853 11.5232L8.05034 10.5234L9.69164 11.471C9.40129 12.7926 9.9793 14.2054 11.2136 14.9181C12.7396 15.7991 14.691 15.2763 15.572 13.7502C16.4531 12.2242 15.9302 10.2729 14.4042 9.39185C13.1641 8.67587 11.6431 8.88702 10.6439 9.81025L9.01391 8.8692V7.23507ZM12.1708 13.2602C11.5604 12.9078 11.3512 12.1273 11.7037 11.5168C12.0561 10.9064 12.8366 10.6973 13.447 11.0497C14.0574 11.4021 14.2666 12.1827 13.9141 12.7931C13.5617 13.4035 12.7812 13.6126 12.1708 13.2602ZM2.08585 11.5168C1.73343 12.1273 1.94257 12.9078 2.55298 13.2602C3.16339 13.6126 3.94392 13.4035 4.29634 12.7931C4.64876 12.1827 4.43962 11.4021 3.82921 11.0497C3.2188 10.6973 2.43827 10.9064 2.08585 11.5168Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M9.33297 4.19058C9.33297 4.89542 8.76158 5.4668 8.05674 5.4668C7.3519 5.4668 6.78051 4.89542 6.78051 4.19058C6.78051 3.48574 7.3519 2.91435 8.05674 2.91435C8.76158 2.91435 9.33297 3.48574 9.33297 4.19058ZM9.01391 7.23507C10.3084 6.82851 11.2473 5.61919 11.2473 4.19058C11.2473 2.42848 9.81884 1.00002 8.05674 1.00002C6.29464 1.00002 4.86618 2.42848 4.86618 4.19058C4.86618 5.61919 5.80512 6.82851 7.09957 7.23507L7.09957 8.86181L5.39438 9.8463C5.21435 9.67476 5.01126 9.52169 4.78638 9.39185C3.26036 8.51081 1.30904 9.03366 0.427987 10.5597C-0.453063 12.0857 0.0697915 14.037 1.59581 14.9181C3.12184 15.7991 5.07316 15.2763 5.95421 13.7502C6.35888 13.0493 6.46738 12.2587 6.31853 11.5232L8.05034 10.5234L9.69164 11.471C9.40129 12.7926 9.9793 14.2054 11.2136 14.9181C12.7396 15.7991 14.691 15.2763 15.572 13.7502C16.4531 12.2242 15.9302 10.2729 14.4042 9.39185C13.1641 8.67587 11.6431 8.88702 10.6439 9.81025L9.01391 8.8692V7.23507ZM12.1708 13.2602C11.5604 12.9078 11.3512 12.1273 11.7037 11.5168C12.0561 10.9064 12.8366 10.6973 13.447 11.0497C14.0574 11.4021 14.2666 12.1827 13.9141 12.7931C13.5617 13.4035 12.7812 13.6126 12.1708 13.2602ZM2.08585 11.5168C1.73343 12.1273 1.94257 12.9078 2.55298 13.2602C3.16339 13.6126 3.94392 13.4035 4.29634 12.7931C4.64876 12.1827 4.43962 11.4021 3.82921 11.0497C3.2188 10.6973 2.43827 10.9064 2.08585 11.5168Z" fill={'currentColor'} /></svg>;
 };
+
 Federation.displayName = 'Federation';
 Federation.isGlyph = true;
+
 export default Federation;
\ No newline at end of file
diff --git a/packages/icon/src/generated/File.tsx b/packages/icon/src/generated/File.tsx
index 0edfc2216b..8d7f9e06d6 100644
--- a/packages/icon/src/generated/File.tsx
+++ b/packages/icon/src/generated/File.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a638451083c2d992bcceca9c9a011ad5
+* @checksum 245338732cd9707d91e0e7e1e78b5dae
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FileProps extends LGGlyph.ComponentProps {}
+
 const File = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FileProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'File', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'File', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M3 13V7H7.5C8.32843 7 9 6.32843 9 5.5V1H11C12.1046 1 13 1.89543 13 3V8.98388C13 8.98924 13 9 13 9V13C13 14.1046 12.1046 15 11 15H5C3.89543 15 3 14.1046 3 13Z" fill="currentColor" /><path d="M7.83333 1H6.91421C6.649 1 6.39464 1.10536 6.20711 1.29289L3.29289 4.20711C3.10536 4.39464 3 4.649 3 4.91421V5.83333H6.83333C7.38562 5.83333 7.83333 5.38562 7.83333 4.83333V1Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3 13V7H7.5C8.32843 7 9 6.32843 9 5.5V1H11C12.1046 1 13 1.89543 13 3V8.98388C13 8.98924 13 9 13 9V13C13 14.1046 12.1046 15 11 15H5C3.89543 15 3 14.1046 3 13Z" fill={'currentColor'} /><path d="M7.83333 1H6.91421C6.649 1 6.39464 1.10536 6.20711 1.29289L3.29289 4.20711C3.10536 4.39464 3 4.649 3 4.91421V5.83333H6.83333C7.38562 5.83333 7.83333 5.38562 7.83333 4.83333V1Z" fill={'currentColor'} /></svg>;
 };
+
 File.displayName = 'File';
 File.isGlyph = true;
+
 export default File;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Filter.tsx b/packages/icon/src/generated/Filter.tsx
index 5ed6607ef7..8f1e530b5f 100644
--- a/packages/icon/src/generated/Filter.tsx
+++ b/packages/icon/src/generated/Filter.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a700d27f7ce1179149146df351bc239f
+* @checksum 1cc18bf75b74f7da69313598c23cadfc
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FilterProps extends LGGlyph.ComponentProps {}
+
 const Filter = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FilterProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Filter', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Filter', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M6 6.14834L2.19955 2.20776C1.79746 1.79085 2.04373 1 2.57564 1H13.4244C13.9563 1 14.2025 1.79085 13.8005 2.20776L10 6.14834V11.7731C10 11.9173 9.93776 12.0545 9.82925 12.1494L6.82925 14.7744C6.50596 15.0573 6 14.8277 6 14.3981V6.14834Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M6 6.14834L2.19955 2.20776C1.79746 1.79085 2.04373 1 2.57564 1H13.4244C13.9563 1 14.2025 1.79085 13.8005 2.20776L10 6.14834V11.7731C10 11.9173 9.93776 12.0545 9.82925 12.1494L6.82925 14.7744C6.50596 15.0573 6 14.8277 6 14.3981V6.14834Z" fill={'currentColor'} /></svg>;
 };
+
 Filter.displayName = 'Filter';
 Filter.isGlyph = true;
+
 export default Filter;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Folder.tsx b/packages/icon/src/generated/Folder.tsx
index 6907b5b773..e3099641db 100644
--- a/packages/icon/src/generated/Folder.tsx
+++ b/packages/icon/src/generated/Folder.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 56c2bfa5ef7bbe055848858525fc9511
+* @checksum 6501d5acde9f811b76a7e39ff4bfd4d9
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FolderProps extends LGGlyph.ComponentProps {}
+
 const Folder = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FolderProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Folder', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Folder', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2 2C1.44772 2 1 2.44772 1 3V13C1 13.5523 1.44772 14 2 14H14C14.5523 14 15 13.5523 15 13V5C15 4.44772 14.5523 4 14 4H8C7.44772 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2H2Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2 2C1.44772 2 1 2.44772 1 3V13C1 13.5523 1.44772 14 2 14H14C14.5523 14 15 13.5523 15 13V5C15 4.44772 14.5523 4 14 4H8C7.44772 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2H2Z" fill={'currentColor'} /></svg>;
 };
+
 Folder.displayName = 'Folder';
 Folder.isGlyph = true;
+
 export default Folder;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Format.tsx b/packages/icon/src/generated/Format.tsx
index b369a07264..53e4d11bf3 100644
--- a/packages/icon/src/generated/Format.tsx
+++ b/packages/icon/src/generated/Format.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5449b4343d7881f7455f49c709a7ea95
+* @checksum 479a608c9e60aac8654e2ef50c0a8b50
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FormatProps extends LGGlyph.ComponentProps {}
+
 const Format = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FormatProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Format', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Format', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2 4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H5C5.26522 3 5.51957 3.10536 5.70711 3.29289C5.89464 3.48043 6 3.73478 6 4C6 4.26522 5.89464 4.51957 5.70711 4.70711C5.51957 4.89464 5.26522 5 5 5H3C2.73478 5 2.48043 4.89464 2.29289 4.70711C2.10536 4.51957 2 4.26522 2 4ZM2 8C2 7.73478 2.10536 7.48043 2.29289 7.29289C2.48043 7.10536 2.73478 7 3 7H9C9.26522 7 9.51957 7.10536 9.70711 7.29289C9.89464 7.48043 10 7.73478 10 8C10 8.26522 9.89464 8.51957 9.70711 8.70711C9.51957 8.89464 9.26522 9 9 9H3C2.73478 9 2.48043 8.89464 2.29289 8.70711C2.10536 8.51957 2 8.26522 2 8ZM3 11C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H13C13.2652 13 13.5196 12.8946 13.7071 12.7071C13.8946 12.5196 14 12.2652 14 12C14 11.7348 13.8946 11.4804 13.7071 11.2929C13.5196 11.1054 13.2652 11 13 11H3ZM7 4C7 3.73478 7.10536 3.48043 7.29289 3.29289C7.48043 3.10536 7.73478 3 8 3H13C13.2652 3 13.5196 3.10536 13.7071 3.29289C13.8946 3.48043 14 3.73478 14 4C14 4.26522 13.8946 4.51957 13.7071 4.70711C13.5196 4.89464 13.2652 5 13 5H8C7.73478 5 7.48043 4.89464 7.29289 4.70711C7.10536 4.51957 7 4.26522 7 4ZM11 8C11 7.73478 11.1054 7.48043 11.2929 7.29289C11.4804 7.10536 11.7348 7 12 7H13C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8C14 8.26522 13.8946 8.51957 13.7071 8.70711C13.5196 8.89464 13.2652 9 13 9H12C11.7348 9 11.4804 8.89464 11.2929 8.70711C11.1054 8.51957 11 8.26522 11 8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2 4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H5C5.26522 3 5.51957 3.10536 5.70711 3.29289C5.89464 3.48043 6 3.73478 6 4C6 4.26522 5.89464 4.51957 5.70711 4.70711C5.51957 4.89464 5.26522 5 5 5H3C2.73478 5 2.48043 4.89464 2.29289 4.70711C2.10536 4.51957 2 4.26522 2 4ZM2 8C2 7.73478 2.10536 7.48043 2.29289 7.29289C2.48043 7.10536 2.73478 7 3 7H9C9.26522 7 9.51957 7.10536 9.70711 7.29289C9.89464 7.48043 10 7.73478 10 8C10 8.26522 9.89464 8.51957 9.70711 8.70711C9.51957 8.89464 9.26522 9 9 9H3C2.73478 9 2.48043 8.89464 2.29289 8.70711C2.10536 8.51957 2 8.26522 2 8ZM3 11C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H13C13.2652 13 13.5196 12.8946 13.7071 12.7071C13.8946 12.5196 14 12.2652 14 12C14 11.7348 13.8946 11.4804 13.7071 11.2929C13.5196 11.1054 13.2652 11 13 11H3ZM7 4C7 3.73478 7.10536 3.48043 7.29289 3.29289C7.48043 3.10536 7.73478 3 8 3H13C13.2652 3 13.5196 3.10536 13.7071 3.29289C13.8946 3.48043 14 3.73478 14 4C14 4.26522 13.8946 4.51957 13.7071 4.70711C13.5196 4.89464 13.2652 5 13 5H8C7.73478 5 7.48043 4.89464 7.29289 4.70711C7.10536 4.51957 7 4.26522 7 4ZM11 8C11 7.73478 11.1054 7.48043 11.2929 7.29289C11.4804 7.10536 11.7348 7 12 7H13C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8C14 8.26522 13.8946 8.51957 13.7071 8.70711C13.5196 8.89464 13.2652 9 13 9H12C11.7348 9 11.4804 8.89464 11.2929 8.70711C11.1054 8.51957 11 8.26522 11 8Z" fill={'currentColor'} /></svg>;
 };
+
 Format.displayName = 'Format';
 Format.isGlyph = true;
+
 export default Format;
\ No newline at end of file
diff --git a/packages/icon/src/generated/FullScreenEnter.tsx b/packages/icon/src/generated/FullScreenEnter.tsx
index a55f866c8e..eb3b86d16a 100644
--- a/packages/icon/src/generated/FullScreenEnter.tsx
+++ b/packages/icon/src/generated/FullScreenEnter.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 795d59ef8fca2a4eefe2b1721a9a8a13
+* @checksum 4cdf202af84d50946e3631fa550eb877
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FullScreenEnterProps extends LGGlyph.ComponentProps {}
+
 const FullScreenEnter = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FullScreenEnterProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'FullScreenEnter', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'FullScreenEnter', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M1.5 2C1.22386 2 1 2.22386 1 2.5V6.5C1 6.77614 1.22386 7 1.5 7H2.5C2.77614 7 3 6.77614 3 6.5V4.5C3 4.22386 3.22386 4 3.5 4H5.5C5.77614 4 6 3.77614 6 3.5V2.5C6 2.22386 5.77614 2 5.5 2H1.5Z" fill="currentColor" /><path d="M15 2.5C15 2.22386 14.7761 2 14.5 2H10.5C10.2239 2 10 2.22386 10 2.5V3.5C10 3.77614 10.2239 4 10.5 4L12.5 4C12.7761 4 13 4.22386 13 4.5V6.5C13 6.77614 13.2239 7 13.5 7H14.5C14.7761 7 15 6.77614 15 6.5V2.5Z" fill="currentColor" /><path d="M1.5 14C1.22386 14 1 13.7761 1 13.5V9.5C1 9.22386 1.22386 9 1.5 9H2.5C2.77614 9 3 9.22386 3 9.5L3 11.5C3 11.7761 3.22386 12 3.5 12H5.5C5.77614 12 6 12.2239 6 12.5V13.5C6 13.7761 5.77614 14 5.5 14H1.5Z" fill="currentColor" /><path d="M14.5 14C14.7761 14 15 13.7761 15 13.5V9.5C15 9.22386 14.7761 9 14.5 9H13.5C13.2239 9 13 9.22386 13 9.5V11.5C13 11.7761 12.7761 12 12.5 12H10.5C10.2239 12 10 12.2239 10 12.5V13.5C10 13.7761 10.2239 14 10.5 14H14.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M1.5 2C1.22386 2 1 2.22386 1 2.5V6.5C1 6.77614 1.22386 7 1.5 7H2.5C2.77614 7 3 6.77614 3 6.5V4.5C3 4.22386 3.22386 4 3.5 4H5.5C5.77614 4 6 3.77614 6 3.5V2.5C6 2.22386 5.77614 2 5.5 2H1.5Z" fill={'currentColor'} /><path d="M15 2.5C15 2.22386 14.7761 2 14.5 2H10.5C10.2239 2 10 2.22386 10 2.5V3.5C10 3.77614 10.2239 4 10.5 4L12.5 4C12.7761 4 13 4.22386 13 4.5V6.5C13 6.77614 13.2239 7 13.5 7H14.5C14.7761 7 15 6.77614 15 6.5V2.5Z" fill={'currentColor'} /><path d="M1.5 14C1.22386 14 1 13.7761 1 13.5V9.5C1 9.22386 1.22386 9 1.5 9H2.5C2.77614 9 3 9.22386 3 9.5L3 11.5C3 11.7761 3.22386 12 3.5 12H5.5C5.77614 12 6 12.2239 6 12.5V13.5C6 13.7761 5.77614 14 5.5 14H1.5Z" fill={'currentColor'} /><path d="M14.5 14C14.7761 14 15 13.7761 15 13.5V9.5C15 9.22386 14.7761 9 14.5 9H13.5C13.2239 9 13 9.22386 13 9.5V11.5C13 11.7761 12.7761 12 12.5 12H10.5C10.2239 12 10 12.2239 10 12.5V13.5C10 13.7761 10.2239 14 10.5 14H14.5Z" fill={'currentColor'} /></svg>;
 };
+
 FullScreenEnter.displayName = 'FullScreenEnter';
 FullScreenEnter.isGlyph = true;
+
 export default FullScreenEnter;
\ No newline at end of file
diff --git a/packages/icon/src/generated/FullScreenExit.tsx b/packages/icon/src/generated/FullScreenExit.tsx
index a3a1e8559f..9f38f43e9f 100644
--- a/packages/icon/src/generated/FullScreenExit.tsx
+++ b/packages/icon/src/generated/FullScreenExit.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f484aadc94c0e228875b2f1c8b628a14
+* @checksum c73afd418de2b4edd25df4fa141cacc8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FullScreenExitProps extends LGGlyph.ComponentProps {}
+
 const FullScreenExit = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FullScreenExitProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'FullScreenExit', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'FullScreenExit', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M10.5 7C10.2239 7 10 6.77614 10 6.5V2.5C10 2.22386 10.2239 2 10.5 2H11.5C11.7761 2 12 2.22386 12 2.5V4.5C12 4.77614 12.2239 5 12.5 5L14.5 5C14.7761 5 15 5.22386 15 5.5V6.5C15 6.77614 14.7761 7 14.5 7H10.5Z" fill="currentColor" /><path d="M6 9.5C6 9.22386 5.77614 9 5.5 9H1.5C1.22386 9 1 9.22386 1 9.5V10.5C1 10.7761 1.22386 11 1.5 11H3.5C3.77614 11 4 11.2239 4 11.5L4 13.5C4 13.7761 4.22386 14 4.5 14H5.5C5.77614 14 6 13.7761 6 13.5V9.5Z" fill="currentColor" /><path d="M10.5 9C10.2239 9 10 9.22386 10 9.5V13.5C10 13.7761 10.2239 14 10.5 14H11.5C11.7761 14 12 13.7761 12 13.5V11.5C12 11.2239 12.2239 11 12.5 11H14.5C14.7761 11 15 10.7761 15 10.5V9.5C15 9.22386 14.7761 9 14.5 9H10.5Z" fill="currentColor" /><path d="M5.5 7C5.77614 7 6 6.77614 6 6.5L6 2.5C6 2.22386 5.77614 2 5.5 2H4.5C4.22386 2 4 2.22386 4 2.5L4 4.5C4 4.77614 3.77614 5 3.5 5L1.5 5C1.22386 5 1 5.22386 1 5.5V6.5C1 6.77614 1.22386 7 1.5 7L5.5 7Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.5 7C10.2239 7 10 6.77614 10 6.5V2.5C10 2.22386 10.2239 2 10.5 2H11.5C11.7761 2 12 2.22386 12 2.5V4.5C12 4.77614 12.2239 5 12.5 5L14.5 5C14.7761 5 15 5.22386 15 5.5V6.5C15 6.77614 14.7761 7 14.5 7H10.5Z" fill={'currentColor'} /><path d="M6 9.5C6 9.22386 5.77614 9 5.5 9H1.5C1.22386 9 1 9.22386 1 9.5V10.5C1 10.7761 1.22386 11 1.5 11H3.5C3.77614 11 4 11.2239 4 11.5L4 13.5C4 13.7761 4.22386 14 4.5 14H5.5C5.77614 14 6 13.7761 6 13.5V9.5Z" fill={'currentColor'} /><path d="M10.5 9C10.2239 9 10 9.22386 10 9.5V13.5C10 13.7761 10.2239 14 10.5 14H11.5C11.7761 14 12 13.7761 12 13.5V11.5C12 11.2239 12.2239 11 12.5 11H14.5C14.7761 11 15 10.7761 15 10.5V9.5C15 9.22386 14.7761 9 14.5 9H10.5Z" fill={'currentColor'} /><path d="M5.5 7C5.77614 7 6 6.77614 6 6.5L6 2.5C6 2.22386 5.77614 2 5.5 2H4.5C4.22386 2 4 2.22386 4 2.5L4 4.5C4 4.77614 3.77614 5 3.5 5L1.5 5C1.22386 5 1 5.22386 1 5.5V6.5C1 6.77614 1.22386 7 1.5 7L5.5 7Z" fill={'currentColor'} /></svg>;
 };
+
 FullScreenExit.displayName = 'FullScreenExit';
 FullScreenExit.isGlyph = true;
+
 export default FullScreenExit;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Function.tsx b/packages/icon/src/generated/Function.tsx
index f9a615c21c..28ce86d50a 100644
--- a/packages/icon/src/generated/Function.tsx
+++ b/packages/icon/src/generated/Function.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0766fa669545a73f1261d2950d77510d
+* @checksum 362c7b14efc762eb8ed5ad8f72263072
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface FunctionProps extends LGGlyph.ComponentProps {}
+
 const Function = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: FunctionProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Function', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Function', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8.97109 5.02989C9.32595 5.15463 9.77919 5.42309 10.0605 5.97407C10.1155 6.08185 10.368 6.46167 10.7732 7.03828C11.1598 7.58843 11.6451 8.26217 12.1217 8.91773C12.5979 9.57275 13.0637 10.2073 13.4106 10.6782C13.584 10.9136 13.7276 11.108 13.8278 11.2435L13.984 11.4545L13.9846 11.4553L12.7798 12.3489L12.6218 12.1354C12.5211 11.9992 12.3769 11.8041 12.2029 11.5678C11.8549 11.0954 11.3871 10.4582 10.9085 9.7998C10.4302 9.14196 9.93934 8.46062 9.54588 7.90065C9.17103 7.36716 8.83973 6.88184 8.72449 6.6561C8.66525 6.54006 8.57608 6.48101 8.47365 6.44501C8.42075 6.42641 8.37145 6.41719 8.33713 6.41294C8.32305 6.4112 8.31288 6.41047 8.30776 6.41018L8.30594 6.41008H3.67899V4.91008H8.30604L8.30853 4.91007L8.32622 4.91018C8.33953 4.91036 8.3559 4.91079 8.37501 4.91167C8.41313 4.91344 8.4628 4.91705 8.52139 4.9243C8.63728 4.93865 8.79534 4.96811 8.97109 5.02989Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M14.4976 5.97967L8.13926 12.348L7.07778 11.2881L13.4361 4.91984L14.4976 5.97967Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M10.0554 1.23222C10.0554 1.23222 10.0557 1.23235 9.80834 1.94037C9.56094 2.64839 9.56127 2.64851 9.56127 2.64851L9.56306 2.64913L9.54599 2.64365C9.52931 2.63843 9.50162 2.63009 9.46441 2.61998C9.38967 2.59968 9.27845 2.57277 9.14232 2.54956C8.86448 2.5022 8.51151 2.47522 8.16284 2.53192C7.8992 2.57479 7.67508 2.71385 7.5022 2.89831C7.31854 3.09427 7.24074 3.28955 7.22769 3.36378C7.18558 3.60314 6.80654 5.88451 6.43657 8.11495C6.25191 9.2282 6.06994 10.3262 5.93412 11.1459L5.70857 12.5076L5.70821 12.5097L5.70728 12.5152L5.70444 12.5312C5.70211 12.5441 5.69888 12.5612 5.69468 12.5823C5.6863 12.6242 5.67395 12.6818 5.65698 12.7511C5.62334 12.8883 5.57002 13.0776 5.49071 13.2841C5.34699 13.6583 5.05661 14.2553 4.49397 14.5819C4.02314 14.8552 3.46753 14.9621 2.96614 14.9903C2.45559 15.0189 1.93887 14.9693 1.5 14.8801L1.79887 13.4101C2.12843 13.4772 2.51574 13.5132 2.88211 13.4926C3.25763 13.4716 3.55181 13.3944 3.74092 13.2846C3.83822 13.2282 3.97349 13.0508 4.09044 12.7463C4.14146 12.6135 4.17723 12.4873 4.20009 12.394C4.21137 12.348 4.21912 12.3116 4.22378 12.2882L4.22843 12.264L4.22871 12.2626L4.96874 12.3844C4.22882 12.2619 4.22871 12.2626 4.22871 12.2626L4.22889 12.2615L4.22907 12.2604L4.4543 10.9007C4.59012 10.081 4.77211 8.98286 4.95679 7.8695C5.32549 5.64672 5.70659 3.35282 5.75037 3.10392C5.82319 2.68991 6.06482 2.23845 6.40776 1.87255C6.76148 1.49514 7.27113 1.15722 7.92207 1.05136C8.48799 0.959336 9.01795 1.00672 9.39441 1.0709C9.58542 1.10346 9.74419 1.14162 9.85765 1.17245C9.91454 1.1879 9.96051 1.20164 9.99395 1.2121C10.0107 1.21734 10.0243 1.22177 10.0347 1.22521L10.0477 1.22959L10.0524 1.23118L10.0542 1.23182L10.0554 1.23222Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.97109 5.02989C9.32595 5.15463 9.77919 5.42309 10.0605 5.97407C10.1155 6.08185 10.368 6.46167 10.7732 7.03828C11.1598 7.58843 11.6451 8.26217 12.1217 8.91773C12.5979 9.57275 13.0637 10.2073 13.4106 10.6782C13.584 10.9136 13.7276 11.108 13.8278 11.2435L13.984 11.4545L13.9846 11.4553L12.7798 12.3489L12.6218 12.1354C12.5211 11.9992 12.3769 11.8041 12.2029 11.5678C11.8549 11.0954 11.3871 10.4582 10.9085 9.7998C10.4302 9.14196 9.93934 8.46062 9.54588 7.90065C9.17103 7.36716 8.83973 6.88184 8.72449 6.6561C8.66525 6.54006 8.57608 6.48101 8.47365 6.44501C8.42075 6.42641 8.37145 6.41719 8.33713 6.41294C8.32305 6.4112 8.31288 6.41047 8.30776 6.41018L8.30594 6.41008H3.67899V4.91008H8.30604L8.30853 4.91007L8.32622 4.91018C8.33953 4.91036 8.3559 4.91079 8.37501 4.91167C8.41313 4.91344 8.4628 4.91705 8.52139 4.9243C8.63728 4.93865 8.79534 4.96811 8.97109 5.02989Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M14.4976 5.97967L8.13926 12.348L7.07778 11.2881L13.4361 4.91984L14.4976 5.97967Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M10.0554 1.23222C10.0554 1.23222 10.0557 1.23235 9.80834 1.94037C9.56094 2.64839 9.56127 2.64851 9.56127 2.64851L9.56306 2.64913L9.54599 2.64365C9.52931 2.63843 9.50162 2.63009 9.46441 2.61998C9.38967 2.59968 9.27845 2.57277 9.14232 2.54956C8.86448 2.5022 8.51151 2.47522 8.16284 2.53192C7.8992 2.57479 7.67508 2.71385 7.5022 2.89831C7.31854 3.09427 7.24074 3.28955 7.22769 3.36378C7.18558 3.60314 6.80654 5.88451 6.43657 8.11495C6.25191 9.2282 6.06994 10.3262 5.93412 11.1459L5.70857 12.5076L5.70821 12.5097L5.70728 12.5152L5.70444 12.5312C5.70211 12.5441 5.69888 12.5612 5.69468 12.5823C5.6863 12.6242 5.67395 12.6818 5.65698 12.7511C5.62334 12.8883 5.57002 13.0776 5.49071 13.2841C5.34699 13.6583 5.05661 14.2553 4.49397 14.5819C4.02314 14.8552 3.46753 14.9621 2.96614 14.9903C2.45559 15.0189 1.93887 14.9693 1.5 14.8801L1.79887 13.4101C2.12843 13.4772 2.51574 13.5132 2.88211 13.4926C3.25763 13.4716 3.55181 13.3944 3.74092 13.2846C3.83822 13.2282 3.97349 13.0508 4.09044 12.7463C4.14146 12.6135 4.17723 12.4873 4.20009 12.394C4.21137 12.348 4.21912 12.3116 4.22378 12.2882L4.22843 12.264L4.22871 12.2626L4.96874 12.3844C4.22882 12.2619 4.22871 12.2626 4.22871 12.2626L4.22889 12.2615L4.22907 12.2604L4.4543 10.9007C4.59012 10.081 4.77211 8.98286 4.95679 7.8695C5.32549 5.64672 5.70659 3.35282 5.75037 3.10392C5.82319 2.68991 6.06482 2.23845 6.40776 1.87255C6.76148 1.49514 7.27113 1.15722 7.92207 1.05136C8.48799 0.959336 9.01795 1.00672 9.39441 1.0709C9.58542 1.10346 9.74419 1.14162 9.85765 1.17245C9.91454 1.1879 9.96051 1.20164 9.99395 1.2121C10.0107 1.21734 10.0243 1.22177 10.0347 1.22521L10.0477 1.22959L10.0524 1.23118L10.0542 1.23182L10.0554 1.23222Z" fill={'currentColor'} /></svg>;
 };
+
 Function.displayName = 'Function';
 Function.isGlyph = true;
+
 export default Function;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Gauge.tsx b/packages/icon/src/generated/Gauge.tsx
index 773ecb03ea..1ec51911d6 100644
--- a/packages/icon/src/generated/Gauge.tsx
+++ b/packages/icon/src/generated/Gauge.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fae4d3bd54d52655f04beb481a121b0d
+* @checksum a54e29cdbf75d525cc0fe959ee10e5a7
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface GaugeProps extends LGGlyph.ComponentProps {}
+
 const Gauge = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: GaugeProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Gauge', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Gauge', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M1.041 10.2514C0.996713 10.6632 1.33666 11 1.75088 11H4.2449C4.65912 11 4.98569 10.6591 5.08798 10.2577C5.22027 9.73864 5.49013 9.25966 5.87533 8.87446C6.43906 8.31073 7.20364 7.99403 8.00088 7.99403C8.27011 7.99403 8.53562 8.03015 8.79093 8.0997L11.7818 5.10887C10.6623 4.39046 9.35172 4 8.00088 4C6.14436 4 4.36388 4.7375 3.05113 6.05025C1.91604 7.18534 1.21104 8.67012 1.041 10.2514Z" fill="currentColor" /><path d="M13.2967 6.42237L10.455 9.26409C10.6678 9.56493 10.8231 9.90191 10.9138 10.2577C11.0161 10.6591 11.3426 11 11.7568 11L14.2509 11C14.6651 11 15.005 10.6632 14.9608 10.2514C14.8087 8.83759 14.229 7.50093 13.2967 6.42237Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M1.041 10.2514C0.996713 10.6632 1.33666 11 1.75088 11H4.2449C4.65912 11 4.98569 10.6591 5.08798 10.2577C5.22027 9.73864 5.49013 9.25966 5.87533 8.87446C6.43906 8.31073 7.20364 7.99403 8.00088 7.99403C8.27011 7.99403 8.53562 8.03015 8.79093 8.0997L11.7818 5.10887C10.6623 4.39046 9.35172 4 8.00088 4C6.14436 4 4.36388 4.7375 3.05113 6.05025C1.91604 7.18534 1.21104 8.67012 1.041 10.2514Z" fill={'currentColor'} /><path d="M13.2967 6.42237L10.455 9.26409C10.6678 9.56493 10.8231 9.90191 10.9138 10.2577C11.0161 10.6591 11.3426 11 11.7568 11L14.2509 11C14.6651 11 15.005 10.6632 14.9608 10.2514C14.8087 8.83759 14.229 7.50093 13.2967 6.42237Z" fill={'currentColor'} /></svg>;
 };
+
 Gauge.displayName = 'Gauge';
 Gauge.isGlyph = true;
+
 export default Gauge;
\ No newline at end of file
diff --git a/packages/icon/src/generated/GlobeAmericas.tsx b/packages/icon/src/generated/GlobeAmericas.tsx
index 148c4f489f..59312d625a 100644
--- a/packages/icon/src/generated/GlobeAmericas.tsx
+++ b/packages/icon/src/generated/GlobeAmericas.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4aa7ede9e76acfe503c91a5cbbcc360e
+* @checksum 7843f7af52c35fd61aec10fad710431a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface GlobeAmericasProps extends LGGlyph.ComponentProps {}
+
 const GlobeAmericas = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: GlobeAmericasProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'GlobeAmericas', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'GlobeAmericas', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8.69894 12.6989C8.47083 12.7326 8.23745 12.75 8 12.75C6.86225 12.75 5.81793 12.35 5 11.6829V10L3.25682 8.25682C3.25229 8.17179 3.25 8.08616 3.25 8C3.25 5.37665 5.37665 3.25 8 3.25V4.5L6.5 6V7L6 7.5L5.5 7L4.5 8L5 8.5H7.5L8 9V10L7 11L8.69894 12.6989ZM12.7457 8.20342C12.7486 8.13597 12.75 8.06815 12.75 8C12.75 6.94341 12.405 5.9674 11.8216 5.17845L10.5 6.5V9H11.75L12.7457 8.20342Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8.69894 12.6989C8.47083 12.7326 8.23745 12.75 8 12.75C6.86225 12.75 5.81793 12.35 5 11.6829V10L3.25682 8.25682C3.25229 8.17179 3.25 8.08616 3.25 8C3.25 5.37665 5.37665 3.25 8 3.25V4.5L6.5 6V7L6 7.5L5.5 7L4.5 8L5 8.5H7.5L8 9V10L7 11L8.69894 12.6989ZM12.7457 8.20342C12.7486 8.13597 12.75 8.06815 12.75 8C12.75 6.94341 12.405 5.9674 11.8216 5.17845L10.5 6.5V9H11.75L12.7457 8.20342Z" fill={'currentColor'} /></svg>;
 };
+
 GlobeAmericas.displayName = 'GlobeAmericas';
 GlobeAmericas.isGlyph = true;
+
 export default GlobeAmericas;
\ No newline at end of file
diff --git a/packages/icon/src/generated/GovernmentBuilding.tsx b/packages/icon/src/generated/GovernmentBuilding.tsx
index 164ef6d0af..8dc55730e5 100644
--- a/packages/icon/src/generated/GovernmentBuilding.tsx
+++ b/packages/icon/src/generated/GovernmentBuilding.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 93d857dc5276aea15c4def863d4e770c
+* @checksum 3240d8ea9e88cfa999d0e2c45af97ccf
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface GovernmentBuildingProps extends LGGlyph.ComponentProps {}
+
 const GovernmentBuilding = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: GovernmentBuildingProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'GovernmentBuilding', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'GovernmentBuilding', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M11 5V4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4V5H11Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M1.5 6C1.22386 6 1 6.22386 1 6.5C1 6.77614 1.22386 7 1.5 7H2V13H1.5C1.22386 13 1 13.2239 1 13.5C1 13.7761 1.22386 14 1.5 14H14.5C14.7761 14 15 13.7761 15 13.5C15 13.2239 14.7761 13 14.5 13H14V7H14.5C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6H1.5ZM4.5 8.5C4.5 8.22386 4.72386 8 5 8C5.27614 8 5.5 8.22386 5.5 8.5V11.5C5.5 11.7761 5.27614 12 5 12C4.72386 12 4.5 11.7761 4.5 11.5V8.5ZM8 8C7.72386 8 7.5 8.22386 7.5 8.5V11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5V8.5C8.5 8.22386 8.27614 8 8 8ZM10.5 8.5C10.5 8.22386 10.7239 8 11 8C11.2761 8 11.5 8.22386 11.5 8.5V11.5C11.5 11.7761 11.2761 12 11 12C10.7239 12 10.5 11.7761 10.5 11.5V8.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M11 5V4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4V5H11Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M1.5 6C1.22386 6 1 6.22386 1 6.5C1 6.77614 1.22386 7 1.5 7H2V13H1.5C1.22386 13 1 13.2239 1 13.5C1 13.7761 1.22386 14 1.5 14H14.5C14.7761 14 15 13.7761 15 13.5C15 13.2239 14.7761 13 14.5 13H14V7H14.5C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6H1.5ZM4.5 8.5C4.5 8.22386 4.72386 8 5 8C5.27614 8 5.5 8.22386 5.5 8.5V11.5C5.5 11.7761 5.27614 12 5 12C4.72386 12 4.5 11.7761 4.5 11.5V8.5ZM8 8C7.72386 8 7.5 8.22386 7.5 8.5V11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5V8.5C8.5 8.22386 8.27614 8 8 8ZM10.5 8.5C10.5 8.22386 10.7239 8 11 8C11.2761 8 11.5 8.22386 11.5 8.5V11.5C11.5 11.7761 11.2761 12 11 12C10.7239 12 10.5 11.7761 10.5 11.5V8.5Z" fill={'currentColor'} /></svg>;
 };
+
 GovernmentBuilding.displayName = 'GovernmentBuilding';
 GovernmentBuilding.isGlyph = true;
+
 export default GovernmentBuilding;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Guide.tsx b/packages/icon/src/generated/Guide.tsx
index 997aa05ee5..384fc86a74 100644
--- a/packages/icon/src/generated/Guide.tsx
+++ b/packages/icon/src/generated/Guide.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6197d4dc1126bf4eda03370327452548
+* @checksum f096e57c87038f55bb8941280482cef8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface GuideProps extends LGGlyph.ComponentProps {}
+
 const Guide = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: GuideProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Guide', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Guide', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M5.37041 4.32956C5.03839 4.32956 4.76923 4.61178 4.76923 4.95993C4.76923 5.30808 5.03839 5.5903 5.37041 5.5903H8.17592C8.50794 5.5903 8.7771 5.30808 8.7771 4.95993C8.7771 4.61178 8.50794 4.32956 8.17592 4.32956H5.37041Z" fill="currentColor" /><path d="M5.37041 6.4308C5.03839 6.4308 4.76923 6.71303 4.76923 7.06117C4.76923 7.40932 5.03839 7.69155 5.37041 7.69155H6.97356C7.30558 7.69155 7.57474 7.40932 7.57474 7.06117C7.57474 6.71303 7.30558 6.4308 6.97356 6.4308H5.37041Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M11.4956 2.86667V7.73074C12.952 8.2308 14 9.62499 14 11.2667C14 13.3285 12.3469 15 10.3077 15C8.97652 15 7.80987 14.2877 7.16021 13.2195H3.84615C2.82655 13.2195 2 12.3838 2 11.3529V2.86666C2 1.83573 2.82655 1 3.84615 1H9.64941C10.669 1 11.4956 1.83574 11.4956 2.86667ZM3.84615 2.86666L9.64941 2.86667L9.64941 7.59249C7.92428 7.9064 6.61538 9.43198 6.61538 11.2667C6.61538 11.2955 6.61571 11.3242 6.61635 11.3529H3.84615L3.84615 2.86666ZM10.8352 9.13333C10.8352 9.42789 10.599 9.66667 10.3077 9.66667C10.0164 9.66667 9.78022 9.42789 9.78022 9.13333C9.78022 8.83878 10.0164 8.6 10.3077 8.6C10.599 8.6 10.8352 8.83878 10.8352 9.13333ZM10.3077 10.2C10.599 10.2 10.8352 10.4388 10.8352 10.7333V12.8667H11.0989C11.2446 12.8667 11.3626 12.9861 11.3626 13.1333C11.3626 13.2806 11.2446 13.4 11.0989 13.4H9.51648C9.37083 13.4 9.25275 13.2806 9.25275 13.1333C9.25275 12.9861 9.37083 12.8667 9.51648 12.8667H9.78022V10.7333H9.51648C9.37083 10.7333 9.25275 10.6139 9.25275 10.4667C9.25275 10.3194 9.37083 10.2 9.51648 10.2H10.3077Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M5.37041 4.32956C5.03839 4.32956 4.76923 4.61178 4.76923 4.95993C4.76923 5.30808 5.03839 5.5903 5.37041 5.5903H8.17592C8.50794 5.5903 8.7771 5.30808 8.7771 4.95993C8.7771 4.61178 8.50794 4.32956 8.17592 4.32956H5.37041Z" fill={'currentColor'} /><path d="M5.37041 6.4308C5.03839 6.4308 4.76923 6.71303 4.76923 7.06117C4.76923 7.40932 5.03839 7.69155 5.37041 7.69155H6.97356C7.30558 7.69155 7.57474 7.40932 7.57474 7.06117C7.57474 6.71303 7.30558 6.4308 6.97356 6.4308H5.37041Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M11.4956 2.86667V7.73074C12.952 8.2308 14 9.62499 14 11.2667C14 13.3285 12.3469 15 10.3077 15C8.97652 15 7.80987 14.2877 7.16021 13.2195H3.84615C2.82655 13.2195 2 12.3838 2 11.3529V2.86666C2 1.83573 2.82655 1 3.84615 1H9.64941C10.669 1 11.4956 1.83574 11.4956 2.86667ZM3.84615 2.86666L9.64941 2.86667L9.64941 7.59249C7.92428 7.9064 6.61538 9.43198 6.61538 11.2667C6.61538 11.2955 6.61571 11.3242 6.61635 11.3529H3.84615L3.84615 2.86666ZM10.8352 9.13333C10.8352 9.42789 10.599 9.66667 10.3077 9.66667C10.0164 9.66667 9.78022 9.42789 9.78022 9.13333C9.78022 8.83878 10.0164 8.6 10.3077 8.6C10.599 8.6 10.8352 8.83878 10.8352 9.13333ZM10.3077 10.2C10.599 10.2 10.8352 10.4388 10.8352 10.7333V12.8667H11.0989C11.2446 12.8667 11.3626 12.9861 11.3626 13.1333C11.3626 13.2806 11.2446 13.4 11.0989 13.4H9.51648C9.37083 13.4 9.25275 13.2806 9.25275 13.1333C9.25275 12.9861 9.37083 12.8667 9.51648 12.8667H9.78022V10.7333H9.51648C9.37083 10.7333 9.25275 10.6139 9.25275 10.4667C9.25275 10.3194 9.37083 10.2 9.51648 10.2H10.3077Z" fill={'currentColor'} /></svg>;
 };
+
 Guide.displayName = 'Guide';
 Guide.isGlyph = true;
+
 export default Guide;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Hash.tsx b/packages/icon/src/generated/Hash.tsx
index 53093c2e75..da70db3723 100644
--- a/packages/icon/src/generated/Hash.tsx
+++ b/packages/icon/src/generated/Hash.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 732cbb137f14f311c82c7f60ee1f9242
+* @checksum 1c43e830456f56af3f2ffcde1b9f92ba
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface HashProps extends LGGlyph.ComponentProps {}
+
 const Hash = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: HashProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Hash', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Hash', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M10.6161 1.5C10.3734 1.5 10.1658 1.67422 10.1237 1.91318L9.66753 4.5H7.19838L7.62389 2.08683C7.67787 1.78068 7.44236 1.5 7.13149 1.5H6.11606C5.87341 1.5 5.66579 1.67422 5.62366 1.91318L5.16753 4.5H2C1.72386 4.5 1.5 4.72386 1.5 5V6C1.5 6.27614 1.72386 6.5 2 6.5H4.81488L4.28589 9.5H2C1.72386 9.5 1.5 9.72386 1.5 10V11C1.5 11.2761 1.72386 11.5 2 11.5H3.93324L3.50773 13.9132C3.45375 14.2193 3.68926 14.5 4.00014 14.5H5.01556C5.25821 14.5 5.46583 14.3258 5.50797 14.0868L5.96409 11.5H8.43324L8.00773 13.9132C7.95375 14.2193 8.18926 14.5 8.50014 14.5H9.51556C9.75821 14.5 9.96583 14.3258 10.008 14.0868L10.4641 11.5H13.5C13.7761 11.5 14 11.2761 14 11V10C14 9.72386 13.7761 9.5 13.5 9.5H10.8167L11.3457 6.5H13.5C13.7761 6.5 14 6.27614 14 6V5C14 4.72386 13.7761 4.5 13.5 4.5H11.6984L12.1239 2.08683C12.1779 1.78068 11.9424 1.5 11.6315 1.5H10.6161ZM6.31675 9.5H8.78589L9.31488 6.5H6.84573L6.31675 9.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M10.6161 1.5C10.3734 1.5 10.1658 1.67422 10.1237 1.91318L9.66753 4.5H7.19838L7.62389 2.08683C7.67787 1.78068 7.44236 1.5 7.13149 1.5H6.11606C5.87341 1.5 5.66579 1.67422 5.62366 1.91318L5.16753 4.5H2C1.72386 4.5 1.5 4.72386 1.5 5V6C1.5 6.27614 1.72386 6.5 2 6.5H4.81488L4.28589 9.5H2C1.72386 9.5 1.5 9.72386 1.5 10V11C1.5 11.2761 1.72386 11.5 2 11.5H3.93324L3.50773 13.9132C3.45375 14.2193 3.68926 14.5 4.00014 14.5H5.01556C5.25821 14.5 5.46583 14.3258 5.50797 14.0868L5.96409 11.5H8.43324L8.00773 13.9132C7.95375 14.2193 8.18926 14.5 8.50014 14.5H9.51556C9.75821 14.5 9.96583 14.3258 10.008 14.0868L10.4641 11.5H13.5C13.7761 11.5 14 11.2761 14 11V10C14 9.72386 13.7761 9.5 13.5 9.5H10.8167L11.3457 6.5H13.5C13.7761 6.5 14 6.27614 14 6V5C14 4.72386 13.7761 4.5 13.5 4.5H11.6984L12.1239 2.08683C12.1779 1.78068 11.9424 1.5 11.6315 1.5H10.6161ZM6.31675 9.5H8.78589L9.31488 6.5H6.84573L6.31675 9.5Z" fill={'currentColor'} /></svg>;
 };
+
 Hash.displayName = 'Hash';
 Hash.isGlyph = true;
+
 export default Hash;
\ No newline at end of file
diff --git a/packages/icon/src/generated/HiddenSecondaryNode.tsx b/packages/icon/src/generated/HiddenSecondaryNode.tsx
index 8234c6f1ac..cc345b05c4 100644
--- a/packages/icon/src/generated/HiddenSecondaryNode.tsx
+++ b/packages/icon/src/generated/HiddenSecondaryNode.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2aff31aae26b5e933ae67e64e2995aaf
+* @checksum 637d660f59d85a28f869a5d36a2a5c33
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface HiddenSecondaryNodeProps extends LGGlyph.ComponentProps {}
+
 const HiddenSecondaryNode = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: HiddenSecondaryNodeProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'HiddenSecondaryNode', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'HiddenSecondaryNode', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7.51193 1.01678C7.67329 1.00565 7.83604 1 8 1C8.16396 1 8.32671 1.00565 8.48807 1.01678C8.88252 1.04399 9.18022 1.38581 9.15302 1.78025C9.12581 2.1747 8.78399 2.47241 8.38954 2.4452C8.26095 2.43633 8.13106 2.43182 8 2.43182C7.86894 2.43182 7.73905 2.43633 7.61046 2.4452C7.21601 2.47241 6.87419 2.1747 6.84698 1.78025C6.81978 1.38581 7.11748 1.04399 7.51193 1.01678ZM5.88788 2.03629C6.06146 2.39154 5.9142 2.82024 5.55896 2.99382C5.32527 3.10801 5.10067 3.23814 4.88658 3.38282C4.55899 3.60421 4.11395 3.51811 3.89257 3.19052C3.67118 2.86293 3.75727 2.41789 4.08487 2.1965C4.35387 2.0147 4.63629 1.85106 4.93035 1.70737C5.28559 1.53379 5.71429 1.68105 5.88788 2.03629ZM10.1121 2.03629C10.2857 1.68105 10.7144 1.53379 11.0696 1.70737C11.3637 1.85106 11.6461 2.01471 11.9151 2.1965C12.2427 2.41789 12.3288 2.86293 12.1074 3.19052C11.886 3.51811 11.441 3.60421 11.1134 3.38282C10.8993 3.23814 10.6747 3.10801 10.441 2.99382C10.0858 2.82024 9.93853 2.39154 10.1121 2.03629ZM3.19052 3.89257C3.51811 4.11395 3.60421 4.55899 3.38282 4.88658C3.23814 5.10067 3.10801 5.32527 2.99382 5.55896C2.82024 5.9142 2.39154 6.06146 2.03629 5.88788C1.68105 5.71429 1.53379 5.28559 1.70737 4.93035C1.85106 4.63629 2.01471 4.35387 2.1965 4.08487C2.41789 3.75727 2.86293 3.67118 3.19052 3.89257ZM12.8095 3.89257C13.1371 3.67118 13.5821 3.75727 13.8035 4.08487C13.9853 4.35387 14.1489 4.63629 14.2926 4.93035C14.4662 5.28559 14.3189 5.71429 13.9637 5.88788C13.6085 6.06146 13.1798 5.9142 13.0062 5.55896C12.892 5.32527 12.7619 5.10067 12.6172 4.88658C12.3958 4.55899 12.4819 4.11395 12.8095 3.89257ZM1.78025 6.84698C2.1747 6.87419 2.47241 7.21601 2.4452 7.61046C2.43633 7.73905 2.43182 7.86894 2.43182 8C2.43182 8.13106 2.43633 8.26095 2.4452 8.38954C2.47241 8.78399 2.1747 9.12581 1.78025 9.15302C1.38581 9.18022 1.04399 8.88252 1.01678 8.48807C1.00565 8.32671 1 8.16396 1 8C1 7.83604 1.00565 7.67329 1.01678 7.51193C1.04399 7.11748 1.38581 6.81978 1.78025 6.84698ZM14.2197 6.84698C14.6142 6.81978 14.956 7.11748 14.9832 7.51193C14.9943 7.67329 15 7.83604 15 8C15 8.16396 14.9943 8.32671 14.9832 8.48807C14.956 8.88252 14.6142 9.18022 14.2197 9.15302C13.8253 9.12581 13.5276 8.78399 13.5548 8.38954C13.5637 8.26095 13.5682 8.13106 13.5682 8C13.5682 7.86894 13.5637 7.73905 13.5548 7.61046C13.5276 7.21601 13.8253 6.87419 14.2197 6.84698ZM2.03629 10.1121C2.39154 9.93853 2.82024 10.0858 2.99382 10.441C3.10801 10.6747 3.23814 10.8993 3.38282 11.1134C3.60421 11.441 3.51811 11.886 3.19052 12.1074C2.86293 12.3288 2.41789 12.2427 2.1965 11.9151C2.0147 11.6461 1.85106 11.3637 1.70737 11.0696C1.53379 10.7144 1.68105 10.2857 2.03629 10.1121ZM13.9637 10.1121C14.3189 10.2857 14.4662 10.7144 14.2926 11.0696C14.1489 11.3637 13.9853 11.6461 13.8035 11.9151C13.5821 12.2427 13.1371 12.3288 12.8095 12.1074C12.4819 11.886 12.3958 11.441 12.6172 11.1134C12.7619 10.8993 12.892 10.6747 13.0062 10.441C13.1798 10.0858 13.6085 9.93853 13.9637 10.1121ZM3.89257 12.8095C4.11395 12.4819 4.55899 12.3958 4.88658 12.6172C5.10067 12.7619 5.32527 12.892 5.55896 13.0062C5.9142 13.1798 6.06146 13.6085 5.88788 13.9637C5.71429 14.3189 5.28559 14.4662 4.93035 14.2926C4.63629 14.1489 4.35387 13.9853 4.08487 13.8035C3.75727 13.5821 3.67118 13.1371 3.89257 12.8095ZM12.1074 12.8095C12.3288 13.1371 12.2427 13.5821 11.9151 13.8035C11.6461 13.9853 11.3637 14.1489 11.0696 14.2926C10.7144 14.4662 10.2857 14.3189 10.1121 13.9637C9.93853 13.6085 10.0858 13.1798 10.441 13.0062C10.6747 12.892 10.8993 12.7619 11.1134 12.6172C11.441 12.3958 11.886 12.4819 12.1074 12.8095ZM6.84698 14.2197C6.87419 13.8253 7.21601 13.5276 7.61046 13.5548C7.73905 13.5637 7.86894 13.5682 8 13.5682C8.13106 13.5682 8.26095 13.5637 8.38954 13.5548C8.78399 13.5276 9.12581 13.8253 9.15302 14.2197C9.18022 14.6142 8.88252 14.956 8.48807 14.9832C8.32671 14.9943 8.16396 15 8 15C7.83604 15 7.67329 14.9943 7.51193 14.9832C7.11748 14.956 6.81978 14.6142 6.84698 14.2197Z" fill="currentColor" /><path d="M10.8637 9.74047C10.8637 11.1729 9.65676 12.0567 7.99728 12.0567C6.22808 12.0567 4.96632 10.9596 4.89775 9.46618H6.85895C6.92753 10.1367 7.44869 10.4567 8.05213 10.4567C8.64187 10.4567 8.94359 10.2129 8.94359 9.84714C8.94359 9.45094 8.68301 9.25284 8.07956 9.08521L6.79038 8.71949C5.5972 8.38424 5.04861 7.46992 5.04861 6.35751C5.04861 5.04699 6.09093 4.10219 7.80527 4.10219C9.31389 4.10219 10.4659 4.98603 10.5756 6.50989H8.68301C8.58701 5.93083 8.18928 5.73272 7.77784 5.73272C7.29782 5.73272 6.96867 5.94606 6.96867 6.31179C6.96867 6.73847 7.33897 6.9061 7.75041 7.01277L8.95731 7.37849C10.3014 7.75946 10.8637 8.55186 10.8637 9.74047Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.51193 1.01678C7.67329 1.00565 7.83604 1 8 1C8.16396 1 8.32671 1.00565 8.48807 1.01678C8.88252 1.04399 9.18022 1.38581 9.15302 1.78025C9.12581 2.1747 8.78399 2.47241 8.38954 2.4452C8.26095 2.43633 8.13106 2.43182 8 2.43182C7.86894 2.43182 7.73905 2.43633 7.61046 2.4452C7.21601 2.47241 6.87419 2.1747 6.84698 1.78025C6.81978 1.38581 7.11748 1.04399 7.51193 1.01678ZM5.88788 2.03629C6.06146 2.39154 5.9142 2.82024 5.55896 2.99382C5.32527 3.10801 5.10067 3.23814 4.88658 3.38282C4.55899 3.60421 4.11395 3.51811 3.89257 3.19052C3.67118 2.86293 3.75727 2.41789 4.08487 2.1965C4.35387 2.0147 4.63629 1.85106 4.93035 1.70737C5.28559 1.53379 5.71429 1.68105 5.88788 2.03629ZM10.1121 2.03629C10.2857 1.68105 10.7144 1.53379 11.0696 1.70737C11.3637 1.85106 11.6461 2.01471 11.9151 2.1965C12.2427 2.41789 12.3288 2.86293 12.1074 3.19052C11.886 3.51811 11.441 3.60421 11.1134 3.38282C10.8993 3.23814 10.6747 3.10801 10.441 2.99382C10.0858 2.82024 9.93853 2.39154 10.1121 2.03629ZM3.19052 3.89257C3.51811 4.11395 3.60421 4.55899 3.38282 4.88658C3.23814 5.10067 3.10801 5.32527 2.99382 5.55896C2.82024 5.9142 2.39154 6.06146 2.03629 5.88788C1.68105 5.71429 1.53379 5.28559 1.70737 4.93035C1.85106 4.63629 2.01471 4.35387 2.1965 4.08487C2.41789 3.75727 2.86293 3.67118 3.19052 3.89257ZM12.8095 3.89257C13.1371 3.67118 13.5821 3.75727 13.8035 4.08487C13.9853 4.35387 14.1489 4.63629 14.2926 4.93035C14.4662 5.28559 14.3189 5.71429 13.9637 5.88788C13.6085 6.06146 13.1798 5.9142 13.0062 5.55896C12.892 5.32527 12.7619 5.10067 12.6172 4.88658C12.3958 4.55899 12.4819 4.11395 12.8095 3.89257ZM1.78025 6.84698C2.1747 6.87419 2.47241 7.21601 2.4452 7.61046C2.43633 7.73905 2.43182 7.86894 2.43182 8C2.43182 8.13106 2.43633 8.26095 2.4452 8.38954C2.47241 8.78399 2.1747 9.12581 1.78025 9.15302C1.38581 9.18022 1.04399 8.88252 1.01678 8.48807C1.00565 8.32671 1 8.16396 1 8C1 7.83604 1.00565 7.67329 1.01678 7.51193C1.04399 7.11748 1.38581 6.81978 1.78025 6.84698ZM14.2197 6.84698C14.6142 6.81978 14.956 7.11748 14.9832 7.51193C14.9943 7.67329 15 7.83604 15 8C15 8.16396 14.9943 8.32671 14.9832 8.48807C14.956 8.88252 14.6142 9.18022 14.2197 9.15302C13.8253 9.12581 13.5276 8.78399 13.5548 8.38954C13.5637 8.26095 13.5682 8.13106 13.5682 8C13.5682 7.86894 13.5637 7.73905 13.5548 7.61046C13.5276 7.21601 13.8253 6.87419 14.2197 6.84698ZM2.03629 10.1121C2.39154 9.93853 2.82024 10.0858 2.99382 10.441C3.10801 10.6747 3.23814 10.8993 3.38282 11.1134C3.60421 11.441 3.51811 11.886 3.19052 12.1074C2.86293 12.3288 2.41789 12.2427 2.1965 11.9151C2.0147 11.6461 1.85106 11.3637 1.70737 11.0696C1.53379 10.7144 1.68105 10.2857 2.03629 10.1121ZM13.9637 10.1121C14.3189 10.2857 14.4662 10.7144 14.2926 11.0696C14.1489 11.3637 13.9853 11.6461 13.8035 11.9151C13.5821 12.2427 13.1371 12.3288 12.8095 12.1074C12.4819 11.886 12.3958 11.441 12.6172 11.1134C12.7619 10.8993 12.892 10.6747 13.0062 10.441C13.1798 10.0858 13.6085 9.93853 13.9637 10.1121ZM3.89257 12.8095C4.11395 12.4819 4.55899 12.3958 4.88658 12.6172C5.10067 12.7619 5.32527 12.892 5.55896 13.0062C5.9142 13.1798 6.06146 13.6085 5.88788 13.9637C5.71429 14.3189 5.28559 14.4662 4.93035 14.2926C4.63629 14.1489 4.35387 13.9853 4.08487 13.8035C3.75727 13.5821 3.67118 13.1371 3.89257 12.8095ZM12.1074 12.8095C12.3288 13.1371 12.2427 13.5821 11.9151 13.8035C11.6461 13.9853 11.3637 14.1489 11.0696 14.2926C10.7144 14.4662 10.2857 14.3189 10.1121 13.9637C9.93853 13.6085 10.0858 13.1798 10.441 13.0062C10.6747 12.892 10.8993 12.7619 11.1134 12.6172C11.441 12.3958 11.886 12.4819 12.1074 12.8095ZM6.84698 14.2197C6.87419 13.8253 7.21601 13.5276 7.61046 13.5548C7.73905 13.5637 7.86894 13.5682 8 13.5682C8.13106 13.5682 8.26095 13.5637 8.38954 13.5548C8.78399 13.5276 9.12581 13.8253 9.15302 14.2197C9.18022 14.6142 8.88252 14.956 8.48807 14.9832C8.32671 14.9943 8.16396 15 8 15C7.83604 15 7.67329 14.9943 7.51193 14.9832C7.11748 14.956 6.81978 14.6142 6.84698 14.2197Z" fill={'currentColor'} /><path d="M10.8637 9.74047C10.8637 11.1729 9.65676 12.0567 7.99728 12.0567C6.22808 12.0567 4.96632 10.9596 4.89775 9.46618H6.85895C6.92753 10.1367 7.44869 10.4567 8.05213 10.4567C8.64187 10.4567 8.94359 10.2129 8.94359 9.84714C8.94359 9.45094 8.68301 9.25284 8.07956 9.08521L6.79038 8.71949C5.5972 8.38424 5.04861 7.46992 5.04861 6.35751C5.04861 5.04699 6.09093 4.10219 7.80527 4.10219C9.31389 4.10219 10.4659 4.98603 10.5756 6.50989H8.68301C8.58701 5.93083 8.18928 5.73272 7.77784 5.73272C7.29782 5.73272 6.96867 5.94606 6.96867 6.31179C6.96867 6.73847 7.33897 6.9061 7.75041 7.01277L8.95731 7.37849C10.3014 7.75946 10.8637 8.55186 10.8637 9.74047Z" fill={'currentColor'} /></svg>;
 };
+
 HiddenSecondaryNode.displayName = 'HiddenSecondaryNode';
 HiddenSecondaryNode.isGlyph = true;
+
 export default HiddenSecondaryNode;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Highlight.tsx b/packages/icon/src/generated/Highlight.tsx
index ed5a584210..5b4c3d87f6 100644
--- a/packages/icon/src/generated/Highlight.tsx
+++ b/packages/icon/src/generated/Highlight.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b33d967dc6dbcdacb2e862060c0d4f22
+* @checksum fa250ab7be1fa21da7944d51c541b9f7
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface HighlightProps extends LGGlyph.ComponentProps {}
+
 const Highlight = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: HighlightProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Highlight', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Highlight', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.85275 12.0315C8.87165 12.0114 8.89799 12 8.92557 12H14.75C14.8881 12 15 12.1119 15 12.25V13.75C15 13.8881 14.8881 14 14.75 14H7.23145C7.14381 14 7.09857 13.8953 7.15863 13.8315L8.85275 12.0315Z" fill="currentColor" /><path d="M4.01887 9.19347L4.39384 8.8185L7.57582 12.0005L7.20114 12.3752C6.99596 12.5803 6.71178 12.6863 6.42236 12.6655L5.84842 12.6242C5.55901 12.6034 5.27482 12.7094 5.06964 12.9146L4.92888 13.0553L3.33789 11.4643L3.47895 11.3233C3.68396 11.1183 3.7899 10.8344 3.76932 10.5452L3.7285 9.97156C3.70792 9.68237 3.81386 9.39848 4.01887 9.19347Z" fill="currentColor" /><path d="M11.4334 1.77892C11.8239 1.38839 12.4571 1.38839 12.8476 1.77892L14.6154 3.54668C15.0059 3.93721 15.0059 4.57037 14.6154 4.9609L8.28006 11.2962L5.09808 8.11425L11.4334 1.77892Z" fill="currentColor" /><path d="M2.63228 12.1672L4.22462 13.7596L4.05424 13.9317C4.00728 13.9792 3.9433 14.0059 3.87655 14.0059L1.38588 14.0059C1.16267 14.0059 1.05135 13.7356 1.20981 13.5784L2.63228 12.1672Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.85275 12.0315C8.87165 12.0114 8.89799 12 8.92557 12H14.75C14.8881 12 15 12.1119 15 12.25V13.75C15 13.8881 14.8881 14 14.75 14H7.23145C7.14381 14 7.09857 13.8953 7.15863 13.8315L8.85275 12.0315Z" fill={'currentColor'} /><path d="M4.01887 9.19347L4.39384 8.8185L7.57582 12.0005L7.20114 12.3752C6.99596 12.5803 6.71178 12.6863 6.42236 12.6655L5.84842 12.6242C5.55901 12.6034 5.27482 12.7094 5.06964 12.9146L4.92888 13.0553L3.33789 11.4643L3.47895 11.3233C3.68396 11.1183 3.7899 10.8344 3.76932 10.5452L3.7285 9.97156C3.70792 9.68237 3.81386 9.39848 4.01887 9.19347Z" fill={'currentColor'} /><path d="M11.4334 1.77892C11.8239 1.38839 12.4571 1.38839 12.8476 1.77892L14.6154 3.54668C15.0059 3.93721 15.0059 4.57037 14.6154 4.9609L8.28006 11.2962L5.09808 8.11425L11.4334 1.77892Z" fill={'currentColor'} /><path d="M2.63228 12.1672L4.22462 13.7596L4.05424 13.9317C4.00728 13.9792 3.9433 14.0059 3.87655 14.0059L1.38588 14.0059C1.16267 14.0059 1.05135 13.7356 1.20981 13.5784L2.63228 12.1672Z" fill={'currentColor'} /></svg>;
 };
+
 Highlight.displayName = 'Highlight';
 Highlight.isGlyph = true;
+
 export default Highlight;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Home.tsx b/packages/icon/src/generated/Home.tsx
index 9908a97d20..57924d694d 100644
--- a/packages/icon/src/generated/Home.tsx
+++ b/packages/icon/src/generated/Home.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 21d3e165dc18b87a3ddc2a7c2dd6ea02
+* @checksum dfc85fb73ab2b916b40a4201071ce10d
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface HomeProps extends LGGlyph.ComponentProps {}
+
 const Home = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: HomeProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Home', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Home', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7.68697 1.75127C7.86982 1.60448 8.13013 1.60448 8.31298 1.75127L14.7458 6.91541C14.9651 7.09144 14.9961 7.41362 14.8145 7.62829L14.1709 8.38896C13.9949 8.5969 13.6849 8.62574 13.4736 8.45382L8.31555 4.25677C8.13175 4.10721 7.8682 4.10721 7.6844 4.25677L2.52637 8.45381C2.31508 8.62574 2.00506 8.5969 1.8291 8.38895L1.18546 7.62829C1.00382 7.41362 1.03486 7.09144 1.25415 6.91541L7.68697 1.75127Z" fill="currentColor" /><path d="M7.68763 5.24987C7.87024 5.10378 8.12971 5.10378 8.31232 5.24987L12.8123 8.84987C12.9309 8.94476 13 9.08841 13 9.24031V13.5C13 13.7761 12.7761 14 12.5 14H9.49998C9.22383 14 8.99997 13.7761 8.99997 13.5V11.5C8.99997 11.2239 8.77612 11 8.49997 11H7.49997C7.22383 11 6.99997 11.2239 6.99997 11.5V13.5C6.99997 13.7761 6.77612 14 6.49997 14H3.49997C3.22383 14 2.99997 13.7761 2.99997 13.5V9.24031C2.99997 9.08841 3.06902 8.94476 3.18763 8.84987L7.68763 5.24987Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.68697 1.75127C7.86982 1.60448 8.13013 1.60448 8.31298 1.75127L14.7458 6.91541C14.9651 7.09144 14.9961 7.41362 14.8145 7.62829L14.1709 8.38896C13.9949 8.5969 13.6849 8.62574 13.4736 8.45382L8.31555 4.25677C8.13175 4.10721 7.8682 4.10721 7.6844 4.25677L2.52637 8.45381C2.31508 8.62574 2.00506 8.5969 1.8291 8.38895L1.18546 7.62829C1.00382 7.41362 1.03486 7.09144 1.25415 6.91541L7.68697 1.75127Z" fill={'currentColor'} /><path d="M7.68763 5.24987C7.87024 5.10378 8.12971 5.10378 8.31232 5.24987L12.8123 8.84987C12.9309 8.94476 13 9.08841 13 9.24031V13.5C13 13.7761 12.7761 14 12.5 14H9.49998C9.22383 14 8.99997 13.7761 8.99997 13.5V11.5C8.99997 11.2239 8.77612 11 8.49997 11H7.49997C7.22383 11 6.99997 11.2239 6.99997 11.5V13.5C6.99997 13.7761 6.77612 14 6.49997 14H3.49997C3.22383 14 2.99997 13.7761 2.99997 13.5V9.24031C2.99997 9.08841 3.06902 8.94476 3.18763 8.84987L7.68763 5.24987Z" fill={'currentColor'} /></svg>;
 };
+
 Home.displayName = 'Home';
 Home.isGlyph = true;
+
 export default Home;
\ No newline at end of file
diff --git a/packages/icon/src/generated/HorizontalDrag.tsx b/packages/icon/src/generated/HorizontalDrag.tsx
index 59f3c965d4..89dda888f7 100644
--- a/packages/icon/src/generated/HorizontalDrag.tsx
+++ b/packages/icon/src/generated/HorizontalDrag.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bb43a70c64a4cd58d135bcafa70ad44e
+* @checksum c84f75a98974e66062c821a933d9277a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface HorizontalDragProps extends LGGlyph.ComponentProps {}
+
 const HorizontalDrag = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: HorizontalDragProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'HorizontalDrag', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'HorizontalDrag', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M4 9C4.55228 9 5 9.44772 5 10C5 10.5523 4.55228 11 4 11C3.44772 11 3 10.5523 3 10C3 9.44772 3.44772 9 4 9Z" fill="currentColor" /><path d="M4 5C4.55228 5 5 5.4477 5 6C5 6.55228 4.55228 7 4 7C3.44772 7 3 6.55228 3 6C3 5.4477 3.44772 5 4 5Z" fill="currentColor" /><path d="M8 9C8.55228 9 9 9.44772 9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44772 7.44772 9 8 9Z" fill="currentColor" /><path d="M12 9C12.5523 9 13 9.44772 13 10C13 10.5523 12.5523 11 12 11C11.4477 11 11 10.5523 11 10C11 9.44772 11.4477 9 12 9Z" fill="currentColor" /><path d="M8 5C8.55228 5 9 5.4477 9 6C9 6.55228 8.55228 7 8 7C7.44772 7 7 6.55228 7 6C7 5.4477 7.44772 5 8 5Z" fill="currentColor" /><path d="M12 5C12.5523 5 13 5.4477 13 6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6C11 5.4477 11.4477 5 12 5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4 9C4.55228 9 5 9.44772 5 10C5 10.5523 4.55228 11 4 11C3.44772 11 3 10.5523 3 10C3 9.44772 3.44772 9 4 9Z" fill={'currentColor'} /><path d="M4 5C4.55228 5 5 5.4477 5 6C5 6.55228 4.55228 7 4 7C3.44772 7 3 6.55228 3 6C3 5.4477 3.44772 5 4 5Z" fill={'currentColor'} /><path d="M8 9C8.55228 9 9 9.44772 9 10C9 10.5523 8.55228 11 8 11C7.44772 11 7 10.5523 7 10C7 9.44772 7.44772 9 8 9Z" fill={'currentColor'} /><path d="M12 9C12.5523 9 13 9.44772 13 10C13 10.5523 12.5523 11 12 11C11.4477 11 11 10.5523 11 10C11 9.44772 11.4477 9 12 9Z" fill={'currentColor'} /><path d="M8 5C8.55228 5 9 5.4477 9 6C9 6.55228 8.55228 7 8 7C7.44772 7 7 6.55228 7 6C7 5.4477 7.44772 5 8 5Z" fill={'currentColor'} /><path d="M12 5C12.5523 5 13 5.4477 13 6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6C11 5.4477 11.4477 5 12 5Z" fill={'currentColor'} /></svg>;
 };
+
 HorizontalDrag.displayName = 'HorizontalDrag';
 HorizontalDrag.isGlyph = true;
+
 export default HorizontalDrag;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Import.tsx b/packages/icon/src/generated/Import.tsx
index 969fc39597..5ef3eb6ed2 100644
--- a/packages/icon/src/generated/Import.tsx
+++ b/packages/icon/src/generated/Import.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d38dfc5fac49cb72eb2a046379199bc5
+* @checksum 3a51a8564d34312914a81ad98dea20b1
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ImportProps extends LGGlyph.ComponentProps {}
+
 const Import = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ImportProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Import', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Import', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M11.6225 8.79871C11.7258 8.69129 11.7258 8.52138 11.6225 8.41396L8.81811 5.49829C8.64501 5.31832 8.34095 5.4409 8.34095 5.69066V7.09645C6.48177 7.0133 5 5.47969 5 3.6V3.5C5 2.67157 4.32843 2 3.5 2C2.67157 2 2 2.67157 2 3.5V3.6C2 7.13668 4.82458 10.0136 8.34095 10.0981V11.522C8.34095 11.7718 8.64501 11.8944 8.81811 11.7144L11.6225 8.79871Z" fill="currentColor" /><path d="M3.95001 11C3.95001 10.5858 4.2858 10.25 4.70001 10.25C5.11423 10.25 5.45001 10.5858 5.45001 11L5.45001 12.75C5.45001 13.0262 5.67387 13.25 5.95001 13.25H12.814C13.0901 13.25 13.314 13.0262 13.314 12.75V5.88602C13.314 5.60988 13.0901 5.38602 12.814 5.38602L10.8711 5.38602C10.4569 5.38602 10.1211 5.05024 10.1211 4.63602C10.1211 4.22181 10.4569 3.88602 10.8711 3.88602H12.814C13.9186 3.88602 14.814 4.78145 14.814 5.88602V12.75C14.814 13.8546 13.9186 14.75 12.814 14.75H5.95001C4.84544 14.75 3.95001 13.8546 3.95001 12.75V11Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M11.6225 8.79871C11.7258 8.69129 11.7258 8.52138 11.6225 8.41396L8.81811 5.49829C8.64501 5.31832 8.34095 5.4409 8.34095 5.69066V7.09645C6.48177 7.0133 5 5.47969 5 3.6V3.5C5 2.67157 4.32843 2 3.5 2C2.67157 2 2 2.67157 2 3.5V3.6C2 7.13668 4.82458 10.0136 8.34095 10.0981V11.522C8.34095 11.7718 8.64501 11.8944 8.81811 11.7144L11.6225 8.79871Z" fill={'currentColor'} /><path d="M3.95001 11C3.95001 10.5858 4.2858 10.25 4.70001 10.25C5.11423 10.25 5.45001 10.5858 5.45001 11L5.45001 12.75C5.45001 13.0262 5.67387 13.25 5.95001 13.25H12.814C13.0901 13.25 13.314 13.0262 13.314 12.75V5.88602C13.314 5.60988 13.0901 5.38602 12.814 5.38602L10.8711 5.38602C10.4569 5.38602 10.1211 5.05024 10.1211 4.63602C10.1211 4.22181 10.4569 3.88602 10.8711 3.88602H12.814C13.9186 3.88602 14.814 4.78145 14.814 5.88602V12.75C14.814 13.8546 13.9186 14.75 12.814 14.75H5.95001C4.84544 14.75 3.95001 13.8546 3.95001 12.75V11Z" fill={'currentColor'} /></svg>;
 };
+
 Import.displayName = 'Import';
 Import.isGlyph = true;
+
 export default Import;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ImportantWithCircle.tsx b/packages/icon/src/generated/ImportantWithCircle.tsx
index 3f8126e2ef..b2e1a95a72 100644
--- a/packages/icon/src/generated/ImportantWithCircle.tsx
+++ b/packages/icon/src/generated/ImportantWithCircle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1e24056f238ac6b1ac52e61f4f79ee09
+* @checksum 3de6f832766faa639f152d9f7c0118d2
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ImportantWithCircleProps extends LGGlyph.ComponentProps {}
+
 const ImportantWithCircle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ImportantWithCircleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ImportantWithCircle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ImportantWithCircle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 4.5C7 3.94772 7.44772 3.5 8 3.5C8.55228 3.5 9 3.94772 9 4.5V8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5V4.5ZM9 11.5C9 12.0523 8.55228 12.5 8 12.5C7.44772 12.5 7 12.0523 7 11.5C7 10.9477 7.44772 10.5 8 10.5C8.55228 10.5 9 10.9477 9 11.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 4.5C7 3.94772 7.44772 3.5 8 3.5C8.55228 3.5 9 3.94772 9 4.5V8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5V4.5ZM9 11.5C9 12.0523 8.55228 12.5 8 12.5C7.44772 12.5 7 12.0523 7 11.5C7 10.9477 7.44772 10.5 8 10.5C8.55228 10.5 9 10.9477 9 11.5Z" fill={'currentColor'} /></svg>;
 };
+
 ImportantWithCircle.displayName = 'ImportantWithCircle';
 ImportantWithCircle.isGlyph = true;
+
 export default ImportantWithCircle;
\ No newline at end of file
diff --git a/packages/icon/src/generated/InfoWithCircle.tsx b/packages/icon/src/generated/InfoWithCircle.tsx
index 6acccab35d..117e2956cc 100644
--- a/packages/icon/src/generated/InfoWithCircle.tsx
+++ b/packages/icon/src/generated/InfoWithCircle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 42b8ee1317157261ded4a3babc011e9d
+* @checksum 76c82549dbb99ec9f9d6fe2cb927be3a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface InfoWithCircleProps extends LGGlyph.ComponentProps {}
+
 const InfoWithCircle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: InfoWithCircleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'InfoWithCircle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'InfoWithCircle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z" fill={'currentColor'} /></svg>;
 };
+
 InfoWithCircle.displayName = 'InfoWithCircle';
 InfoWithCircle.isGlyph = true;
+
 export default InfoWithCircle;
\ No newline at end of file
diff --git a/packages/icon/src/generated/InternalEmployee.tsx b/packages/icon/src/generated/InternalEmployee.tsx
index ad19954e67..f75245ffd5 100644
--- a/packages/icon/src/generated/InternalEmployee.tsx
+++ b/packages/icon/src/generated/InternalEmployee.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3a743ff35bb8246fb61e0821ae8f3cf7
+* @checksum 2238319a7963113cd83458b8658a18dc
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface InternalEmployeeProps extends LGGlyph.ComponentProps {}
+
 const InternalEmployee = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: InternalEmployeeProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'InternalEmployee', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'InternalEmployee', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M6.5 8C8.433 8 10 6.433 10 4.5C10 2.567 8.433 1 6.5 1C4.567 1 3 2.567 3 4.5C3 6.433 4.567 8 6.5 8Z" fill="currentColor" /><path d="M4.34253 8.45005C3.92858 8.22348 3.39921 8.20507 3.091 8.56241C2.41111 9.3507 2 10.3773 2 11.5V14H10.7741C10.773 13.9828 10.7719 13.9659 10.7709 13.9492L10.7409 13.9282C10.7409 13.9282 7.90706 11.7149 9.47051 8.30648C9.20774 8.25062 8.91096 8.31131 8.65747 8.45005C8.01691 8.80067 7.28173 9 6.5 9C5.71827 9 4.98309 8.80067 4.34253 8.45005Z" fill="currentColor" /><path d="M12.7456 7.0035C12.3863 6.55517 12.0736 6.09982 12.0104 6.00525C12.0037 5.99825 11.9938 5.99825 11.9871 6.00525C11.9239 6.09982 11.6145 6.55517 11.2552 7.0035C8.17113 11.1401 11.7409 13.9282 11.7409 13.9282L11.7709 13.9492C11.7975 14.38 11.864 15 11.864 15H12.1302C12.1302 15 12.1967 14.3835 12.2233 13.9492L12.2533 13.9247C12.2566 13.9282 15.8297 11.1401 12.7456 7.0035ZM12.0004 13.8687C12.0004 13.8687 11.8407 13.725 11.7975 13.6515V13.6445L11.9904 9.1401C11.9904 9.12609 12.0104 9.12609 12.0104 9.1401L12.2034 13.6445V13.6515C12.1601 13.725 12.0004 13.8687 12.0004 13.8687Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M6.5 8C8.433 8 10 6.433 10 4.5C10 2.567 8.433 1 6.5 1C4.567 1 3 2.567 3 4.5C3 6.433 4.567 8 6.5 8Z" fill={'currentColor'} /><path d="M4.34253 8.45005C3.92858 8.22348 3.39921 8.20507 3.091 8.56241C2.41111 9.3507 2 10.3773 2 11.5V14H10.7741C10.773 13.9828 10.7719 13.9659 10.7709 13.9492L10.7409 13.9282C10.7409 13.9282 7.90706 11.7149 9.47051 8.30648C9.20774 8.25062 8.91096 8.31131 8.65747 8.45005C8.01691 8.80067 7.28173 9 6.5 9C5.71827 9 4.98309 8.80067 4.34253 8.45005Z" fill={'currentColor'} /><path d="M12.7456 7.0035C12.3863 6.55517 12.0736 6.09982 12.0104 6.00525C12.0037 5.99825 11.9938 5.99825 11.9871 6.00525C11.9239 6.09982 11.6145 6.55517 11.2552 7.0035C8.17113 11.1401 11.7409 13.9282 11.7409 13.9282L11.7709 13.9492C11.7975 14.38 11.864 15 11.864 15H12.1302C12.1302 15 12.1967 14.3835 12.2233 13.9492L12.2533 13.9247C12.2566 13.9282 15.8297 11.1401 12.7456 7.0035ZM12.0004 13.8687C12.0004 13.8687 11.8407 13.725 11.7975 13.6515V13.6445L11.9904 9.1401C11.9904 9.12609 12.0104 9.12609 12.0104 9.1401L12.2034 13.6445V13.6515C12.1601 13.725 12.0004 13.8687 12.0004 13.8687Z" fill={'currentColor'} /></svg>;
 };
+
 InternalEmployee.displayName = 'InternalEmployee';
 InternalEmployee.isGlyph = true;
+
 export default InternalEmployee;
\ No newline at end of file
diff --git a/packages/icon/src/generated/InviteUser.tsx b/packages/icon/src/generated/InviteUser.tsx
index cc00069668..64724dbe11 100644
--- a/packages/icon/src/generated/InviteUser.tsx
+++ b/packages/icon/src/generated/InviteUser.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 04e22a7a87f2d3a9f361d9e97c72c3dd
+* @checksum 00984a133941c8bea1d796a623258461
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface InviteUserProps extends LGGlyph.ComponentProps {}
+
 const InviteUser = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: InviteUserProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'InviteUser', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'InviteUser', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.41809 7.42809C9.37085 6.8027 10 5.72482 10 4.5C10 2.567 8.433 1 6.5 1C4.567 1 3 2.567 3 4.5C3 5.76853 3.67485 6.87944 4.68512 7.49329C5.21431 7.81484 5.83553 8 6.5 8C7.20817 8 7.86722 7.78968 8.41809 7.42809Z" fill="currentColor" /><path d="M3.091 8.56241C3.39921 8.20507 3.92858 8.22348 4.34253 8.45005C4.98309 8.80067 5.71827 9 6.5 9C7.28173 9 8.01691 8.80067 8.65747 8.45005C9.07142 8.22348 9.60079 8.20507 9.909 8.56241C10.0194 8.6904 10.1227 8.82467 10.2183 8.96461C9.77928 9.33148 9.5 9.88313 9.5 10.5C8.39543 10.5 7.5 11.3954 7.5 12.5C7.5 13.0973 7.76188 13.6335 8.17709 14H2V11.5C2 10.3773 2.41111 9.3507 3.091 8.56241Z" fill="currentColor" /><path d="M10.5 10.5C10.5 10.272 10.5763 10.0618 10.7048 9.89357C10.8875 9.65434 11.1757 9.5 11.5 9.5C12.0523 9.5 12.5 9.94772 12.5 10.5V11.5H13.5C14.0523 11.5 14.5 11.9477 14.5 12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H12.5V14.5C12.5 15.0523 12.0523 15.5 11.5 15.5C10.9477 15.5 10.5 15.0523 10.5 14.5V13.5H9.5C8.94772 13.5 8.5 13.0523 8.5 12.5C8.5 11.9477 8.94772 11.5 9.5 11.5H10.5V10.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.41809 7.42809C9.37085 6.8027 10 5.72482 10 4.5C10 2.567 8.433 1 6.5 1C4.567 1 3 2.567 3 4.5C3 5.76853 3.67485 6.87944 4.68512 7.49329C5.21431 7.81484 5.83553 8 6.5 8C7.20817 8 7.86722 7.78968 8.41809 7.42809Z" fill={'currentColor'} /><path d="M3.091 8.56241C3.39921 8.20507 3.92858 8.22348 4.34253 8.45005C4.98309 8.80067 5.71827 9 6.5 9C7.28173 9 8.01691 8.80067 8.65747 8.45005C9.07142 8.22348 9.60079 8.20507 9.909 8.56241C10.0194 8.6904 10.1227 8.82467 10.2183 8.96461C9.77928 9.33148 9.5 9.88313 9.5 10.5C8.39543 10.5 7.5 11.3954 7.5 12.5C7.5 13.0973 7.76188 13.6335 8.17709 14H2V11.5C2 10.3773 2.41111 9.3507 3.091 8.56241Z" fill={'currentColor'} /><path d="M10.5 10.5C10.5 10.272 10.5763 10.0618 10.7048 9.89357C10.8875 9.65434 11.1757 9.5 11.5 9.5C12.0523 9.5 12.5 9.94772 12.5 10.5V11.5H13.5C14.0523 11.5 14.5 11.9477 14.5 12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H12.5V14.5C12.5 15.0523 12.0523 15.5 11.5 15.5C10.9477 15.5 10.5 15.0523 10.5 14.5V13.5H9.5C8.94772 13.5 8.5 13.0523 8.5 12.5C8.5 11.9477 8.94772 11.5 9.5 11.5H10.5V10.5Z" fill={'currentColor'} /></svg>;
 };
+
 InviteUser.displayName = 'InviteUser';
 InviteUser.isGlyph = true;
+
 export default InviteUser;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Key.tsx b/packages/icon/src/generated/Key.tsx
index 0cf1ceb0a6..1666c6b1d9 100644
--- a/packages/icon/src/generated/Key.tsx
+++ b/packages/icon/src/generated/Key.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a2934806347014c30e081f35f8b9d529
+* @checksum d0539b47f82d21c0cad322c8e1ef348f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface KeyProps extends LGGlyph.ComponentProps {}
+
 const Key = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: KeyProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Key', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Key', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M6.01504 10.0301C6.66679 10.0301 7.28227 9.8748 7.82649 9.5992L9.33772 11.1104L8.41683 12.0313C8.15573 12.2924 8.15573 12.7157 8.41683 12.9768L9.244 13.804C9.5051 14.0651 9.92843 14.0651 10.1895 13.804L11.1104 12.8831L11.8602 13.6329C12.3497 14.1224 13.1433 14.1224 13.6329 13.6329C14.1224 13.1433 14.1224 12.3497 13.6329 11.8602L9.59919 7.82651C9.87479 7.28228 10.0301 6.6668 10.0301 6.01504C10.0301 3.7976 8.23249 2 6.01504 2C3.7976 2 2 3.7976 2 6.01504C2 8.23249 3.7976 10.0301 6.01504 10.0301ZM5.26224 6.51692C5.95519 6.51692 6.51694 5.95517 6.51694 5.26222C6.51694 4.56927 5.95519 4.00752 5.26224 4.00752C4.56929 4.00752 4.00754 4.56927 4.00754 5.26222C4.00754 5.95517 4.56929 6.51692 5.26224 6.51692Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M6.01504 10.0301C6.66679 10.0301 7.28227 9.8748 7.82649 9.5992L9.33772 11.1104L8.41683 12.0313C8.15573 12.2924 8.15573 12.7157 8.41683 12.9768L9.244 13.804C9.5051 14.0651 9.92843 14.0651 10.1895 13.804L11.1104 12.8831L11.8602 13.6329C12.3497 14.1224 13.1433 14.1224 13.6329 13.6329C14.1224 13.1433 14.1224 12.3497 13.6329 11.8602L9.59919 7.82651C9.87479 7.28228 10.0301 6.6668 10.0301 6.01504C10.0301 3.7976 8.23249 2 6.01504 2C3.7976 2 2 3.7976 2 6.01504C2 8.23249 3.7976 10.0301 6.01504 10.0301ZM5.26224 6.51692C5.95519 6.51692 6.51694 5.95517 6.51694 5.26222C6.51694 4.56927 5.95519 4.00752 5.26224 4.00752C4.56929 4.00752 4.00754 4.56927 4.00754 5.26222C4.00754 5.95517 4.56929 6.51692 5.26224 6.51692Z" fill={'currentColor'} /></svg>;
 };
+
 Key.displayName = 'Key';
 Key.isGlyph = true;
+
 export default Key;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Laptop.tsx b/packages/icon/src/generated/Laptop.tsx
index 0f8a9d461a..1dab80b44b 100644
--- a/packages/icon/src/generated/Laptop.tsx
+++ b/packages/icon/src/generated/Laptop.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5315fbdd2a356385eae20cbedf98e9d1
+* @checksum 2a1b662e7a76ba7fd6598263391878ba
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface LaptopProps extends LGGlyph.ComponentProps {}
+
 const Laptop = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: LaptopProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Laptop', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Laptop', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M5 6C5 5.72386 5.22386 5.5 5.5 5.5H10.5C10.7761 5.5 11 5.72386 11 6C11 6.27614 10.7761 6.5 10.5 6.5H5.5C5.22386 6.5 5 6.27614 5 6Z" fill="currentColor" /><path d="M5.5 7.5C5.22386 7.5 5 7.72386 5 8C5 8.27614 5.22386 8.5 5.5 8.5H8.5C8.77614 8.5 9 8.27614 9 8C9 7.72386 8.77614 7.5 8.5 7.5H5.5Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M3 2.5C2.44772 2.5 2 2.94772 2 3.5V11.313L1.7092 11.8035C1.68453 11.8351 1.66251 11.869 1.64218 11.9037L1 13C1 13.5523 1.44772 14 2 14L14 14C14.5523 14 15 13.5523 15 13L14.3578 11.9037C14.3375 11.869 14.3155 11.8351 14.2908 11.8035L14 11.313V3.5C14 2.94772 13.5523 2.5 13 2.5H3ZM12.5 4H3.5V10.5H12.5V4Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M5 6C5 5.72386 5.22386 5.5 5.5 5.5H10.5C10.7761 5.5 11 5.72386 11 6C11 6.27614 10.7761 6.5 10.5 6.5H5.5C5.22386 6.5 5 6.27614 5 6Z" fill={'currentColor'} /><path d="M5.5 7.5C5.22386 7.5 5 7.72386 5 8C5 8.27614 5.22386 8.5 5.5 8.5H8.5C8.77614 8.5 9 8.27614 9 8C9 7.72386 8.77614 7.5 8.5 7.5H5.5Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M3 2.5C2.44772 2.5 2 2.94772 2 3.5V11.313L1.7092 11.8035C1.68453 11.8351 1.66251 11.869 1.64218 11.9037L1 13C1 13.5523 1.44772 14 2 14L14 14C14.5523 14 15 13.5523 15 13L14.3578 11.9037C14.3375 11.869 14.3155 11.8351 14.2908 11.8035L14 11.313V3.5C14 2.94772 13.5523 2.5 13 2.5H3ZM12.5 4H3.5V10.5H12.5V4Z" fill={'currentColor'} /></svg>;
 };
+
 Laptop.displayName = 'Laptop';
 Laptop.isGlyph = true;
+
 export default Laptop;
\ No newline at end of file
diff --git a/packages/icon/src/generated/LightningBolt.tsx b/packages/icon/src/generated/LightningBolt.tsx
index 3b732ed39a..83ba7016d0 100644
--- a/packages/icon/src/generated/LightningBolt.tsx
+++ b/packages/icon/src/generated/LightningBolt.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a10c975ffb48562637f9e402998205cb
+* @checksum e9acb14400d94009ae919c93d32a71aa
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface LightningBoltProps extends LGGlyph.ComponentProps {}
+
 const LightningBolt = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: LightningBoltProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'LightningBolt', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'LightningBolt', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M9.22274 1.99296C9.22274 1.49561 8.56293 1.31233 8.30107 1.73667L4.07384 8.58696C3.87133 8.91513 4.10921 9.33717 4.49748 9.33717H6.77682L6.77682 14.0066C6.77682 14.504 7.43627 14.6879 7.69813 14.2635L11.9262 7.4118C12.1288 7.08363 11.8903 6.66244 11.5021 6.66244H9.22274V1.99296Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M9.22274 1.99296C9.22274 1.49561 8.56293 1.31233 8.30107 1.73667L4.07384 8.58696C3.87133 8.91513 4.10921 9.33717 4.49748 9.33717H6.77682L6.77682 14.0066C6.77682 14.504 7.43627 14.6879 7.69813 14.2635L11.9262 7.4118C12.1288 7.08363 11.8903 6.66244 11.5021 6.66244H9.22274V1.99296Z" fill={'currentColor'} /></svg>;
 };
+
 LightningBolt.displayName = 'LightningBolt';
 LightningBolt.isGlyph = true;
+
 export default LightningBolt;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Link.tsx b/packages/icon/src/generated/Link.tsx
index e3cff4d629..4e58ddcb67 100644
--- a/packages/icon/src/generated/Link.tsx
+++ b/packages/icon/src/generated/Link.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5d87561d3f971173e87897338a2a5b8f
+* @checksum 64f1100bd5e6d502086b90222fc02f37
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface LinkProps extends LGGlyph.ComponentProps {}
+
 const Link = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: LinkProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Link', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Link', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M6.03867 9.95309C5.91948 9.8323 5.81065 9.70512 5.71217 9.57265L7.16282 8.12843C7.2355 8.27756 7.33323 8.41753 7.45605 8.54199C8.06167 9.15571 9.04795 9.1601 9.65896 8.55179L12.5432 5.68033C13.1542 5.07203 13.1586 4.08138 12.553 3.46767C11.9473 2.85395 10.9611 2.84956 10.3501 3.45786L9.97109 3.83515C9.5797 4.22481 8.94791 4.222 8.55996 3.82887C8.17202 3.43574 8.17482 2.80115 8.56622 2.41149L8.94518 2.03421C10.339 0.646579 12.5888 0.656589 13.9703 2.05657C15.3519 3.45655 15.3419 5.71635 13.9481 7.10399L11.0638 9.97545C9.67003 11.3631 7.42018 11.3531 6.03867 9.95309Z" fill="currentColor" /><path d="M9.96133 6.04691C10.0805 6.1677 10.1894 6.29488 10.2878 6.42735L8.83718 7.87157C8.7645 7.72244 8.66677 7.58247 8.54395 7.45801C7.93833 6.84429 6.95205 6.83991 6.34104 7.44821L3.45679 10.3197C2.84578 10.928 2.84141 11.9186 3.44703 12.5323C4.05265 13.1461 5.03893 13.1504 5.64994 12.5421L6.02891 12.1649C6.4203 11.7752 7.05209 11.778 7.44004 12.1711C7.82798 12.5643 7.82518 13.1988 7.43378 13.5885L7.05482 13.9658C5.66101 15.3534 3.41117 15.3434 2.02965 13.9434C0.648136 12.5435 0.658103 10.2836 2.05191 8.89601L4.93616 6.02455C6.32997 4.63692 8.57982 4.64693 9.96133 6.04691Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M6.03867 9.95309C5.91948 9.8323 5.81065 9.70512 5.71217 9.57265L7.16282 8.12843C7.2355 8.27756 7.33323 8.41753 7.45605 8.54199C8.06167 9.15571 9.04795 9.1601 9.65896 8.55179L12.5432 5.68033C13.1542 5.07203 13.1586 4.08138 12.553 3.46767C11.9473 2.85395 10.9611 2.84956 10.3501 3.45786L9.97109 3.83515C9.5797 4.22481 8.94791 4.222 8.55996 3.82887C8.17202 3.43574 8.17482 2.80115 8.56622 2.41149L8.94518 2.03421C10.339 0.646579 12.5888 0.656589 13.9703 2.05657C15.3519 3.45655 15.3419 5.71635 13.9481 7.10399L11.0638 9.97545C9.67003 11.3631 7.42018 11.3531 6.03867 9.95309Z" fill={'currentColor'} /><path d="M9.96133 6.04691C10.0805 6.1677 10.1894 6.29488 10.2878 6.42735L8.83718 7.87157C8.7645 7.72244 8.66677 7.58247 8.54395 7.45801C7.93833 6.84429 6.95205 6.83991 6.34104 7.44821L3.45679 10.3197C2.84578 10.928 2.84141 11.9186 3.44703 12.5323C4.05265 13.1461 5.03893 13.1504 5.64994 12.5421L6.02891 12.1649C6.4203 11.7752 7.05209 11.778 7.44004 12.1711C7.82798 12.5643 7.82518 13.1988 7.43378 13.5885L7.05482 13.9658C5.66101 15.3534 3.41117 15.3434 2.02965 13.9434C0.648136 12.5435 0.658103 10.2836 2.05191 8.89601L4.93616 6.02455C6.32997 4.63692 8.57982 4.64693 9.96133 6.04691Z" fill={'currentColor'} /></svg>;
 };
+
 Link.displayName = 'Link';
 Link.isGlyph = true;
+
 export default Link;
\ No newline at end of file
diff --git a/packages/icon/src/generated/List.tsx b/packages/icon/src/generated/List.tsx
index 6520edf46b..8083d85889 100644
--- a/packages/icon/src/generated/List.tsx
+++ b/packages/icon/src/generated/List.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7b3c59c5c1f8183c33c10b130225e3d6
+* @checksum a73cfb1ca8759a6613fecd113af85c72
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ListProps extends LGGlyph.ComponentProps {}
+
 const List = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ListProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'List', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'List', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M3.125 2.75C2.43464 2.75 1.875 3.30964 1.875 4C1.875 4.69036 2.43464 5.25 3.125 5.25C3.81536 5.25 4.375 4.69036 4.375 4C4.375 3.30964 3.81536 2.75 3.125 2.75Z" fill="currentColor" /><path d="M3.125 6.75C2.43464 6.75 1.875 7.30964 1.875 8C1.875 8.69036 2.43464 9.25 3.125 9.25C3.81536 9.25 4.375 8.69036 4.375 8C4.375 7.30964 3.81536 6.75 3.125 6.75Z" fill="currentColor" /><path d="M1.875 12C1.875 11.3096 2.43464 10.75 3.125 10.75C3.81536 10.75 4.375 11.3096 4.375 12C4.375 12.6904 3.81536 13.25 3.125 13.25C2.43464 13.25 1.875 12.6904 1.875 12Z" fill="currentColor" /><path d="M6.625 3C6.07272 3 5.625 3.44772 5.625 4C5.625 4.55228 6.07272 5 6.625 5H13.125C13.6773 5 14.125 4.55228 14.125 4C14.125 3.44772 13.6773 3 13.125 3H6.625Z" fill="currentColor" /><path d="M5.625 8C5.625 7.44772 6.07272 7 6.625 7H13.125C13.6773 7 14.125 7.44772 14.125 8C14.125 8.55228 13.6773 9 13.125 9H6.625C6.07272 9 5.625 8.55228 5.625 8Z" fill="currentColor" /><path d="M6.625 11C6.07272 11 5.625 11.4477 5.625 12C5.625 12.5523 6.07272 13 6.625 13H13.125C13.6773 13 14.125 12.5523 14.125 12C14.125 11.4477 13.6773 11 13.125 11H6.625Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3.125 2.75C2.43464 2.75 1.875 3.30964 1.875 4C1.875 4.69036 2.43464 5.25 3.125 5.25C3.81536 5.25 4.375 4.69036 4.375 4C4.375 3.30964 3.81536 2.75 3.125 2.75Z" fill={'currentColor'} /><path d="M3.125 6.75C2.43464 6.75 1.875 7.30964 1.875 8C1.875 8.69036 2.43464 9.25 3.125 9.25C3.81536 9.25 4.375 8.69036 4.375 8C4.375 7.30964 3.81536 6.75 3.125 6.75Z" fill={'currentColor'} /><path d="M1.875 12C1.875 11.3096 2.43464 10.75 3.125 10.75C3.81536 10.75 4.375 11.3096 4.375 12C4.375 12.6904 3.81536 13.25 3.125 13.25C2.43464 13.25 1.875 12.6904 1.875 12Z" fill={'currentColor'} /><path d="M6.625 3C6.07272 3 5.625 3.44772 5.625 4C5.625 4.55228 6.07272 5 6.625 5H13.125C13.6773 5 14.125 4.55228 14.125 4C14.125 3.44772 13.6773 3 13.125 3H6.625Z" fill={'currentColor'} /><path d="M5.625 8C5.625 7.44772 6.07272 7 6.625 7H13.125C13.6773 7 14.125 7.44772 14.125 8C14.125 8.55228 13.6773 9 13.125 9H6.625C6.07272 9 5.625 8.55228 5.625 8Z" fill={'currentColor'} /><path d="M6.625 11C6.07272 11 5.625 11.4477 5.625 12C5.625 12.5523 6.07272 13 6.625 13H13.125C13.6773 13 14.125 12.5523 14.125 12C14.125 11.4477 13.6773 11 13.125 11H6.625Z" fill={'currentColor'} /></svg>;
 };
+
 List.displayName = 'List';
 List.isGlyph = true;
+
 export default List;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Lock.tsx b/packages/icon/src/generated/Lock.tsx
index c5df97be87..a1589e4ecf 100644
--- a/packages/icon/src/generated/Lock.tsx
+++ b/packages/icon/src/generated/Lock.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum db2944b5ea90810bd2054f7f98e32b30
+* @checksum 2dd67a2ddfa31d99db10fdc75c8c687a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface LockProps extends LGGlyph.ComponentProps {}
+
 const Lock = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: LockProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Lock', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Lock', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M4 7V5C4 2.79086 5.79086 1 8 1C10.2091 1 12 2.79086 12 5V7C12.5523 7 13 7.44772 13 8V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V8C3 7.44772 3.44772 7 4 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM8.58667 10.8099C8.83712 10.6282 9 10.3331 9 10C9 9.44771 8.55228 9 8 9C7.44772 9 7 9.44771 7 10C7 10.3361 7.16577 10.6334 7.42 10.8147V12.6667C7.42 12.9888 7.68117 13.25 8.00333 13.25C8.3255 13.25 8.58667 12.9888 8.58667 12.6667V10.8099Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M4 7V5C4 2.79086 5.79086 1 8 1C10.2091 1 12 2.79086 12 5V7C12.5523 7 13 7.44772 13 8V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V8C3 7.44772 3.44772 7 4 7ZM6 5C6 3.89543 6.89543 3 8 3C9.10457 3 10 3.89543 10 5V7H6V5ZM8.58667 10.8099C8.83712 10.6282 9 10.3331 9 10C9 9.44771 8.55228 9 8 9C7.44772 9 7 9.44771 7 10C7 10.3361 7.16577 10.6334 7.42 10.8147V12.6667C7.42 12.9888 7.68117 13.25 8.00333 13.25C8.3255 13.25 8.58667 12.9888 8.58667 12.6667V10.8099Z" fill={'currentColor'} /></svg>;
 };
+
 Lock.displayName = 'Lock';
 Lock.isGlyph = true;
+
 export default Lock;
\ No newline at end of file
diff --git a/packages/icon/src/generated/LogIn.tsx b/packages/icon/src/generated/LogIn.tsx
index 69d5325646..98c521d270 100644
--- a/packages/icon/src/generated/LogIn.tsx
+++ b/packages/icon/src/generated/LogIn.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3d056d9e5165a7723128a420b4ad15ec
+* @checksum b80cdfc6208e753838b316794bc4f9bd
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface LogInProps extends LGGlyph.ComponentProps {}
+
 const LogIn = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: LogInProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'LogIn', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'LogIn', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M15 13C15 13.5523 14.5523 14 14 14H9.75C9.33579 14 9 13.6642 9 13.25V12.75C9 12.3358 9.33579 12 9.75 12H13V4H9.75C9.33579 4 9 3.66421 9 3.25V2.75C9 2.33579 9.33579 2 9.75 2H14C14.5523 2 15 2.44771 15 3V13Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M6.5052 11.8839L9.70711 8.68198C10.0976 8.29146 10.0976 7.65829 9.70711 7.26777L6.50521 4.06586C6.21231 3.77297 5.73744 3.77297 5.44454 4.06586L5.09099 4.41942C4.7981 4.71231 4.7981 5.18718 5.09099 5.48008L6.61091 7L1.75 7C1.33579 7 1 7.33579 1 7.75V8.25C1 8.66422 1.33579 9 1.75 9L6.56066 9L5.09099 10.4697C4.7981 10.7626 4.7981 11.2374 5.09099 11.5303L5.44454 11.8839C5.73744 12.1768 6.21231 12.1768 6.5052 11.8839Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M15 13C15 13.5523 14.5523 14 14 14H9.75C9.33579 14 9 13.6642 9 13.25V12.75C9 12.3358 9.33579 12 9.75 12H13V4H9.75C9.33579 4 9 3.66421 9 3.25V2.75C9 2.33579 9.33579 2 9.75 2H14C14.5523 2 15 2.44771 15 3V13Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M6.5052 11.8839L9.70711 8.68198C10.0976 8.29146 10.0976 7.65829 9.70711 7.26777L6.50521 4.06586C6.21231 3.77297 5.73744 3.77297 5.44454 4.06586L5.09099 4.41942C4.7981 4.71231 4.7981 5.18718 5.09099 5.48008L6.61091 7L1.75 7C1.33579 7 1 7.33579 1 7.75V8.25C1 8.66422 1.33579 9 1.75 9L6.56066 9L5.09099 10.4697C4.7981 10.7626 4.7981 11.2374 5.09099 11.5303L5.44454 11.8839C5.73744 12.1768 6.21231 12.1768 6.5052 11.8839Z" fill={'currentColor'} /></svg>;
 };
+
 LogIn.displayName = 'LogIn';
 LogIn.isGlyph = true;
+
 export default LogIn;
\ No newline at end of file
diff --git a/packages/icon/src/generated/LogOut.tsx b/packages/icon/src/generated/LogOut.tsx
index 31d4ccc9ee..ccd9ac2684 100644
--- a/packages/icon/src/generated/LogOut.tsx
+++ b/packages/icon/src/generated/LogOut.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 00b937d8d2060846b56a44d9edf553ce
+* @checksum c017abb15a76d71c93f8a19a4723f19e
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface LogOutProps extends LGGlyph.ComponentProps {}
+
 const LogOut = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: LogOutProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'LogOut', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'LogOut', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1.5 3.00002C1.5 2.44773 1.94557 2.00002 2.49522 2.00002H6.72488C7.13711 2.00002 7.47129 2.3358 7.47129 2.75002V3.25002C7.47129 3.66423 7.13711 4.00002 6.72488 4.00002H3.49043V12H6.72488C7.13711 12 7.47129 12.3358 7.47129 12.75V13.25C7.47129 13.6642 7.13711 14 6.72488 14H2.49522C1.94557 14 1.5 13.5523 1.5 13V3.00002Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M11.0219 11.909L14.2085 8.7071C14.5972 8.31658 14.5972 7.68341 14.2085 7.29289L11.0219 4.09099C10.7304 3.79809 10.2578 3.79809 9.96634 4.09098L9.61448 4.44454C9.32299 4.73743 9.32299 5.2123 9.61448 5.5052L11.1271 7.02512L6.28947 7.02512C5.87724 7.02512 5.54306 7.36091 5.54306 7.77512V8.27512C5.54306 8.68934 5.87724 9.02512 6.28947 9.02512L11.0771 9.02512L9.61448 10.4948C9.32299 10.7877 9.32299 11.2626 9.61448 11.5555L9.96634 11.909C10.2578 12.2019 10.7304 12.2019 11.0219 11.909Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1.5 3.00002C1.5 2.44773 1.94557 2.00002 2.49522 2.00002H6.72488C7.13711 2.00002 7.47129 2.3358 7.47129 2.75002V3.25002C7.47129 3.66423 7.13711 4.00002 6.72488 4.00002H3.49043V12H6.72488C7.13711 12 7.47129 12.3358 7.47129 12.75V13.25C7.47129 13.6642 7.13711 14 6.72488 14H2.49522C1.94557 14 1.5 13.5523 1.5 13V3.00002Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M11.0219 11.909L14.2085 8.7071C14.5972 8.31658 14.5972 7.68341 14.2085 7.29289L11.0219 4.09099C10.7304 3.79809 10.2578 3.79809 9.96634 4.09098L9.61448 4.44454C9.32299 4.73743 9.32299 5.2123 9.61448 5.5052L11.1271 7.02512L6.28947 7.02512C5.87724 7.02512 5.54306 7.36091 5.54306 7.77512V8.27512C5.54306 8.68934 5.87724 9.02512 6.28947 9.02512L11.0771 9.02512L9.61448 10.4948C9.32299 10.7877 9.32299 11.2626 9.61448 11.5555L9.96634 11.909C10.2578 12.2019 10.7304 12.2019 11.0219 11.909Z" fill={'currentColor'} /></svg>;
 };
+
 LogOut.displayName = 'LogOut';
 LogOut.isGlyph = true;
+
 export default LogOut;
\ No newline at end of file
diff --git a/packages/icon/src/generated/MagnifyingGlass.tsx b/packages/icon/src/generated/MagnifyingGlass.tsx
index 38d7236592..e04f882e27 100644
--- a/packages/icon/src/generated/MagnifyingGlass.tsx
+++ b/packages/icon/src/generated/MagnifyingGlass.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 60b361f5d943c43ba4d2a55de4f99347
+* @checksum 9fe12e764e73dba7752bb42008bdce13
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MagnifyingGlassProps extends LGGlyph.ComponentProps {}
+
 const MagnifyingGlass = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MagnifyingGlassProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'MagnifyingGlass', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'MagnifyingGlass', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M2.3234 9.81874C4.07618 11.5715 6.75062 11.8398 8.78588 10.6244L12.93 14.7685C13.4377 15.2762 14.2608 15.2762 14.7685 14.7685C15.2762 14.2608 15.2762 13.4377 14.7685 12.93L10.6244 8.78588C11.8398 6.75062 11.5715 4.07619 9.81873 2.32341C7.74896 0.253628 4.39318 0.253628 2.3234 2.32341C0.253624 4.39319 0.253624 7.74896 2.3234 9.81874ZM7.98026 4.16188C9.03467 5.2163 9.03467 6.92585 7.98026 7.98026C6.92584 9.03468 5.2163 9.03468 4.16188 7.98026C3.10746 6.92585 3.10746 5.2163 4.16188 4.16188C5.2163 3.10747 6.92584 3.10747 7.98026 4.16188Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M2.3234 9.81874C4.07618 11.5715 6.75062 11.8398 8.78588 10.6244L12.93 14.7685C13.4377 15.2762 14.2608 15.2762 14.7685 14.7685C15.2762 14.2608 15.2762 13.4377 14.7685 12.93L10.6244 8.78588C11.8398 6.75062 11.5715 4.07619 9.81873 2.32341C7.74896 0.253628 4.39318 0.253628 2.3234 2.32341C0.253624 4.39319 0.253624 7.74896 2.3234 9.81874ZM7.98026 4.16188C9.03467 5.2163 9.03467 6.92585 7.98026 7.98026C6.92584 9.03468 5.2163 9.03468 4.16188 7.98026C3.10746 6.92585 3.10746 5.2163 4.16188 4.16188C5.2163 3.10747 6.92584 3.10747 7.98026 4.16188Z" fill={'currentColor'} /></svg>;
 };
+
 MagnifyingGlass.displayName = 'MagnifyingGlass';
 MagnifyingGlass.isGlyph = true;
+
 export default MagnifyingGlass;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Megaphone.tsx b/packages/icon/src/generated/Megaphone.tsx
index 2f1dad0219..c3296a63cd 100644
--- a/packages/icon/src/generated/Megaphone.tsx
+++ b/packages/icon/src/generated/Megaphone.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 90dad46833764f8613e8b83f3c00a376
+* @checksum d295916bd016e42fbcd1d1511d362250
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MegaphoneProps extends LGGlyph.ComponentProps {}
+
 const Megaphone = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MegaphoneProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Megaphone', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Megaphone', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M6 3L11.7253 1.3642C12.3641 1.18168 13 1.66135 13 2.32573V4.26756V7.73243V9.67427C13 10.3386 12.3641 10.8183 11.7253 10.6358L6 9H3C1.89543 9 1 8.10457 1 7V5C1 3.89543 1.89543 3 3 3H6ZM5.34325 10H3V15H5.97958C6.69851 15 7.18255 14.2641 6.8978 13.6039L5.34325 10ZM16 6C16 7.10457 15.1046 8 14 8V4C15.1046 4 16 4.89543 16 6Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M6 3L11.7253 1.3642C12.3641 1.18168 13 1.66135 13 2.32573V4.26756V7.73243V9.67427C13 10.3386 12.3641 10.8183 11.7253 10.6358L6 9H3C1.89543 9 1 8.10457 1 7V5C1 3.89543 1.89543 3 3 3H6ZM5.34325 10H3V15H5.97958C6.69851 15 7.18255 14.2641 6.8978 13.6039L5.34325 10ZM16 6C16 7.10457 15.1046 8 14 8V4C15.1046 4 16 4.89543 16 6Z" fill={'currentColor'} /></svg>;
 };
+
 Megaphone.displayName = 'Megaphone';
 Megaphone.isGlyph = true;
+
 export default Megaphone;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Menu.tsx b/packages/icon/src/generated/Menu.tsx
index 117888e45b..707c2b287d 100644
--- a/packages/icon/src/generated/Menu.tsx
+++ b/packages/icon/src/generated/Menu.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1302681cd46d65becd40e8e91b091765
+* @checksum 23a1d0e1565c8761e97fc6bd20ab968b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MenuProps extends LGGlyph.ComponentProps {}
+
 const Menu = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MenuProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Menu', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Menu', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2 4C2 3.44772 2.44772 3 3 3H13C13.5523 3 14 3.44772 14 4C14 4.55228 13.5523 5 13 5H3C2.44772 5 2 4.55228 2 4Z" fill="currentColor" /><path d="M2 8C2 7.44772 2.44772 7 3 7H13C13.5523 7 14 7.44772 14 8C14 8.55228 13.5523 9 13 9H3C2.44772 9 2 8.55228 2 8Z" fill="currentColor" /><path d="M3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H13C13.5523 13 14 12.5523 14 12C14 11.4477 13.5523 11 13 11H3Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2 4C2 3.44772 2.44772 3 3 3H13C13.5523 3 14 3.44772 14 4C14 4.55228 13.5523 5 13 5H3C2.44772 5 2 4.55228 2 4Z" fill={'currentColor'} /><path d="M2 8C2 7.44772 2.44772 7 3 7H13C13.5523 7 14 7.44772 14 8C14 8.55228 13.5523 9 13 9H3C2.44772 9 2 8.55228 2 8Z" fill={'currentColor'} /><path d="M3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H13C13.5523 13 14 12.5523 14 12C14 11.4477 13.5523 11 13 11H3Z" fill={'currentColor'} /></svg>;
 };
+
 Menu.displayName = 'Menu';
 Menu.isGlyph = true;
+
 export default Menu;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Minus.tsx b/packages/icon/src/generated/Minus.tsx
index e1b522f6ab..2f1f019439 100644
--- a/packages/icon/src/generated/Minus.tsx
+++ b/packages/icon/src/generated/Minus.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9c244c1119801dc22acac1be9bc51d04
+* @checksum 045136e0c7436d7f4971c60515a6a866
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MinusProps extends LGGlyph.ComponentProps {}
+
 const Minus = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MinusProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Minus', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Minus', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M3 6.5C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05229 2.44772 9.5 3 9.5C9.04335 9.5 7.79133 9.5 13 9.5C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94772 13.5523 6.5 13 6.5C7.79133 6.5 9.04335 6.5 3 6.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3 6.5C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05229 2.44772 9.5 3 9.5C9.04335 9.5 7.79133 9.5 13 9.5C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94772 13.5523 6.5 13 6.5C7.79133 6.5 9.04335 6.5 3 6.5Z" fill={'currentColor'} /></svg>;
 };
+
 Minus.displayName = 'Minus';
 Minus.isGlyph = true;
+
 export default Minus;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Mobile.tsx b/packages/icon/src/generated/Mobile.tsx
index dce6451424..47b80ced9f 100644
--- a/packages/icon/src/generated/Mobile.tsx
+++ b/packages/icon/src/generated/Mobile.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1d9da6a1ce4eeeb3e0c6cac6a588ea9a
+* @checksum d7bc3c5d766090ac44cd1ce535317746
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MobileProps extends LGGlyph.ComponentProps {}
+
 const Mobile = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MobileProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Mobile', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Mobile', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M11 3H5V13H11V3ZM5 1C4.44772 1 4 1.44772 4 2V14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14V2C12 1.44772 11.5523 1 11 1H5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M11 3H5V13H11V3ZM5 1C4.44772 1 4 1.44772 4 2V14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14V2C12 1.44772 11.5523 1 11 1H5Z" fill={'currentColor'} /></svg>;
 };
+
 Mobile.displayName = 'Mobile';
 Mobile.isGlyph = true;
+
 export default Mobile;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Moon.tsx b/packages/icon/src/generated/Moon.tsx
index 654563bfe6..e3e753d3f3 100644
--- a/packages/icon/src/generated/Moon.tsx
+++ b/packages/icon/src/generated/Moon.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d7a3f24b41ad4f62c488d74dbcbbf9fa
+* @checksum 8622ec0fd3c15186158212375fbc1e5b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MoonProps extends LGGlyph.ComponentProps {}
+
 const Moon = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MoonProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Moon', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Moon', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13.7868 10.0736C13.5564 9.8432 13.2012 9.7952 12.9228 9.9584C12.798 10.0352 12.6636 10.0928 12.5292 10.1504C10.7628 10.8704 8.6412 9.9392 7.8252 7.9424C7.0956 6.1472 7.7388 4.208 9.1692 3.3248C9.438 3.1616 9.5724 2.8352 9.486 2.5184C9.3996 2.2016 9.1116 2 8.7948 2H8.67C5.358 2 2.67 4.688 2.67 8C2.67 11.312 5.358 14 8.67 14C10.9164 14 12.8748 12.7616 13.902 10.9376C14.0652 10.6592 14.0076 10.304 13.7772 10.0736H13.7868Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.7868 10.0736C13.5564 9.8432 13.2012 9.7952 12.9228 9.9584C12.798 10.0352 12.6636 10.0928 12.5292 10.1504C10.7628 10.8704 8.6412 9.9392 7.8252 7.9424C7.0956 6.1472 7.7388 4.208 9.1692 3.3248C9.438 3.1616 9.5724 2.8352 9.486 2.5184C9.3996 2.2016 9.1116 2 8.7948 2H8.67C5.358 2 2.67 4.688 2.67 8C2.67 11.312 5.358 14 8.67 14C10.9164 14 12.8748 12.7616 13.902 10.9376C14.0652 10.6592 14.0076 10.304 13.7772 10.0736H13.7868Z" fill={'currentColor'} /></svg>;
 };
+
 Moon.displayName = 'Moon';
 Moon.isGlyph = true;
+
 export default Moon;
\ No newline at end of file
diff --git a/packages/icon/src/generated/MultiDirectionArrow.tsx b/packages/icon/src/generated/MultiDirectionArrow.tsx
index 07aaacc146..47d71d012f 100644
--- a/packages/icon/src/generated/MultiDirectionArrow.tsx
+++ b/packages/icon/src/generated/MultiDirectionArrow.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c7cc7e4f42011f561655f1bd43f40695
+* @checksum 360ede32ca7094f6c97ad65452f501c8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MultiDirectionArrowProps extends LGGlyph.ComponentProps {}
+
 const MultiDirectionArrow = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MultiDirectionArrowProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'MultiDirectionArrow', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'MultiDirectionArrow', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M5 8.57279V13.4272C5 13.9565 4.39241 14.2015 4.0721 13.8014L2.12898 11.3742C1.95701 11.1594 1.95701 10.8406 2.12898 10.6258L4.0721 8.19856C4.39241 7.79846 5 8.04351 5 8.57279Z" fill="currentColor" /><path d="M5 10H12.5C12.7761 10 13 10.2239 13 10.5V11.5C13 11.7761 12.7761 12 12.5 12H5V10Z" fill="currentColor" /><path d="M11 7.42721V2.57279C11 2.04351 11.6076 1.79846 11.9279 2.19856L13.871 4.62577C14.043 4.84058 14.043 5.15942 13.871 5.37423L11.9279 7.80144C11.6076 8.20154 11 7.95649 11 7.42721Z" fill="currentColor" /><path d="M3 4.5C3 4.22386 3.22386 4 3.5 4H11V6H3.5C3.22386 6 3 5.77614 3 5.5V4.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M5 8.57279V13.4272C5 13.9565 4.39241 14.2015 4.0721 13.8014L2.12898 11.3742C1.95701 11.1594 1.95701 10.8406 2.12898 10.6258L4.0721 8.19856C4.39241 7.79846 5 8.04351 5 8.57279Z" fill={'currentColor'} /><path d="M5 10H12.5C12.7761 10 13 10.2239 13 10.5V11.5C13 11.7761 12.7761 12 12.5 12H5V10Z" fill={'currentColor'} /><path d="M11 7.42721V2.57279C11 2.04351 11.6076 1.79846 11.9279 2.19856L13.871 4.62577C14.043 4.84058 14.043 5.15942 13.871 5.37423L11.9279 7.80144C11.6076 8.20154 11 7.95649 11 7.42721Z" fill={'currentColor'} /><path d="M3 4.5C3 4.22386 3.22386 4 3.5 4H11V6H3.5C3.22386 6 3 5.77614 3 5.5V4.5Z" fill={'currentColor'} /></svg>;
 };
+
 MultiDirectionArrow.displayName = 'MultiDirectionArrow';
 MultiDirectionArrow.isGlyph = true;
+
 export default MultiDirectionArrow;
\ No newline at end of file
diff --git a/packages/icon/src/generated/MultiLayers.tsx b/packages/icon/src/generated/MultiLayers.tsx
index 921d442353..d03ce0e137 100644
--- a/packages/icon/src/generated/MultiLayers.tsx
+++ b/packages/icon/src/generated/MultiLayers.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 54a552a4db8de48df83aad856752f1d6
+* @checksum 2ca2b2894a5ade52d4a7e9254eb7fbfd
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface MultiLayersProps extends LGGlyph.ComponentProps {}
+
 const MultiLayers = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: MultiLayersProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'MultiLayers', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'MultiLayers', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M12.4311 9.74514L12.1717 9.62373L12.4311 9.50233C12.7321 9.3607 13.0019 9.15837 13.1887 8.90545C13.3858 8.65253 13.5 8.32879 13.5 8.00506C13.5 7.68132 13.3858 7.3677 13.1887 7.10467C12.9915 6.85175 12.7321 6.64942 12.4311 6.50778L12.1406 6.36615L12.3585 6.26498C12.6594 6.12335 12.9292 5.92101 13.116 5.66809C13.3132 5.41517 13.4274 5.09144 13.4274 4.7677C13.4274 4.44397 13.3132 4.13035 13.116 3.86732C12.9189 3.6144 12.6594 3.41206 12.3585 3.27043L9.1934 1.76303C8.79906 1.58093 8.38396 1.5 7.96887 1.5C7.55377 1.5 7.1283 1.58093 6.74434 1.76303L3.56887 3.27043C3.26792 3.41206 2.99811 3.6144 2.81132 3.86732C2.61415 4.12023 2.5 4.44397 2.5 4.7677C2.5 5.09144 2.61415 5.40506 2.81132 5.66809C3.00849 5.92101 3.26792 6.12335 3.56887 6.26498L3.85943 6.40661L3.64151 6.50778C3.34057 6.64942 3.07075 6.85175 2.88396 7.10467C2.68679 7.35759 2.57264 7.68132 2.57264 8.00506C2.57264 8.32879 2.68679 8.64241 2.88396 8.90545C3.08113 9.15837 3.34057 9.3607 3.64151 9.50233L3.90094 9.62373L3.64151 9.74514C3.34057 9.88677 3.07075 10.0891 2.88396 10.342C2.68679 10.5949 2.57264 10.9187 2.57264 11.2424C2.57264 11.5661 2.68679 11.8798 2.88396 12.1428C3.08113 12.3957 3.34057 12.5981 3.64151 12.7397L6.8066 14.237C7.19057 14.4191 7.61604 14.5 8.03113 14.5C8.44623 14.5 8.8717 14.4191 9.25566 14.237L12.4208 12.7397C12.7217 12.5981 12.9915 12.3957 13.1783 12.1428C13.3755 11.8899 13.4896 11.5661 13.4896 11.2424C13.4896 10.9187 13.3755 10.6051 13.1783 10.342C12.9811 10.0891 12.7217 9.88677 12.4208 9.74514H12.4311ZM8.04151 12.9926C7.83396 12.9926 7.63679 12.9521 7.50189 12.8813L4.33679 11.384C4.22264 11.3335 4.17075 11.2728 4.15 11.2525L4.17075 11.2323L4.33679 11.121L5.69623 10.4837L6.82736 11.0198C7.21132 11.2019 7.63679 11.2829 8.05189 11.2829C8.46698 11.2829 8.89245 11.2019 9.27642 11.0198L10.4075 10.4837L11.767 11.121C11.8811 11.1716 11.933 11.2323 11.9538 11.2525L11.933 11.2728L11.767 11.384L8.60189 12.8813C8.4566 12.9521 8.25943 12.9926 8.06226 12.9926H8.04151ZM4.13962 8.00506L4.16038 7.98482L4.32642 7.87354L5.64434 7.2463L6.74434 7.76226C7.1283 7.94436 7.55377 8.02529 7.96887 8.02529C8.38396 8.02529 8.80943 7.94436 9.1934 7.76226L10.366 7.20584L11.7566 7.86342C11.8708 7.91401 11.9226 7.97471 11.9434 7.99494L11.9226 8.01517L11.7566 8.12646L8.59151 9.62373C8.44623 9.69455 8.24906 9.73502 8.05189 9.73502C7.84434 9.73502 7.64717 9.69455 7.51226 9.62373L4.34717 8.12646C4.23302 8.07588 4.18113 8.01517 4.16038 7.99494L4.13962 8.00506ZM4.06698 4.7677L4.08774 4.74747L4.25377 4.63619L7.41887 3.13891C7.56415 3.06809 7.76132 3.02763 7.95849 3.02763C8.16604 3.02763 8.36321 3.06809 8.49811 3.13891L11.6632 4.63619C11.7774 4.68677 11.8292 4.74747 11.85 4.7677L11.8292 4.78794L11.6632 4.89922L8.49811 6.3965C8.35283 6.46731 8.15566 6.50778 7.95849 6.50778C7.75094 6.50778 7.55377 6.46731 7.41887 6.3965L4.25377 4.89922C4.13962 4.84864 4.08774 4.78794 4.06698 4.7677Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M12.4311 9.74514L12.1717 9.62373L12.4311 9.50233C12.7321 9.3607 13.0019 9.15837 13.1887 8.90545C13.3858 8.65253 13.5 8.32879 13.5 8.00506C13.5 7.68132 13.3858 7.3677 13.1887 7.10467C12.9915 6.85175 12.7321 6.64942 12.4311 6.50778L12.1406 6.36615L12.3585 6.26498C12.6594 6.12335 12.9292 5.92101 13.116 5.66809C13.3132 5.41517 13.4274 5.09144 13.4274 4.7677C13.4274 4.44397 13.3132 4.13035 13.116 3.86732C12.9189 3.6144 12.6594 3.41206 12.3585 3.27043L9.1934 1.76303C8.79906 1.58093 8.38396 1.5 7.96887 1.5C7.55377 1.5 7.1283 1.58093 6.74434 1.76303L3.56887 3.27043C3.26792 3.41206 2.99811 3.6144 2.81132 3.86732C2.61415 4.12023 2.5 4.44397 2.5 4.7677C2.5 5.09144 2.61415 5.40506 2.81132 5.66809C3.00849 5.92101 3.26792 6.12335 3.56887 6.26498L3.85943 6.40661L3.64151 6.50778C3.34057 6.64942 3.07075 6.85175 2.88396 7.10467C2.68679 7.35759 2.57264 7.68132 2.57264 8.00506C2.57264 8.32879 2.68679 8.64241 2.88396 8.90545C3.08113 9.15837 3.34057 9.3607 3.64151 9.50233L3.90094 9.62373L3.64151 9.74514C3.34057 9.88677 3.07075 10.0891 2.88396 10.342C2.68679 10.5949 2.57264 10.9187 2.57264 11.2424C2.57264 11.5661 2.68679 11.8798 2.88396 12.1428C3.08113 12.3957 3.34057 12.5981 3.64151 12.7397L6.8066 14.237C7.19057 14.4191 7.61604 14.5 8.03113 14.5C8.44623 14.5 8.8717 14.4191 9.25566 14.237L12.4208 12.7397C12.7217 12.5981 12.9915 12.3957 13.1783 12.1428C13.3755 11.8899 13.4896 11.5661 13.4896 11.2424C13.4896 10.9187 13.3755 10.6051 13.1783 10.342C12.9811 10.0891 12.7217 9.88677 12.4208 9.74514H12.4311ZM8.04151 12.9926C7.83396 12.9926 7.63679 12.9521 7.50189 12.8813L4.33679 11.384C4.22264 11.3335 4.17075 11.2728 4.15 11.2525L4.17075 11.2323L4.33679 11.121L5.69623 10.4837L6.82736 11.0198C7.21132 11.2019 7.63679 11.2829 8.05189 11.2829C8.46698 11.2829 8.89245 11.2019 9.27642 11.0198L10.4075 10.4837L11.767 11.121C11.8811 11.1716 11.933 11.2323 11.9538 11.2525L11.933 11.2728L11.767 11.384L8.60189 12.8813C8.4566 12.9521 8.25943 12.9926 8.06226 12.9926H8.04151ZM4.13962 8.00506L4.16038 7.98482L4.32642 7.87354L5.64434 7.2463L6.74434 7.76226C7.1283 7.94436 7.55377 8.02529 7.96887 8.02529C8.38396 8.02529 8.80943 7.94436 9.1934 7.76226L10.366 7.20584L11.7566 7.86342C11.8708 7.91401 11.9226 7.97471 11.9434 7.99494L11.9226 8.01517L11.7566 8.12646L8.59151 9.62373C8.44623 9.69455 8.24906 9.73502 8.05189 9.73502C7.84434 9.73502 7.64717 9.69455 7.51226 9.62373L4.34717 8.12646C4.23302 8.07588 4.18113 8.01517 4.16038 7.99494L4.13962 8.00506ZM4.06698 4.7677L4.08774 4.74747L4.25377 4.63619L7.41887 3.13891C7.56415 3.06809 7.76132 3.02763 7.95849 3.02763C8.16604 3.02763 8.36321 3.06809 8.49811 3.13891L11.6632 4.63619C11.7774 4.68677 11.8292 4.74747 11.85 4.7677L11.8292 4.78794L11.6632 4.89922L8.49811 6.3965C8.35283 6.46731 8.15566 6.50778 7.95849 6.50778C7.75094 6.50778 7.55377 6.46731 7.41887 6.3965L4.25377 4.89922C4.13962 4.84864 4.08774 4.78794 4.06698 4.7677Z" fill={'currentColor'} /></svg>;
 };
+
 MultiLayers.displayName = 'MultiLayers';
 MultiLayers.isGlyph = true;
+
 export default MultiLayers;
\ No newline at end of file
diff --git a/packages/icon/src/generated/NavCollapse.tsx b/packages/icon/src/generated/NavCollapse.tsx
index 466fdc1df2..583320be7e 100644
--- a/packages/icon/src/generated/NavCollapse.tsx
+++ b/packages/icon/src/generated/NavCollapse.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7e1173827864fd0acaf7131938be6c0a
+* @checksum 89c6487c6f757f3a370e43f4d6f0d67f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface NavCollapseProps extends LGGlyph.ComponentProps {}
+
 const NavCollapse = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: NavCollapseProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'NavCollapse', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'NavCollapse', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M11.3891 4.81802C11.1938 4.62275 10.8772 4.62275 10.682 4.81802L7.85354 7.64644C7.65828 7.84171 7.65828 8.15829 7.85354 8.35355L10.682 11.182C10.8772 11.3772 11.1938 11.3772 11.3891 11.182L11.7426 10.8284C11.9379 10.6331 11.9379 10.3166 11.7426 10.1213L9.62131 8L11.7426 5.87868C11.9379 5.68342 11.9379 5.36683 11.7426 5.17157L11.3891 4.81802Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4ZM5 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V12C2.5 12.8284 3.17157 13.5 4 13.5H5L5 2.5ZM6.5 2.5L6.5 13.5H12C12.8284 13.5 13.5 12.8284 13.5 12V4C13.5 3.17157 12.8284 2.5 12 2.5H6.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M11.3891 4.81802C11.1938 4.62275 10.8772 4.62275 10.682 4.81802L7.85354 7.64644C7.65828 7.84171 7.65828 8.15829 7.85354 8.35355L10.682 11.182C10.8772 11.3772 11.1938 11.3772 11.3891 11.182L11.7426 10.8284C11.9379 10.6331 11.9379 10.3166 11.7426 10.1213L9.62131 8L11.7426 5.87868C11.9379 5.68342 11.9379 5.36683 11.7426 5.17157L11.3891 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4ZM5 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V12C2.5 12.8284 3.17157 13.5 4 13.5H5L5 2.5ZM6.5 2.5L6.5 13.5H12C12.8284 13.5 13.5 12.8284 13.5 12V4C13.5 3.17157 12.8284 2.5 12 2.5H6.5Z" fill={'currentColor'} /></svg>;
 };
+
 NavCollapse.displayName = 'NavCollapse';
 NavCollapse.isGlyph = true;
+
 export default NavCollapse;
\ No newline at end of file
diff --git a/packages/icon/src/generated/NavExpand.tsx b/packages/icon/src/generated/NavExpand.tsx
index 1e9e506d71..f6f04644c9 100644
--- a/packages/icon/src/generated/NavExpand.tsx
+++ b/packages/icon/src/generated/NavExpand.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bfe28d9a31cde7325ff344b05af73ff8
+* @checksum 9d62ee5fcab55c2ca552833d0fd65f03
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface NavExpandProps extends LGGlyph.ComponentProps {}
+
 const NavExpand = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: NavExpandProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'NavExpand', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'NavExpand', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M4.61091 4.81802C4.80616 4.62275 5.12277 4.62275 5.31803 4.81802L8.14646 7.64644C8.34172 7.84171 8.34172 8.15829 8.14646 8.35355L5.31803 11.182C5.12277 11.3772 4.80621 11.3772 4.61091 11.182L4.25736 10.8284C4.06211 10.6331 4.06211 10.3166 4.25736 10.1213L6.37869 8L4.25736 5.87868C4.06211 5.68342 4.06211 5.36683 4.25736 5.17157L4.61091 4.81802Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M12 1C13.6569 1 15 2.34315 15 4V12C15 13.6569 13.6569 15 12 15H4C2.34315 15 1 13.6569 1 12V4C1 2.34315 2.34315 1 4 1H12ZM11 2.5H12C12.8284 2.5 13.5 3.17157 13.5 4V12C13.5 12.8284 12.8284 13.5 12 13.5H11V2.5ZM9.5 2.5V13.5H4C3.17157 13.5 2.5 12.8284 2.5 12V4C2.5 3.17157 3.17157 2.5 4 2.5H9.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.61091 4.81802C4.80616 4.62275 5.12277 4.62275 5.31803 4.81802L8.14646 7.64644C8.34172 7.84171 8.34172 8.15829 8.14646 8.35355L5.31803 11.182C5.12277 11.3772 4.80621 11.3772 4.61091 11.182L4.25736 10.8284C4.06211 10.6331 4.06211 10.3166 4.25736 10.1213L6.37869 8L4.25736 5.87868C4.06211 5.68342 4.06211 5.36683 4.25736 5.17157L4.61091 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M12 1C13.6569 1 15 2.34315 15 4V12C15 13.6569 13.6569 15 12 15H4C2.34315 15 1 13.6569 1 12V4C1 2.34315 2.34315 1 4 1H12ZM11 2.5H12C12.8284 2.5 13.5 3.17157 13.5 4V12C13.5 12.8284 12.8284 13.5 12 13.5H11V2.5ZM9.5 2.5V13.5H4C3.17157 13.5 2.5 12.8284 2.5 12V4C2.5 3.17157 3.17157 2.5 4 2.5H9.5Z" fill={'currentColor'} /></svg>;
 };
+
 NavExpand.displayName = 'NavExpand';
 NavExpand.isGlyph = true;
+
 export default NavExpand;
\ No newline at end of file
diff --git a/packages/icon/src/generated/NoFilter.tsx b/packages/icon/src/generated/NoFilter.tsx
index 5c9ed69f33..f59b5cacad 100644
--- a/packages/icon/src/generated/NoFilter.tsx
+++ b/packages/icon/src/generated/NoFilter.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e9eab9c247dbec275fe6d580566d61dc
+* @checksum 1738881a6bd905d6e3a8c2cfe09b4a55
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface NoFilterProps extends LGGlyph.ComponentProps {}
+
 const NoFilter = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: NoFilterProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'NoFilter', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'NoFilter', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.60553 1.2041C2.21353 0.905115 1.65113 0.934737 1.29289 1.29297C0.902369 1.68349 0.902369 2.31666 1.29289 2.70718L7 8.41429V14.3981C7 14.8277 7.50596 15.0573 7.82925 14.7744L10.779 12.1933L13.2908 14.7051C13.6813 15.0956 14.3145 15.0956 14.705 14.7051C15.0955 14.3146 15.0955 13.6814 14.705 13.2909L12.8869 11.4728L12.8806 11.4791L2.60553 1.2041Z" fill="currentColor" /><path d="M10.5732 7.14947C10.7307 7.30696 11 7.19542 11 6.9727V6.14834L14.8005 2.20776C15.2025 1.79085 14.9563 1 14.4244 1H5.0273C4.80458 1 4.69304 1.26929 4.85053 1.42678L10.5732 7.14947Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.60553 1.2041C2.21353 0.905115 1.65113 0.934737 1.29289 1.29297C0.902369 1.68349 0.902369 2.31666 1.29289 2.70718L7 8.41429V14.3981C7 14.8277 7.50596 15.0573 7.82925 14.7744L10.779 12.1933L13.2908 14.7051C13.6813 15.0956 14.3145 15.0956 14.705 14.7051C15.0955 14.3146 15.0955 13.6814 14.705 13.2909L12.8869 11.4728L12.8806 11.4791L2.60553 1.2041Z" fill={'currentColor'} /><path d="M10.5732 7.14947C10.7307 7.30696 11 7.19542 11 6.9727V6.14834L14.8005 2.20776C15.2025 1.79085 14.9563 1 14.4244 1H5.0273C4.80458 1 4.69304 1.26929 4.85053 1.42678L10.5732 7.14947Z" fill={'currentColor'} /></svg>;
 };
+
 NoFilter.displayName = 'NoFilter';
 NoFilter.isGlyph = true;
+
 export default NoFilter;
\ No newline at end of file
diff --git a/packages/icon/src/generated/NotAllowed.tsx b/packages/icon/src/generated/NotAllowed.tsx
index e391cde356..812eb33af2 100644
--- a/packages/icon/src/generated/NotAllowed.tsx
+++ b/packages/icon/src/generated/NotAllowed.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 032177bb1c049b718edfcb232351db03
+* @checksum 5a9f9dbf1618f1886cef05d4b9b53973
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface NotAllowedProps extends LGGlyph.ComponentProps {}
+
 const NotAllowed = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: NotAllowedProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'NotAllowed', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'NotAllowed', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M11.75 8C11.75 10.0711 10.0711 11.75 8 11.75C7.37416 11.75 6.78413 11.5967 6.26542 11.3256L11.3256 6.26541C11.5967 6.78413 11.75 7.37416 11.75 8ZM4.67442 9.73459L9.73459 4.67442C9.21587 4.40331 8.62584 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 8.62584 4.40331 9.21587 4.67442 9.73459ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M11.75 8C11.75 10.0711 10.0711 11.75 8 11.75C7.37416 11.75 6.78413 11.5967 6.26542 11.3256L11.3256 6.26541C11.5967 6.78413 11.75 7.37416 11.75 8ZM4.67442 9.73459L9.73459 4.67442C9.21587 4.40331 8.62584 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 8.62584 4.40331 9.21587 4.67442 9.73459ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" fill={'currentColor'} /></svg>;
 };
+
 NotAllowed.displayName = 'NotAllowed';
 NotAllowed.isGlyph = true;
+
 export default NotAllowed;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Note.tsx b/packages/icon/src/generated/Note.tsx
index 19e20202a5..b83f4a4213 100644
--- a/packages/icon/src/generated/Note.tsx
+++ b/packages/icon/src/generated/Note.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 92571b38141a3b76af9af70766e8984f
+* @checksum 03a906c9edb5242fd9907c4d31d62562
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface NoteProps extends LGGlyph.ComponentProps {}
+
 const Note = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: NoteProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Note', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Note', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M4.5 6.25C4.5 5.83579 4.83579 5.5 5.25 5.5H8.75C9.16421 5.5 9.5 5.83579 9.5 6.25C9.5 6.66421 9.16421 7 8.75 7H5.25C4.83579 7 4.5 6.66421 4.5 6.25Z" fill="currentColor" /><path d="M4.5 8.75C4.5 8.33579 4.83579 8 5.25 8H6.75C7.16421 8 7.5 8.33579 7.5 8.75C7.5 9.16421 7.16421 9.5 6.75 9.5H5.25C4.83579 9.5 4.5 9.16421 4.5 8.75Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M15 10L11 14H3C1.89543 14 1 13.1046 1 12V4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10ZM13 4H3L3 12H10V10C10 9.44772 10.4477 9 11 9H13V4Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.5 6.25C4.5 5.83579 4.83579 5.5 5.25 5.5H8.75C9.16421 5.5 9.5 5.83579 9.5 6.25C9.5 6.66421 9.16421 7 8.75 7H5.25C4.83579 7 4.5 6.66421 4.5 6.25Z" fill={'currentColor'} /><path d="M4.5 8.75C4.5 8.33579 4.83579 8 5.25 8H6.75C7.16421 8 7.5 8.33579 7.5 8.75C7.5 9.16421 7.16421 9.5 6.75 9.5H5.25C4.83579 9.5 4.5 9.16421 4.5 8.75Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M15 10L11 14H3C1.89543 14 1 13.1046 1 12V4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10ZM13 4H3L3 12H10V10C10 9.44772 10.4477 9 11 9H13V4Z" fill={'currentColor'} /></svg>;
 };
+
 Note.displayName = 'Note';
 Note.isGlyph = true;
+
 export default Note;
\ No newline at end of file
diff --git a/packages/icon/src/generated/NumberedList.tsx b/packages/icon/src/generated/NumberedList.tsx
index 51e8a28c50..af6f1631d5 100644
--- a/packages/icon/src/generated/NumberedList.tsx
+++ b/packages/icon/src/generated/NumberedList.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 78d5ea655c25d7d086fb19cccabdd527
+* @checksum cce136c4768cdd44d5cfc2e908d1e2bd
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface NumberedListProps extends LGGlyph.ComponentProps {}
+
 const NumberedList = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: NumberedListProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'NumberedList', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'NumberedList', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.64914 4.29651C2.73717 4.39255 2.86522 4.45658 3.00128 4.45658C3.08131 4.45658 3.15334 4.44057 3.25738 4.41656L3.5615 4.33653V6.48138H3.12933C2.96126 6.48138 2.8012 6.50539 2.67315 6.61743C2.56911 6.71347 2.51308 6.84952 2.51308 6.98558C2.51308 7.12163 2.56911 7.26569 2.67315 7.36173C2.8012 7.47377 2.95326 7.49778 3.12933 7.49778H5.01007C5.18614 7.49778 5.3382 7.46577 5.46625 7.36173C5.57029 7.27369 5.62632 7.12964 5.62632 6.99358C5.62632 6.85753 5.57029 6.71347 5.46625 6.61743C5.3382 6.50539 5.18614 6.48138 5.01007 6.48138H4.5779V3L2.99327 3.40816C2.84121 3.45618 2.72917 3.48819 2.62513 3.59223C2.5451 3.68827 2.51308 3.80832 2.51308 3.92036C2.51308 4.04842 2.5611 4.18447 2.64914 4.28851V4.29651Z" fill="currentColor" /><path d="M5.15413 11.9876C5.05809 11.9876 4.97006 12.0276 4.89002 12.0756H4.12172C4.52188 11.7315 4.80199 11.4834 4.97806 11.3153C5.25817 11.0432 5.44224 10.8431 5.53828 10.651C5.62632 10.475 5.66633 10.2829 5.66633 10.0828C5.66633 9.69065 5.51427 9.33851 5.22616 9.07441C4.93804 8.8023 4.55389 8.65824 4.12172 8.66624C3.84161 8.66624 3.5695 8.73027 3.32941 8.85032C3.08931 8.97037 2.88923 9.14644 2.75318 9.36252C2.63313 9.5626 2.5531 9.73867 2.5531 9.92274C2.5531 10.0588 2.60912 10.1868 2.70516 10.2749C2.8012 10.3709 2.92925 10.4269 3.0653 10.4269C3.16934 10.4269 3.28139 10.3949 3.36942 10.3309C3.46546 10.2589 3.52148 10.1628 3.5535 10.0508C3.59351 9.93875 3.64153 9.86672 3.68155 9.8267C3.79359 9.73067 3.92164 9.68265 4.10571 9.68265C4.28979 9.68265 4.41784 9.73067 4.50587 9.8107C4.60191 9.89873 4.63392 9.97076 4.63392 10.0668C4.63392 10.1228 4.60191 10.2109 4.50587 10.3229C4.29779 10.563 3.60952 11.1632 2.49708 12.0916L2.42505 12.1556V13.108H5.66633V12.6118C5.66633 12.4357 5.64232 12.2837 5.53028 12.1556C5.44224 12.0516 5.29018 11.9956 5.15413 11.9956V11.9876Z" fill="currentColor" /><path d="M12.5731 11.0912H8.25936C7.70714 11.0912 7.25896 11.5394 7.25896 12.0916C7.25896 12.6438 7.70714 13.092 8.25936 13.092H12.5731C13.1253 13.092 13.5735 12.6438 13.5735 12.0916C13.5735 11.5394 13.1253 11.0912 12.5731 11.0912Z" fill="currentColor" /><path d="M8.25936 5.08883H12.5731C13.1253 5.08883 13.5735 4.64065 13.5735 4.08843C13.5735 3.53621 13.1253 3.08803 12.5731 3.08803H8.25936C7.70714 3.08803 7.25896 3.53621 7.25896 4.08843C7.25896 4.64065 7.70714 5.08883 8.25936 5.08883Z" fill="currentColor" /><path d="M12.5731 7.15365H8.25936C7.70714 7.15365 7.25896 7.60182 7.25896 8.15404C7.25896 8.70626 7.70714 9.15444 8.25936 9.15444H12.5731C13.1253 9.15444 13.5735 8.70626 13.5735 8.15404C13.5735 7.60182 13.1253 7.15365 12.5731 7.15365Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.64914 4.29651C2.73717 4.39255 2.86522 4.45658 3.00128 4.45658C3.08131 4.45658 3.15334 4.44057 3.25738 4.41656L3.5615 4.33653V6.48138H3.12933C2.96126 6.48138 2.8012 6.50539 2.67315 6.61743C2.56911 6.71347 2.51308 6.84952 2.51308 6.98558C2.51308 7.12163 2.56911 7.26569 2.67315 7.36173C2.8012 7.47377 2.95326 7.49778 3.12933 7.49778H5.01007C5.18614 7.49778 5.3382 7.46577 5.46625 7.36173C5.57029 7.27369 5.62632 7.12964 5.62632 6.99358C5.62632 6.85753 5.57029 6.71347 5.46625 6.61743C5.3382 6.50539 5.18614 6.48138 5.01007 6.48138H4.5779V3L2.99327 3.40816C2.84121 3.45618 2.72917 3.48819 2.62513 3.59223C2.5451 3.68827 2.51308 3.80832 2.51308 3.92036C2.51308 4.04842 2.5611 4.18447 2.64914 4.28851V4.29651Z" fill={'currentColor'} /><path d="M5.15413 11.9876C5.05809 11.9876 4.97006 12.0276 4.89002 12.0756H4.12172C4.52188 11.7315 4.80199 11.4834 4.97806 11.3153C5.25817 11.0432 5.44224 10.8431 5.53828 10.651C5.62632 10.475 5.66633 10.2829 5.66633 10.0828C5.66633 9.69065 5.51427 9.33851 5.22616 9.07441C4.93804 8.8023 4.55389 8.65824 4.12172 8.66624C3.84161 8.66624 3.5695 8.73027 3.32941 8.85032C3.08931 8.97037 2.88923 9.14644 2.75318 9.36252C2.63313 9.5626 2.5531 9.73867 2.5531 9.92274C2.5531 10.0588 2.60912 10.1868 2.70516 10.2749C2.8012 10.3709 2.92925 10.4269 3.0653 10.4269C3.16934 10.4269 3.28139 10.3949 3.36942 10.3309C3.46546 10.2589 3.52148 10.1628 3.5535 10.0508C3.59351 9.93875 3.64153 9.86672 3.68155 9.8267C3.79359 9.73067 3.92164 9.68265 4.10571 9.68265C4.28979 9.68265 4.41784 9.73067 4.50587 9.8107C4.60191 9.89873 4.63392 9.97076 4.63392 10.0668C4.63392 10.1228 4.60191 10.2109 4.50587 10.3229C4.29779 10.563 3.60952 11.1632 2.49708 12.0916L2.42505 12.1556V13.108H5.66633V12.6118C5.66633 12.4357 5.64232 12.2837 5.53028 12.1556C5.44224 12.0516 5.29018 11.9956 5.15413 11.9956V11.9876Z" fill={'currentColor'} /><path d="M12.5731 11.0912H8.25936C7.70714 11.0912 7.25896 11.5394 7.25896 12.0916C7.25896 12.6438 7.70714 13.092 8.25936 13.092H12.5731C13.1253 13.092 13.5735 12.6438 13.5735 12.0916C13.5735 11.5394 13.1253 11.0912 12.5731 11.0912Z" fill={'currentColor'} /><path d="M8.25936 5.08883H12.5731C13.1253 5.08883 13.5735 4.64065 13.5735 4.08843C13.5735 3.53621 13.1253 3.08803 12.5731 3.08803H8.25936C7.70714 3.08803 7.25896 3.53621 7.25896 4.08843C7.25896 4.64065 7.70714 5.08883 8.25936 5.08883Z" fill={'currentColor'} /><path d="M12.5731 7.15365H8.25936C7.70714 7.15365 7.25896 7.60182 7.25896 8.15404C7.25896 8.70626 7.70714 9.15444 8.25936 9.15444H12.5731C13.1253 9.15444 13.5735 8.70626 13.5735 8.15404C13.5735 7.60182 13.1253 7.15365 12.5731 7.15365Z" fill={'currentColor'} /></svg>;
 };
+
 NumberedList.displayName = 'NumberedList';
 NumberedList.isGlyph = true;
+
 export default NumberedList;
\ No newline at end of file
diff --git a/packages/icon/src/generated/OpenNewTab.tsx b/packages/icon/src/generated/OpenNewTab.tsx
index 06937e94c2..8a2bb162cd 100644
--- a/packages/icon/src/generated/OpenNewTab.tsx
+++ b/packages/icon/src/generated/OpenNewTab.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0550f2c3df7e2061ea801aecc3f4c8bd
+* @checksum 6be5ff635691e84fb92789fb9eeb188a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface OpenNewTabProps extends LGGlyph.ComponentProps {}
+
 const OpenNewTab = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: OpenNewTabProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'OpenNewTab', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'OpenNewTab', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13.823 2.4491C13.8201 2.30008 13.6999 2.17994 13.5509 2.17704L9.5062 2.09836C9.25654 2.09351 9.12821 2.39519 9.30482 2.5718L10.3856 3.65257L7.93433 6.10383C7.87964 6.15852 7.83047 6.21665 7.78683 6.27752L5.99909 8.06525C5.46457 8.59977 5.46457 9.4664 5.99909 10.0009C6.53361 10.5354 7.40023 10.5354 7.93475 10.0009L9.72249 8.21317C9.78336 8.16953 9.84148 8.12037 9.89618 8.06567L12.3474 5.61441L13.4282 6.69518C13.6048 6.87179 13.9065 6.74347 13.9016 6.4938L13.823 2.4491Z" fill="currentColor" /><path d="M7.25 3.12893C7.66421 3.12893 8 3.46472 8 3.87893C8 4.29315 7.66421 4.62893 7.25 4.62893H4C3.72386 4.62893 3.5 4.85279 3.5 5.12893V11.9929C3.5 12.2691 3.72386 12.4929 4 12.4929H10.864C11.1401 12.4929 11.364 12.2691 11.364 11.9929V8.75C11.364 8.33579 11.6998 8 12.114 8C12.5282 8 12.864 8.33579 12.864 8.75V11.9929C12.864 13.0975 11.9686 13.9929 10.864 13.9929H4C2.89543 13.9929 2 13.0975 2 11.9929V5.12893C2 4.02436 2.89543 3.12893 4 3.12893H7.25Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.823 2.4491C13.8201 2.30008 13.6999 2.17994 13.5509 2.17704L9.5062 2.09836C9.25654 2.09351 9.12821 2.39519 9.30482 2.5718L10.3856 3.65257L7.93433 6.10383C7.87964 6.15852 7.83047 6.21665 7.78683 6.27752L5.99909 8.06525C5.46457 8.59977 5.46457 9.4664 5.99909 10.0009C6.53361 10.5354 7.40023 10.5354 7.93475 10.0009L9.72249 8.21317C9.78336 8.16953 9.84148 8.12037 9.89618 8.06567L12.3474 5.61441L13.4282 6.69518C13.6048 6.87179 13.9065 6.74347 13.9016 6.4938L13.823 2.4491Z" fill={'currentColor'} /><path d="M7.25 3.12893C7.66421 3.12893 8 3.46472 8 3.87893C8 4.29315 7.66421 4.62893 7.25 4.62893H4C3.72386 4.62893 3.5 4.85279 3.5 5.12893V11.9929C3.5 12.2691 3.72386 12.4929 4 12.4929H10.864C11.1401 12.4929 11.364 12.2691 11.364 11.9929V8.75C11.364 8.33579 11.6998 8 12.114 8C12.5282 8 12.864 8.33579 12.864 8.75V11.9929C12.864 13.0975 11.9686 13.9929 10.864 13.9929H4C2.89543 13.9929 2 13.0975 2 11.9929V5.12893C2 4.02436 2.89543 3.12893 4 3.12893H7.25Z" fill={'currentColor'} /></svg>;
 };
+
 OpenNewTab.displayName = 'OpenNewTab';
 OpenNewTab.isGlyph = true;
+
 export default OpenNewTab;
\ No newline at end of file
diff --git a/packages/icon/src/generated/OutlineFavorite.tsx b/packages/icon/src/generated/OutlineFavorite.tsx
index 1d1db68e41..20ea78520e 100644
--- a/packages/icon/src/generated/OutlineFavorite.tsx
+++ b/packages/icon/src/generated/OutlineFavorite.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a0947f6a8bc4f0aa42a0db795f6439f6
+* @checksum 208883290a110c1c35d500e396038c6c
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface OutlineFavoriteProps extends LGGlyph.ComponentProps {}
+
 const OutlineFavorite = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: OutlineFavoriteProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'OutlineFavorite', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'OutlineFavorite', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7.76906 1.84601C7.76912 1.84614 7.76901 1.84587 7.76906 1.84601ZM7.99989 2.40099L9.30609 5.54144C9.30607 5.54139 9.30611 5.5415 9.30609 5.54144C9.48607 5.97429 9.89318 6.27011 10.3604 6.30757C10.3604 6.30757 10.3604 6.30757 10.3604 6.30757L13.751 6.57939L11.1677 8.79219C10.8115 9.09731 10.6564 9.57588 10.7651 10.0315L11.5542 13.3401L8.65146 11.5672C8.25149 11.3229 7.74839 11.3229 7.34841 11.5671L4.44554 13.3402L5.23476 10.0316C5.3435 9.57566 5.18809 9.09717 4.83207 8.79221C4.83208 8.79222 4.83206 8.7922 4.83207 8.79221L2.24883 6.57938L5.63936 6.30757C5.63936 6.30757 5.63937 6.30757 5.63936 6.30757C6.10663 6.27011 6.51363 5.97437 6.69363 5.54162L7.99989 2.40099ZM14.3501 6.62742C14.3501 6.62742 14.35 6.62741 14.3501 6.62742ZM9.15404 1.26996C8.72705 0.243319 7.27273 0.243376 6.84574 1.26996L5.3673 4.82456L1.52981 5.13221C0.421481 5.22106 -0.0279132 6.60421 0.816504 7.32754C0.816502 7.32754 0.816505 7.32754 0.816504 7.32754L3.74027 9.83206L2.84701 13.5768C2.58901 14.6584 3.76565 15.513 4.71443 14.9336L7.9999 12.9269L11.2854 14.9336C11.2854 14.9336 11.2854 14.9336 11.2854 14.9336C12.2342 15.5131 13.4107 14.6583 13.1527 13.5768C13.1527 13.5768 13.1527 13.5768 13.1527 13.5768L12.2596 9.83201L15.1833 7.32754C16.0275 6.60426 15.5784 5.22107 14.4699 5.13221C14.4699 5.13221 14.4699 5.13221 14.4699 5.13221L10.6325 4.82457L9.15404 1.26996C9.15404 1.26996 9.15404 1.26996 9.15404 1.26996ZM3.85623 9.9314C3.85627 9.93143 3.85619 9.93136 3.85623 9.9314Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.76906 1.84601C7.76912 1.84614 7.76901 1.84587 7.76906 1.84601ZM7.99989 2.40099L9.30609 5.54144C9.30607 5.54139 9.30611 5.5415 9.30609 5.54144C9.48607 5.97429 9.89318 6.27011 10.3604 6.30757C10.3604 6.30757 10.3604 6.30757 10.3604 6.30757L13.751 6.57939L11.1677 8.79219C10.8115 9.09731 10.6564 9.57588 10.7651 10.0315L11.5542 13.3401L8.65146 11.5672C8.25149 11.3229 7.74839 11.3229 7.34841 11.5671L4.44554 13.3402L5.23476 10.0316C5.3435 9.57566 5.18809 9.09717 4.83207 8.79221C4.83208 8.79222 4.83206 8.7922 4.83207 8.79221L2.24883 6.57938L5.63936 6.30757C5.63936 6.30757 5.63937 6.30757 5.63936 6.30757C6.10663 6.27011 6.51363 5.97437 6.69363 5.54162L7.99989 2.40099ZM14.3501 6.62742C14.3501 6.62742 14.35 6.62741 14.3501 6.62742ZM9.15404 1.26996C8.72705 0.243319 7.27273 0.243376 6.84574 1.26996L5.3673 4.82456L1.52981 5.13221C0.421481 5.22106 -0.0279132 6.60421 0.816504 7.32754C0.816502 7.32754 0.816505 7.32754 0.816504 7.32754L3.74027 9.83206L2.84701 13.5768C2.58901 14.6584 3.76565 15.513 4.71443 14.9336L7.9999 12.9269L11.2854 14.9336C11.2854 14.9336 11.2854 14.9336 11.2854 14.9336C12.2342 15.5131 13.4107 14.6583 13.1527 13.5768C13.1527 13.5768 13.1527 13.5768 13.1527 13.5768L12.2596 9.83201L15.1833 7.32754C16.0275 6.60426 15.5784 5.22107 14.4699 5.13221C14.4699 5.13221 14.4699 5.13221 14.4699 5.13221L10.6325 4.82457L9.15404 1.26996C9.15404 1.26996 9.15404 1.26996 9.15404 1.26996ZM3.85623 9.9314C3.85627 9.93143 3.85619 9.93136 3.85623 9.9314Z" fill={'currentColor'} /></svg>;
 };
+
 OutlineFavorite.displayName = 'OutlineFavorite';
 OutlineFavorite.isGlyph = true;
+
 export default OutlineFavorite;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Package.tsx b/packages/icon/src/generated/Package.tsx
index da86c17fb7..a5c4e5d883 100644
--- a/packages/icon/src/generated/Package.tsx
+++ b/packages/icon/src/generated/Package.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6e59261cf982bdfcdfdce185d5ad6a28
+* @checksum d216fbe66a3ac12123612f3ab4a85875
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PackageProps extends LGGlyph.ComponentProps {}
+
 const Package = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PackageProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Package', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Package', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.78017 1.21077L13.4652 3.92807C13.947 4.20828 14.2433 4.72229 14.2433 5.27913V10.7209C14.2433 10.9945 14.1715 11.2633 14.0349 11.5005C13.8983 11.7376 13.7019 11.9346 13.4652 12.0719L8.78017 14.7892C8.54213 14.9273 8.27184 15 7.99666 15C7.72148 15 7.45119 14.9273 7.21315 14.7892L2.52816 12.0719C2.29145 11.9346 2.09498 11.7376 1.95841 11.5005C1.82184 11.2633 1.74997 10.9945 1.75 10.7209V5.27913C1.75 4.72229 2.04627 4.20738 2.52816 3.92807L7.21315 1.21077C7.45119 1.07271 7.72148 1 7.99666 1C8.27184 1 8.54213 1.07271 8.78017 1.21077ZM7.88511 2.36908L3.75339 4.76512L7.99666 7.22631L12.2399 4.76512L8.10821 2.36908C8.07435 2.34932 8.03586 2.33891 7.99666 2.33891C7.95746 2.33891 7.91897 2.34932 7.88511 2.36908ZM3.08857 5.927V10.7209C3.08857 10.8012 3.13051 10.8735 3.20012 10.9136L7.32737 13.3079V8.38551L3.08857 5.927ZM8.66594 13.3079L12.7932 10.9136C12.8271 10.8941 12.8552 10.866 12.8747 10.8322C12.8943 10.7983 12.9047 10.76 12.9047 10.7209V5.927L8.66594 8.38551V13.3079Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.78017 1.21077L13.4652 3.92807C13.947 4.20828 14.2433 4.72229 14.2433 5.27913V10.7209C14.2433 10.9945 14.1715 11.2633 14.0349 11.5005C13.8983 11.7376 13.7019 11.9346 13.4652 12.0719L8.78017 14.7892C8.54213 14.9273 8.27184 15 7.99666 15C7.72148 15 7.45119 14.9273 7.21315 14.7892L2.52816 12.0719C2.29145 11.9346 2.09498 11.7376 1.95841 11.5005C1.82184 11.2633 1.74997 10.9945 1.75 10.7209V5.27913C1.75 4.72229 2.04627 4.20738 2.52816 3.92807L7.21315 1.21077C7.45119 1.07271 7.72148 1 7.99666 1C8.27184 1 8.54213 1.07271 8.78017 1.21077ZM7.88511 2.36908L3.75339 4.76512L7.99666 7.22631L12.2399 4.76512L8.10821 2.36908C8.07435 2.34932 8.03586 2.33891 7.99666 2.33891C7.95746 2.33891 7.91897 2.34932 7.88511 2.36908ZM3.08857 5.927V10.7209C3.08857 10.8012 3.13051 10.8735 3.20012 10.9136L7.32737 13.3079V8.38551L3.08857 5.927ZM8.66594 13.3079L12.7932 10.9136C12.8271 10.8941 12.8552 10.866 12.8747 10.8322C12.8943 10.7983 12.9047 10.76 12.9047 10.7209V5.927L8.66594 8.38551V13.3079Z" fill={'currentColor'} /></svg>;
 };
+
 Package.displayName = 'Package';
 Package.isGlyph = true;
+
 export default Package;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Pause.tsx b/packages/icon/src/generated/Pause.tsx
index f6e5f92836..e32cb10c18 100644
--- a/packages/icon/src/generated/Pause.tsx
+++ b/packages/icon/src/generated/Pause.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ee75535a9d92a7747f49a72adef467a2
+* @checksum 7a5584a8db5b88f005880f749ca177d4
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PauseProps extends LGGlyph.ComponentProps {}
+
 const Pause = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PauseProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Pause', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Pause', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M3.5 3.83333C3.5 3.3731 3.94771 3 4.5 3H5.5C6.05228 3 6.5 3.3731 6.5 3.83333V12.1667C6.5 12.6269 6.05228 13 5.5 13H4.5C3.94771 13 3.5 12.6269 3.5 12.1667V3.83333Z" fill="currentColor" /><path d="M9.5 3.83333C9.5 3.3731 9.94772 3 10.5 3H11.5C12.0523 3 12.5 3.3731 12.5 3.83333V12.1667C12.5 12.6269 12.0523 13 11.5 13H10.5C9.94771 13 9.5 12.6269 9.5 12.1667V3.83333Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3.5 3.83333C3.5 3.3731 3.94771 3 4.5 3H5.5C6.05228 3 6.5 3.3731 6.5 3.83333V12.1667C6.5 12.6269 6.05228 13 5.5 13H4.5C3.94771 13 3.5 12.6269 3.5 12.1667V3.83333Z" fill={'currentColor'} /><path d="M9.5 3.83333C9.5 3.3731 9.94772 3 10.5 3H11.5C12.0523 3 12.5 3.3731 12.5 3.83333V12.1667C12.5 12.6269 12.0523 13 11.5 13H10.5C9.94771 13 9.5 12.6269 9.5 12.1667V3.83333Z" fill={'currentColor'} /></svg>;
 };
+
 Pause.displayName = 'Pause';
 Pause.isGlyph = true;
+
 export default Pause;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Pending.tsx b/packages/icon/src/generated/Pending.tsx
index 77a0bec13b..e4285162aa 100644
--- a/packages/icon/src/generated/Pending.tsx
+++ b/packages/icon/src/generated/Pending.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2990101e09c44c0d8cfafeabe85560fa
+* @checksum 1420faf3123421e2ec72d8bdfb39e033
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PendingProps extends LGGlyph.ComponentProps {}
+
 const Pending = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PendingProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Pending', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Pending', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 11.75C10.0711 11.75 11.75 10.0711 11.75 8C11.75 5.92893 10.0711 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 10.0711 5.92893 11.75 8 11.75ZM8 13.25C10.8995 13.25 13.25 10.8995 13.25 8C13.25 5.10051 10.8995 2.75 8 2.75C5.10051 2.75 2.75 5.10051 2.75 8C2.75 10.8995 5.10051 13.25 8 13.25Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 11.75C10.0711 11.75 11.75 10.0711 11.75 8C11.75 5.92893 10.0711 4.25 8 4.25C5.92893 4.25 4.25 5.92893 4.25 8C4.25 10.0711 5.92893 11.75 8 11.75ZM8 13.25C10.8995 13.25 13.25 10.8995 13.25 8C13.25 5.10051 10.8995 2.75 8 2.75C5.10051 2.75 2.75 5.10051 2.75 8C2.75 10.8995 5.10051 13.25 8 13.25Z" fill={'currentColor'} /></svg>;
 };
+
 Pending.displayName = 'Pending';
 Pending.isGlyph = true;
+
 export default Pending;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Person.tsx b/packages/icon/src/generated/Person.tsx
index 5306c60d3a..295bd459ff 100644
--- a/packages/icon/src/generated/Person.tsx
+++ b/packages/icon/src/generated/Person.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 31cf947007014102c24311d4253dbc79
+* @checksum b19a92bebbfc288c0fdb6ad27a99e828
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PersonProps extends LGGlyph.ComponentProps {}
+
 const Person = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PersonProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Person', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Person', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M11.5 4.5C11.5 6.433 9.933 8 8 8C6.067 8 4.5 6.433 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5Z" fill="currentColor" /><path d="M8 8C7.29183 8 6.63278 7.78968 6.08191 7.42809C6.66376 7.15352 7.31395 7 8 7C8.68605 7 9.33624 7.15352 9.91809 7.42809C9.36722 7.78968 8.70817 8 8 8Z" fill="currentColor" /><path d="M4.591 8.56241C4.89921 8.20507 5.42858 8.22348 5.84253 8.45005C6.48309 8.80067 7.21827 9 8 9C8.78173 9 9.51691 8.80067 10.1575 8.45005C10.5714 8.22348 11.1008 8.20507 11.409 8.56241C12.0889 9.3507 12.5 10.3773 12.5 11.5V14H3.5V11.5C3.5 10.3773 3.91111 9.3507 4.591 8.56241Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M11.5 4.5C11.5 6.433 9.933 8 8 8C6.067 8 4.5 6.433 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5Z" fill={'currentColor'} /><path d="M8 8C7.29183 8 6.63278 7.78968 6.08191 7.42809C6.66376 7.15352 7.31395 7 8 7C8.68605 7 9.33624 7.15352 9.91809 7.42809C9.36722 7.78968 8.70817 8 8 8Z" fill={'currentColor'} /><path d="M4.591 8.56241C4.89921 8.20507 5.42858 8.22348 5.84253 8.45005C6.48309 8.80067 7.21827 9 8 9C8.78173 9 9.51691 8.80067 10.1575 8.45005C10.5714 8.22348 11.1008 8.20507 11.409 8.56241C12.0889 9.3507 12.5 10.3773 12.5 11.5V14H3.5V11.5C3.5 10.3773 3.91111 9.3507 4.591 8.56241Z" fill={'currentColor'} /></svg>;
 };
+
 Person.displayName = 'Person';
 Person.isGlyph = true;
+
 export default Person;
\ No newline at end of file
diff --git a/packages/icon/src/generated/PersonGroup.tsx b/packages/icon/src/generated/PersonGroup.tsx
index 0b6d2e064f..98d20402ba 100644
--- a/packages/icon/src/generated/PersonGroup.tsx
+++ b/packages/icon/src/generated/PersonGroup.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3bba5f39fa2c4a59ec027bce5e35d45
+* @checksum dfc56f118bad85b0732af97c1bdb6b68
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PersonGroupProps extends LGGlyph.ComponentProps {}
+
 const PersonGroup = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PersonGroupProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'PersonGroup', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'PersonGroup', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M4.80769 8.92308C6.44331 8.92308 7.76923 7.59715 7.76923 5.96154C7.76923 4.32593 6.44331 3 4.80769 3C3.17208 3 1.84615 4.32593 1.84615 5.96154C1.84615 7.59715 3.17208 8.92308 4.80769 8.92308Z" fill="currentColor" /><path d="M2.98214 9.30389C2.63188 9.11218 2.18394 9.0966 1.92316 9.39897C1.34786 10.066 1 10.9347 1 11.8846V14H8.61539V11.8846C8.61539 10.9347 8.26752 10.066 7.69223 9.39897C7.43144 9.0966 6.98351 9.11218 6.63325 9.30389C6.09123 9.60056 5.46916 9.76923 4.80769 9.76923C4.14623 9.76923 3.52415 9.60056 2.98214 9.30389Z" fill="currentColor" /><path d="M9.61539 11.8846V13H15V11.0942C15 10.3601 14.7259 9.68888 14.2727 9.17347C14.0672 8.93982 13.7143 8.95186 13.4383 9.1C13.0113 9.32925 12.5212 9.45958 12 9.45958C11.4789 9.45958 10.9887 9.32925 10.5617 9.1C10.2857 8.95186 9.93282 8.93982 9.72735 9.17347C9.51772 9.41185 9.34641 9.68357 9.22282 9.97942C9.47531 10.5638 9.61539 11.2083 9.61539 11.8846Z" fill="currentColor" /><path d="M14.3334 6.28846C14.3334 7.55234 13.2887 8.57692 12 8.57692C10.7114 8.57692 9.66668 7.55234 9.66668 6.28846C9.66668 5.02458 10.7114 4 12 4C13.2887 4 14.3334 5.02458 14.3334 6.28846Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.80769 8.92308C6.44331 8.92308 7.76923 7.59715 7.76923 5.96154C7.76923 4.32593 6.44331 3 4.80769 3C3.17208 3 1.84615 4.32593 1.84615 5.96154C1.84615 7.59715 3.17208 8.92308 4.80769 8.92308Z" fill={'currentColor'} /><path d="M2.98214 9.30389C2.63188 9.11218 2.18394 9.0966 1.92316 9.39897C1.34786 10.066 1 10.9347 1 11.8846V14H8.61539V11.8846C8.61539 10.9347 8.26752 10.066 7.69223 9.39897C7.43144 9.0966 6.98351 9.11218 6.63325 9.30389C6.09123 9.60056 5.46916 9.76923 4.80769 9.76923C4.14623 9.76923 3.52415 9.60056 2.98214 9.30389Z" fill={'currentColor'} /><path d="M9.61539 11.8846V13H15V11.0942C15 10.3601 14.7259 9.68888 14.2727 9.17347C14.0672 8.93982 13.7143 8.95186 13.4383 9.1C13.0113 9.32925 12.5212 9.45958 12 9.45958C11.4789 9.45958 10.9887 9.32925 10.5617 9.1C10.2857 8.95186 9.93282 8.93982 9.72735 9.17347C9.51772 9.41185 9.34641 9.68357 9.22282 9.97942C9.47531 10.5638 9.61539 11.2083 9.61539 11.8846Z" fill={'currentColor'} /><path d="M14.3334 6.28846C14.3334 7.55234 13.2887 8.57692 12 8.57692C10.7114 8.57692 9.66668 7.55234 9.66668 6.28846C9.66668 5.02458 10.7114 4 12 4C13.2887 4 14.3334 5.02458 14.3334 6.28846Z" fill={'currentColor'} /></svg>;
 };
+
 PersonGroup.displayName = 'PersonGroup';
 PersonGroup.isGlyph = true;
+
 export default PersonGroup;
\ No newline at end of file
diff --git a/packages/icon/src/generated/PersonWithLock.tsx b/packages/icon/src/generated/PersonWithLock.tsx
index c86f641ffb..d7ead34bf1 100644
--- a/packages/icon/src/generated/PersonWithLock.tsx
+++ b/packages/icon/src/generated/PersonWithLock.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c9ac63659fb3944c090d94f1824ce291
+* @checksum 4660ef6a407fb68888d9c2caddf63c9f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PersonWithLockProps extends LGGlyph.ComponentProps {}
+
 const PersonWithLock = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PersonWithLockProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'PersonWithLock', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'PersonWithLock', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10 4.5C10 5.72482 9.37085 6.8027 8.41809 7.42809C7.86722 7.78968 7.20817 8 6.5 8C5.83553 8 5.21431 7.81484 4.68512 7.49329C4.65031 7.47214 4.6159 7.4504 4.58191 7.42809C3.62915 6.8027 3 5.72482 3 4.5C3 2.567 4.567 1 6.5 1C8.433 1 10 2.567 10 4.5Z" fill="currentColor" /><path d="M4.34253 8.45005C3.92858 8.22348 3.39921 8.20507 3.091 8.56241C2.41111 9.3507 2 10.3773 2 11.5V14H8V11.5C8 11.0546 8.19412 10.6546 8.50236 10.3798C8.53463 9.56068 8.89535 8.82593 9.45648 8.30362C9.19722 8.2528 8.90646 8.31377 8.65747 8.45005C8.01691 8.80067 7.28173 9 6.5 9C5.71827 9 4.98309 8.80067 4.34253 8.45005Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M9.5 10.5V11C9.22386 11 9 11.2239 9 11.5V14.5C9 14.7761 9.22386 15 9.5 15H13.5C13.7761 15 14 14.7761 14 14.5V11.5C14 11.2239 13.7761 11 13.5 11V10.5C13.5 9.39543 12.6046 8.5 11.5 8.5C10.3954 8.5 9.5 9.39543 9.5 10.5ZM11.5 9.5C10.9477 9.5 10.5 9.94771 10.5 10.5V11H12.5V10.5C12.5 9.94771 12.0523 9.5 11.5 9.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10 4.5C10 5.72482 9.37085 6.8027 8.41809 7.42809C7.86722 7.78968 7.20817 8 6.5 8C5.83553 8 5.21431 7.81484 4.68512 7.49329C4.65031 7.47214 4.6159 7.4504 4.58191 7.42809C3.62915 6.8027 3 5.72482 3 4.5C3 2.567 4.567 1 6.5 1C8.433 1 10 2.567 10 4.5Z" fill={'currentColor'} /><path d="M4.34253 8.45005C3.92858 8.22348 3.39921 8.20507 3.091 8.56241C2.41111 9.3507 2 10.3773 2 11.5V14H8V11.5C8 11.0546 8.19412 10.6546 8.50236 10.3798C8.53463 9.56068 8.89535 8.82593 9.45648 8.30362C9.19722 8.2528 8.90646 8.31377 8.65747 8.45005C8.01691 8.80067 7.28173 9 6.5 9C5.71827 9 4.98309 8.80067 4.34253 8.45005Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M9.5 10.5V11C9.22386 11 9 11.2239 9 11.5V14.5C9 14.7761 9.22386 15 9.5 15H13.5C13.7761 15 14 14.7761 14 14.5V11.5C14 11.2239 13.7761 11 13.5 11V10.5C13.5 9.39543 12.6046 8.5 11.5 8.5C10.3954 8.5 9.5 9.39543 9.5 10.5ZM11.5 9.5C10.9477 9.5 10.5 9.94771 10.5 10.5V11H12.5V10.5C12.5 9.94771 12.0523 9.5 11.5 9.5Z" fill={'currentColor'} /></svg>;
 };
+
 PersonWithLock.displayName = 'PersonWithLock';
 PersonWithLock.isGlyph = true;
+
 export default PersonWithLock;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Pin.tsx b/packages/icon/src/generated/Pin.tsx
index 6bcf39d347..708c5c470d 100644
--- a/packages/icon/src/generated/Pin.tsx
+++ b/packages/icon/src/generated/Pin.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0f84209bef2f8c074241c48b4730e561
+* @checksum a5b5fbaa27181e6157a2a58a0cca80b2
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PinProps extends LGGlyph.ComponentProps {}
+
 const Pin = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PinProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Pin', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Pin', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10 8.5V3.3H10.6833C11.0423 3.3 11.3333 3.00898 11.3333 2.65C11.3333 2.29101 11.0423 2 10.6833 2H5.31667C4.95768 2 4.66667 2.29101 4.66667 2.65C4.66667 3.00898 4.95768 3.3 5.31667 3.3H6V8.5L4.38343 9.55077C4.14428 9.70621 4 9.97208 4 10.2573C4 10.7227 4.37728 11.1 4.84269 11.1H7.46667V14.4667C7.46667 14.7612 7.70545 15 8 15C8.29455 15 8.53333 14.7612 8.53333 14.4667V11.1H11.1573C11.6227 11.1 12 10.7227 12 10.2573C12 9.97208 11.8557 9.70622 11.6166 9.55077L10 8.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10 8.5V3.3H10.6833C11.0423 3.3 11.3333 3.00898 11.3333 2.65C11.3333 2.29101 11.0423 2 10.6833 2H5.31667C4.95768 2 4.66667 2.29101 4.66667 2.65C4.66667 3.00898 4.95768 3.3 5.31667 3.3H6V8.5L4.38343 9.55077C4.14428 9.70621 4 9.97208 4 10.2573C4 10.7227 4.37728 11.1 4.84269 11.1H7.46667V14.4667C7.46667 14.7612 7.70545 15 8 15C8.29455 15 8.53333 14.7612 8.53333 14.4667V11.1H11.1573C11.6227 11.1 12 10.7227 12 10.2573C12 9.97208 11.8557 9.70622 11.6166 9.55077L10 8.5Z" fill={'currentColor'} /></svg>;
 };
+
 Pin.displayName = 'Pin';
 Pin.isGlyph = true;
+
 export default Pin;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Play.tsx b/packages/icon/src/generated/Play.tsx
index 885e2bc0d2..4f7e913668 100644
--- a/packages/icon/src/generated/Play.tsx
+++ b/packages/icon/src/generated/Play.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eeea36a12d7e0c78bf3aad12c14a8a5d
+* @checksum 498a74f490187c194f8130eced491cba
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PlayProps extends LGGlyph.ComponentProps {}
+
 const Play = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PlayProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Play', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Play', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M13.7789 6.70433C14.7711 7.28315 14.7711 8.71685 13.7789 9.29567L6.25581 13.6841C5.25582 14.2674 4 13.5461 4 12.3884L4 3.61155C4 2.45387 5.25582 1.73256 6.25581 2.31589L13.7789 6.70433Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13.7789 6.70433C14.7711 7.28315 14.7711 8.71685 13.7789 9.29567L6.25581 13.6841C5.25582 14.2674 4 13.5461 4 12.3884L4 3.61155C4 2.45387 5.25582 1.73256 6.25581 2.31589L13.7789 6.70433Z" fill={'currentColor'} /></svg>;
 };
+
 Play.displayName = 'Play';
 Play.isGlyph = true;
+
 export default Play;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Plus.tsx b/packages/icon/src/generated/Plus.tsx
index 4dc6c22033..0908d1f389 100644
--- a/packages/icon/src/generated/Plus.tsx
+++ b/packages/icon/src/generated/Plus.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0b56c268ab06407a7c924db85ad2a16b
+* @checksum 9b6d47ad9ab993f38db8181f07b18eac
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PlusProps extends LGGlyph.ComponentProps {}
+
 const Plus = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PlusProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Plus', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Plus', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7.5 2C6.94772 2 6.5 2.44772 6.5 3V6.5H3C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05228 2.44772 9.5 3 9.5H6.5V13C6.5 13.5523 6.94772 14 7.5 14H8.5C9.05228 14 9.5 13.5523 9.5 13V9.5H13C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94771 13.5523 6.5 13 6.5H9.5V3C9.5 2.44772 9.05228 2 8.5 2H7.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.5 2C6.94772 2 6.5 2.44772 6.5 3V6.5H3C2.44772 6.5 2 6.94772 2 7.5V8.5C2 9.05228 2.44772 9.5 3 9.5H6.5V13C6.5 13.5523 6.94772 14 7.5 14H8.5C9.05228 14 9.5 13.5523 9.5 13V9.5H13C13.5523 9.5 14 9.05228 14 8.5V7.5C14 6.94771 13.5523 6.5 13 6.5H9.5V3C9.5 2.44772 9.05228 2 8.5 2H7.5Z" fill={'currentColor'} /></svg>;
 };
+
 Plus.displayName = 'Plus';
 Plus.isGlyph = true;
+
 export default Plus;
\ No newline at end of file
diff --git a/packages/icon/src/generated/PlusWithCircle.tsx b/packages/icon/src/generated/PlusWithCircle.tsx
index f46079df90..665d405864 100644
--- a/packages/icon/src/generated/PlusWithCircle.tsx
+++ b/packages/icon/src/generated/PlusWithCircle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4a198f81b67f4fff8bfad90b83e5a50e
+* @checksum 48baedacefa9f6816ccb6e0c8bdb6f78
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PlusWithCircleProps extends LGGlyph.ComponentProps {}
+
 const PlusWithCircle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PlusWithCircleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'PlusWithCircle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'PlusWithCircle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 5C7 4.44772 7.44772 4 8 4C8.55229 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44771 12 8C12 8.55228 11.5523 9 11 9H9V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55229 4 8C4 7.44772 4.44772 7 5 7H7V5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 5C7 4.44772 7.44772 4 8 4C8.55229 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44771 12 8C12 8.55228 11.5523 9 11 9H9V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55229 4 8C4 7.44772 4.44772 7 5 7H7V5Z" fill={'currentColor'} /></svg>;
 };
+
 PlusWithCircle.displayName = 'PlusWithCircle';
 PlusWithCircle.isGlyph = true;
+
 export default PlusWithCircle;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Primary.tsx b/packages/icon/src/generated/Primary.tsx
index 0aa258ad74..336a652c62 100644
--- a/packages/icon/src/generated/Primary.tsx
+++ b/packages/icon/src/generated/Primary.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2e1672e47a094394bb69d18d34d07c47
+* @checksum 5d4b5318c7eed8289f7a06728d8c409b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface PrimaryProps extends LGGlyph.ComponentProps {}
+
 const Primary = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: PrimaryProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Primary', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Primary', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11 6.69296C11 5.17183 9.91753 4 8.43299 4H6V12H7.49485V9.38592H8.43299C9.91753 9.38592 11 8.21408 11 6.69296ZM9.54639 6.69296C9.54639 7.34648 9.09278 7.85352 8.41237 7.85352H7.49485V5.53239H8.41237C9.09278 5.53239 9.54639 6.03944 9.54639 6.69296Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11 6.69296C11 5.17183 9.91753 4 8.43299 4H6V12H7.49485V9.38592H8.43299C9.91753 9.38592 11 8.21408 11 6.69296ZM9.54639 6.69296C9.54639 7.34648 9.09278 7.85352 8.41237 7.85352H7.49485V5.53239H8.41237C9.09278 5.53239 9.54639 6.03944 9.54639 6.69296Z" fill={'currentColor'} /></svg>;
 };
+
 Primary.displayName = 'Primary';
 Primary.isGlyph = true;
+
 export default Primary;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Project.tsx b/packages/icon/src/generated/Project.tsx
index fa6c6ca853..be2bb33d69 100644
--- a/packages/icon/src/generated/Project.tsx
+++ b/packages/icon/src/generated/Project.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d3fcc0dee5e5431858994a79e3d5b9b3
+* @checksum f056b244df0d37d50de27e1a23487f40
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ProjectProps extends LGGlyph.ComponentProps {}
+
 const Project = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ProjectProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Project', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Project', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M1 2C1 1.72386 1.22386 1.5 1.5 1.5H14.5C14.7761 1.5 15 1.72386 15 2V4C15 4.27614 14.7761 4.5 14.5 4.5H1.5C1.22386 4.5 1 4.27614 1 4V2Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M2.75 5.5C2.33579 5.5 2 5.83579 2 6.25V13.75C2 14.1642 2.33579 14.5 2.75 14.5H13.25C13.6642 14.5 14 14.1642 14 13.75V6.25C14 5.83579 13.6642 5.5 13.25 5.5H2.75ZM6.25 7C5.97386 7 5.75 7.22386 5.75 7.5C5.75 7.77614 5.97386 8 6.25 8H9.75C10.0261 8 10.25 7.77614 10.25 7.5C10.25 7.22386 10.0261 7 9.75 7H6.25Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M1 2C1 1.72386 1.22386 1.5 1.5 1.5H14.5C14.7761 1.5 15 1.72386 15 2V4C15 4.27614 14.7761 4.5 14.5 4.5H1.5C1.22386 4.5 1 4.27614 1 4V2Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M2.75 5.5C2.33579 5.5 2 5.83579 2 6.25V13.75C2 14.1642 2.33579 14.5 2.75 14.5H13.25C13.6642 14.5 14 14.1642 14 13.75V6.25C14 5.83579 13.6642 5.5 13.25 5.5H2.75ZM6.25 7C5.97386 7 5.75 7.22386 5.75 7.5C5.75 7.77614 5.97386 8 6.25 8H9.75C10.0261 8 10.25 7.77614 10.25 7.5C10.25 7.22386 10.0261 7 9.75 7H6.25Z" fill={'currentColor'} /></svg>;
 };
+
 Project.displayName = 'Project';
 Project.isGlyph = true;
+
 export default Project;
\ No newline at end of file
diff --git a/packages/icon/src/generated/QuestionMarkWithCircle.tsx b/packages/icon/src/generated/QuestionMarkWithCircle.tsx
index 6cb21a0390..fda8f15102 100644
--- a/packages/icon/src/generated/QuestionMarkWithCircle.tsx
+++ b/packages/icon/src/generated/QuestionMarkWithCircle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e3c77fdc2bdcc5a2511a78ec3a8058b1
+* @checksum cf27f0b9cb8f509d4ce23c0d0f04b880
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface QuestionMarkWithCircleProps extends LGGlyph.ComponentProps {}
+
 const QuestionMarkWithCircle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: QuestionMarkWithCircleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'QuestionMarkWithCircle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'QuestionMarkWithCircle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM6.93227 5.61177C7.0539 5.29832 7.42458 5 7.94143 5C8.61601 5 9 5.4776 9 5.875C9 6.03721 8.94264 6.20509 8.82756 6.35116C8.76453 6.43073 8.68409 6.50399 8.58601 6.56699L8.56965 6.57753C8.53867 6.59652 8.50602 6.61442 8.47169 6.63109C7.88242 6.91723 6.94143 7.59774 6.94143 8.75V9C6.94143 9.55228 7.38915 10 7.94143 10C8.49372 10 8.94143 9.55228 8.94143 9C8.94143 8.96493 8.95319 8.88081 9.0803 8.7302C9.21177 8.57445 9.41415 8.41209 9.66687 8.24976C9.94193 8.07309 10.1889 7.85162 10.3934 7.59438C10.7685 7.12328 11 6.5327 11 5.875C11 4.20133 9.54068 3 7.94143 3C6.66566 3 5.51129 3.74519 5.06773 4.88823C4.86793 5.40311 5.12335 5.98247 5.63823 6.18227C6.15311 6.38207 6.73247 6.12665 6.93227 5.61177ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM6.93227 5.61177C7.0539 5.29832 7.42458 5 7.94143 5C8.61601 5 9 5.4776 9 5.875C9 6.03721 8.94264 6.20509 8.82756 6.35116C8.76453 6.43073 8.68409 6.50399 8.58601 6.56699L8.56965 6.57753C8.53867 6.59652 8.50602 6.61442 8.47169 6.63109C7.88242 6.91723 6.94143 7.59774 6.94143 8.75V9C6.94143 9.55228 7.38915 10 7.94143 10C8.49372 10 8.94143 9.55228 8.94143 9C8.94143 8.96493 8.95319 8.88081 9.0803 8.7302C9.21177 8.57445 9.41415 8.41209 9.66687 8.24976C9.94193 8.07309 10.1889 7.85162 10.3934 7.59438C10.7685 7.12328 11 6.5327 11 5.875C11 4.20133 9.54068 3 7.94143 3C6.66566 3 5.51129 3.74519 5.06773 4.88823C4.86793 5.40311 5.12335 5.98247 5.63823 6.18227C6.15311 6.38207 6.73247 6.12665 6.93227 5.61177ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13Z" fill={'currentColor'} /></svg>;
 };
+
 QuestionMarkWithCircle.displayName = 'QuestionMarkWithCircle';
 QuestionMarkWithCircle.isGlyph = true;
+
 export default QuestionMarkWithCircle;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Read.tsx b/packages/icon/src/generated/Read.tsx
index c97f600fb3..2669d1c1fa 100644
--- a/packages/icon/src/generated/Read.tsx
+++ b/packages/icon/src/generated/Read.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2048eecd64e1b11d7b3e08314290329a
+* @checksum 653a836bd45bd9ee9f5bb7697ebf66bd
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ReadProps extends LGGlyph.ComponentProps {}
+
 const Read = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ReadProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Read', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Read', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10.0114 8.76202L10.0114 4.18542H8.62052C8.04714 4.18542 7.78167 3.54027 8.21511 3.20017L10.8446 1.13695C11.0773 0.95435 11.4227 0.954351 11.6554 1.13695L14.2849 3.20017C14.7183 3.54027 14.4529 4.18542 13.8795 4.18542H12.5703L12.5703 8.76202C12.5703 9.47823 11.9975 10.0588 11.2909 10.0588C10.5843 10.0588 10.0114 9.47823 10.0114 8.76202Z" fill="currentColor" /><path d="M8.82311 9.15837C8.00915 9.34791 7.14575 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22932 2.74517 8.7953C2.2802 8.61118 1.84763 8.38034 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.90824 11.2435 10.0917 11.1584 10.2574 11.068C9.50707 10.722 8.9553 10.0108 8.82311 9.15837Z" fill="currentColor" /><path d="M6.7872 3.47867C6.64989 3.47328 6.51234 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83327 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C7.14312 8.61764 8.00522 8.5169 8.79268 8.3191L8.79268 5.42072H8.62052C7.8543 5.42072 7.19331 4.97118 6.91542 4.29584C6.80845 4.03589 6.76513 3.75542 6.7872 3.47867Z" fill="currentColor" /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.0114 8.76202L10.0114 4.18542H8.62052C8.04714 4.18542 7.78167 3.54027 8.21511 3.20017L10.8446 1.13695C11.0773 0.95435 11.4227 0.954351 11.6554 1.13695L14.2849 3.20017C14.7183 3.54027 14.4529 4.18542 13.8795 4.18542H12.5703L12.5703 8.76202C12.5703 9.47823 11.9975 10.0588 11.2909 10.0588C10.5843 10.0588 10.0114 9.47823 10.0114 8.76202Z" fill={'currentColor'} /><path d="M8.82311 9.15837C8.00915 9.34791 7.14575 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22932 2.74517 8.7953C2.2802 8.61118 1.84763 8.38034 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.90824 11.2435 10.0917 11.1584 10.2574 11.068C9.50707 10.722 8.9553 10.0108 8.82311 9.15837Z" fill={'currentColor'} /><path d="M6.7872 3.47867C6.64989 3.47328 6.51234 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83327 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C7.14312 8.61764 8.00522 8.5169 8.79268 8.3191L8.79268 5.42072H8.62052C7.8543 5.42072 7.19331 4.97118 6.91542 4.29584C6.80845 4.03589 6.76513 3.75542 6.7872 3.47867Z" fill={'currentColor'} /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill={'currentColor'} /></svg>;
 };
+
 Read.displayName = 'Read';
 Read.isGlyph = true;
+
 export default Read;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Recommended.tsx b/packages/icon/src/generated/Recommended.tsx
index 9eb962b96a..11b75014ad 100644
--- a/packages/icon/src/generated/Recommended.tsx
+++ b/packages/icon/src/generated/Recommended.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 39c5c559a039bfdc941799fa127eacb8
+* @checksum c5f6e5b791662110f37bc077212fbb1a
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface RecommendedProps extends LGGlyph.ComponentProps {}
+
 const Recommended = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: RecommendedProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Recommended', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Recommended', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.1484 5.45755L7.20359 7.42568V9.59086H9.3028C9.54317 9.59086 9.74953 9.41981 9.79412 9.18361L10.0172 8.0018C10.0754 7.69391 9.83924 7.40904 9.52592 7.40904H8.88758C8.55102 7.40904 8.27819 7.12413 8.27819 6.77267V5.70784C8.27819 5.60307 8.22655 5.51089 8.1484 5.45755Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M8.53812 1.55424C8.24353 1.2508 7.75646 1.2508 7.46187 1.55424L6.40002 2.648C6.24018 2.81264 6.01376 2.89505 5.78548 2.87167L4.269 2.71635C3.84829 2.67326 3.47517 2.98634 3.44455 3.40814L3.33418 4.92856C3.31756 5.15743 3.19709 5.3661 3.00719 5.49492L1.74565 6.35072C1.39567 6.58813 1.31109 7.06781 1.55877 7.41061L2.45152 8.64626C2.58591 8.83226 2.62775 9.06955 2.56508 9.2903L2.14879 10.7568C2.03329 11.1636 2.27683 11.5854 2.68691 11.6888L4.16506 12.0615C4.38757 12.1176 4.57214 12.2725 4.66603 12.4819L5.28976 13.8729C5.4628 14.2588 5.9205 14.4254 6.3011 14.241L7.67301 13.5764C7.87952 13.4763 8.12047 13.4763 8.32698 13.5764L9.69889 14.241C10.0795 14.4254 10.5372 14.2588 10.7102 13.8729L11.334 12.4819C11.4278 12.2725 11.6124 12.1176 11.8349 12.0615L13.3131 11.6888C13.7232 11.5854 13.9667 11.1636 13.8512 10.7568L13.4349 9.2903C13.3722 9.06955 13.4141 8.83226 13.5485 8.64626L14.4412 7.41061C14.6889 7.06781 14.6043 6.58813 14.2543 6.35072L12.9928 5.49492C12.8029 5.3661 12.6824 5.15743 12.6658 4.92856L12.5554 3.40814C12.5248 2.98634 12.1517 2.67326 11.731 2.71635L10.2145 2.87167C9.98623 2.89505 9.75981 2.81264 9.59997 2.648L8.53812 1.55424ZM7.47395 4.83394C7.57223 4.62921 7.77275 4.49995 7.99206 4.49995C8.63088 4.49995 9.14875 5.04074 9.14875 5.70784V6.49995H10.1291C10.6775 6.49995 11.0893 7.02303 10.9833 7.58488L10.5714 9.7667C10.4909 10.1928 10.1331 10.4999 9.71723 10.4999H5.43527C5.19488 10.4999 4.99999 10.2055 4.99999 9.95449V7.59086C4.99999 7.33982 5.19488 7.13631 5.43527 7.13631H6.33304C6.34637 7.13631 6.35957 7.13694 6.3726 7.13816C6.38115 7.11372 6.39105 7.08974 6.40227 7.06635L7.47395 4.83394Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.1484 5.45755L7.20359 7.42568V9.59086H9.3028C9.54317 9.59086 9.74953 9.41981 9.79412 9.18361L10.0172 8.0018C10.0754 7.69391 9.83924 7.40904 9.52592 7.40904H8.88758C8.55102 7.40904 8.27819 7.12413 8.27819 6.77267V5.70784C8.27819 5.60307 8.22655 5.51089 8.1484 5.45755Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8.53812 1.55424C8.24353 1.2508 7.75646 1.2508 7.46187 1.55424L6.40002 2.648C6.24018 2.81264 6.01376 2.89505 5.78548 2.87167L4.269 2.71635C3.84829 2.67326 3.47517 2.98634 3.44455 3.40814L3.33418 4.92856C3.31756 5.15743 3.19709 5.3661 3.00719 5.49492L1.74565 6.35072C1.39567 6.58813 1.31109 7.06781 1.55877 7.41061L2.45152 8.64626C2.58591 8.83226 2.62775 9.06955 2.56508 9.2903L2.14879 10.7568C2.03329 11.1636 2.27683 11.5854 2.68691 11.6888L4.16506 12.0615C4.38757 12.1176 4.57214 12.2725 4.66603 12.4819L5.28976 13.8729C5.4628 14.2588 5.9205 14.4254 6.3011 14.241L7.67301 13.5764C7.87952 13.4763 8.12047 13.4763 8.32698 13.5764L9.69889 14.241C10.0795 14.4254 10.5372 14.2588 10.7102 13.8729L11.334 12.4819C11.4278 12.2725 11.6124 12.1176 11.8349 12.0615L13.3131 11.6888C13.7232 11.5854 13.9667 11.1636 13.8512 10.7568L13.4349 9.2903C13.3722 9.06955 13.4141 8.83226 13.5485 8.64626L14.4412 7.41061C14.6889 7.06781 14.6043 6.58813 14.2543 6.35072L12.9928 5.49492C12.8029 5.3661 12.6824 5.15743 12.6658 4.92856L12.5554 3.40814C12.5248 2.98634 12.1517 2.67326 11.731 2.71635L10.2145 2.87167C9.98623 2.89505 9.75981 2.81264 9.59997 2.648L8.53812 1.55424ZM7.47395 4.83394C7.57223 4.62921 7.77275 4.49995 7.99206 4.49995C8.63088 4.49995 9.14875 5.04074 9.14875 5.70784V6.49995H10.1291C10.6775 6.49995 11.0893 7.02303 10.9833 7.58488L10.5714 9.7667C10.4909 10.1928 10.1331 10.4999 9.71723 10.4999H5.43527C5.19488 10.4999 4.99999 10.2055 4.99999 9.95449V7.59086C4.99999 7.33982 5.19488 7.13631 5.43527 7.13631H6.33304C6.34637 7.13631 6.35957 7.13694 6.3726 7.13816C6.38115 7.11372 6.39105 7.08974 6.40227 7.06635L7.47395 4.83394Z" fill={'currentColor'} /></svg>;
 };
+
 Recommended.displayName = 'Recommended';
 Recommended.isGlyph = true;
+
 export default Recommended;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Redo.tsx b/packages/icon/src/generated/Redo.tsx
index 837842d137..638f60427d 100644
--- a/packages/icon/src/generated/Redo.tsx
+++ b/packages/icon/src/generated/Redo.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 94bb886a2e3c4fbccf7f51d22f460fb6
+* @checksum aecffb2f0e970799ad3c2bd7ddc11d25
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface RedoProps extends LGGlyph.ComponentProps {}
+
 const Redo = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: RedoProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Redo', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Redo', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M4.01756 9.40216C3.96845 9.72987 3.70455 10 3.37318 10H2.57318C2.24181 10 1.97003 9.73064 2.00272 9.40089C2.18023 7.6104 3.14483 6.05139 4.54567 5.07473C5.02468 4.73549 5.56726 4.46519 6.15478 4.28051C6.72834 4.09832 7.33928 4.00002 7.97318 4.00002C7.98266 3.99998 7.99215 4.00002 8.00164 4.00002C10.7006 4.00002 12.9519 5.71778 13.4688 8.00002H14.8831C15.4243 8.00002 15.6748 8.67204 15.2657 9.02631L12.7841 11.1755C12.5645 11.3657 12.2385 11.3657 12.0188 11.1755L9.53719 9.02631C9.12812 8.67204 9.37866 8.00002 9.91982 8.00002H11.3664C10.8977 6.91458 9.68595 6.00002 8.00164 6.00002C7.81503 6.00002 7.63422 6.01124 7.45958 6.03269C6.75401 6.12312 6.10595 6.39739 5.56496 6.80592C5.54654 6.8206 5.52833 6.83543 5.51032 6.85041C5.4936 6.86432 5.47625 6.87728 5.45838 6.88926C4.69892 7.50399 4.16907 8.39119 4.01756 9.40216Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.01756 9.40216C3.96845 9.72987 3.70455 10 3.37318 10H2.57318C2.24181 10 1.97003 9.73064 2.00272 9.40089C2.18023 7.6104 3.14483 6.05139 4.54567 5.07473C5.02468 4.73549 5.56726 4.46519 6.15478 4.28051C6.72834 4.09832 7.33928 4.00002 7.97318 4.00002C7.98266 3.99998 7.99215 4.00002 8.00164 4.00002C10.7006 4.00002 12.9519 5.71778 13.4688 8.00002H14.8831C15.4243 8.00002 15.6748 8.67204 15.2657 9.02631L12.7841 11.1755C12.5645 11.3657 12.2385 11.3657 12.0188 11.1755L9.53719 9.02631C9.12812 8.67204 9.37866 8.00002 9.91982 8.00002H11.3664C10.8977 6.91458 9.68595 6.00002 8.00164 6.00002C7.81503 6.00002 7.63422 6.01124 7.45958 6.03269C6.75401 6.12312 6.10595 6.39739 5.56496 6.80592C5.54654 6.8206 5.52833 6.83543 5.51032 6.85041C5.4936 6.86432 5.47625 6.87728 5.45838 6.88926C4.69892 7.50399 4.16907 8.39119 4.01756 9.40216Z" fill={'currentColor'} /></svg>;
 };
+
 Redo.displayName = 'Redo';
 Redo.isGlyph = true;
+
 export default Redo;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Refresh.tsx b/packages/icon/src/generated/Refresh.tsx
index fa72d21de0..7125f9c596 100644
--- a/packages/icon/src/generated/Refresh.tsx
+++ b/packages/icon/src/generated/Refresh.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f1c3390781c6f99bf6f88aa6faa5a31d
+* @checksum 2c4a4852ad7c4ab4babe8f7979bb9b21
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface RefreshProps extends LGGlyph.ComponentProps {}
+
 const Refresh = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: RefreshProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Refresh', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Refresh', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.03289 2C10.7318 2 12.9831 3.71776 13.5 6L14.9144 6C15.4555 6 15.7061 6.67202 15.297 7.02629L12.8153 9.17546C12.5957 9.36566 12.2697 9.36566 12.0501 9.17545L9.56844 7.02629C9.15937 6.67202 9.40991 6 9.95107 6H11.3977C10.929 4.91456 9.7172 4 8.03289 4C7.00662 4 6.15578 4.33954 5.54157 4.85039C5.29859 5.05248 4.92429 5.0527 4.72549 4.80702L4.11499 4.05254C3.95543 3.85535 3.96725 3.56792 4.1591 3.40197C5.16255 2.53394 6.52815 2 8.03289 2Z" fill="currentColor" /><path d="M3.94991 6.84265C3.73028 6.65245 3.40429 6.65245 3.18466 6.84265L0.703017 8.99182C0.293944 9.34608 0.544489 10.0181 1.08564 10.0181H2.50411C3.02878 12.2913 5.27531 14 7.96711 14C9.47186 14 10.8375 13.4661 11.8409 12.598C12.0327 12.4321 12.0446 12.1447 11.885 11.9475L11.2745 11.193C11.0757 10.9473 10.7014 10.9475 10.4584 11.1496C9.84422 11.6605 8.99338 12 7.96711 12C6.29218 12 5.08453 11.0956 4.6102 10.0181H6.04893C6.59009 10.0181 6.84063 9.34608 6.43156 8.99182L3.94991 6.84265Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.03289 2C10.7318 2 12.9831 3.71776 13.5 6L14.9144 6C15.4555 6 15.7061 6.67202 15.297 7.02629L12.8153 9.17546C12.5957 9.36566 12.2697 9.36566 12.0501 9.17545L9.56844 7.02629C9.15937 6.67202 9.40991 6 9.95107 6H11.3977C10.929 4.91456 9.7172 4 8.03289 4C7.00662 4 6.15578 4.33954 5.54157 4.85039C5.29859 5.05248 4.92429 5.0527 4.72549 4.80702L4.11499 4.05254C3.95543 3.85535 3.96725 3.56792 4.1591 3.40197C5.16255 2.53394 6.52815 2 8.03289 2Z" fill={'currentColor'} /><path d="M3.94991 6.84265C3.73028 6.65245 3.40429 6.65245 3.18466 6.84265L0.703017 8.99182C0.293944 9.34608 0.544489 10.0181 1.08564 10.0181H2.50411C3.02878 12.2913 5.27531 14 7.96711 14C9.47186 14 10.8375 13.4661 11.8409 12.598C12.0327 12.4321 12.0446 12.1447 11.885 11.9475L11.2745 11.193C11.0757 10.9473 10.7014 10.9475 10.4584 11.1496C9.84422 11.6605 8.99338 12 7.96711 12C6.29218 12 5.08453 11.0956 4.6102 10.0181H6.04893C6.59009 10.0181 6.84063 9.34608 6.43156 8.99182L3.94991 6.84265Z" fill={'currentColor'} /></svg>;
 };
+
 Refresh.displayName = 'Refresh';
 Refresh.isGlyph = true;
+
 export default Refresh;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Relationship.tsx b/packages/icon/src/generated/Relationship.tsx
index 89ddcf34e9..cba6c16cac 100644
--- a/packages/icon/src/generated/Relationship.tsx
+++ b/packages/icon/src/generated/Relationship.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f1b6e767453a9635bee72cf897775edb
+* @checksum 4973db5faf925a11cf942e0252b43201
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface RelationshipProps extends LGGlyph.ComponentProps {}
+
 const Relationship = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: RelationshipProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Relationship', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Relationship', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M0.5 2C0.5 1.44772 0.947715 1 1.5 1H3.5C4.05228 1 4.5 1.44772 4.5 2V3H5.99999C7.3807 3 8.49998 4.11929 8.49998 5.5V10.5C8.49998 11.3284 9.17156 12 9.99999 12H11.5V11C11.5 10.4477 11.9477 10 12.5 10H14.5C15.0523 10 15.5 10.4477 15.5 11V14C15.5 14.5523 15.0523 15 14.5 15H12.5C11.9477 15 11.5 14.5523 11.5 14V13H9.99999C8.61928 13 7.49998 11.8807 7.49998 10.5V5.5C7.49998 4.67157 6.82841 4 5.99999 4H4.5V5C4.5 5.55228 4.05228 6 3.5 6H1.5C0.947715 6 0.5 5.55228 0.5 5V2Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M0.5 2C0.5 1.44772 0.947715 1 1.5 1H3.5C4.05228 1 4.5 1.44772 4.5 2V3H5.99999C7.3807 3 8.49998 4.11929 8.49998 5.5V10.5C8.49998 11.3284 9.17156 12 9.99999 12H11.5V11C11.5 10.4477 11.9477 10 12.5 10H14.5C15.0523 10 15.5 10.4477 15.5 11V14C15.5 14.5523 15.0523 15 14.5 15H12.5C11.9477 15 11.5 14.5523 11.5 14V13H9.99999C8.61928 13 7.49998 11.8807 7.49998 10.5V5.5C7.49998 4.67157 6.82841 4 5.99999 4H4.5V5C4.5 5.55228 4.05228 6 3.5 6H1.5C0.947715 6 0.5 5.55228 0.5 5V2Z" fill={'currentColor'} /></svg>;
 };
+
 Relationship.displayName = 'Relationship';
 Relationship.isGlyph = true;
+
 export default Relationship;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ReplicaSet.tsx b/packages/icon/src/generated/ReplicaSet.tsx
index 71d148858f..b248c4ea33 100644
--- a/packages/icon/src/generated/ReplicaSet.tsx
+++ b/packages/icon/src/generated/ReplicaSet.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2bea089178e1fab0526b7fa4268d176b
+* @checksum 7dcc773a0bbca1712ac418198a607b31
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ReplicaSetProps extends LGGlyph.ComponentProps {}
+
 const ReplicaSet = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ReplicaSetProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ReplicaSet', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ReplicaSet', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M9.39072 7.71281C8.96444 7.89758 8.49418 8 8 8C7.50582 8 7.03556 7.89758 6.60928 7.71281L5.26491 9.72938C5.719 10.182 6 10.8082 6 11.5C6 12.8807 4.88071 14 3.5 14C2.11929 14 1 12.8807 1 11.5C1 10.1193 2.11929 9 3.5 9C3.73768 9 3.96761 9.03317 4.18543 9.09513L5.56972 7.01868C4.91019 6.38216 4.5 5.48898 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5C11.5 5.48898 11.0898 6.38216 10.4303 7.01868L11.8146 9.09513C12.0324 9.03317 12.2623 9 12.5 9C13.8807 9 15 10.1193 15 11.5C15 12.8807 13.8807 14 12.5 14C11.1193 14 10 12.8807 10 11.5C10 10.8082 10.281 10.182 10.7351 9.72938L9.39072 7.71281ZM9.75 4.5C9.75 5.4665 8.9665 6.25 8 6.25C7.0335 6.25 6.25 5.4665 6.25 4.5C6.25 3.5335 7.0335 2.75 8 2.75C8.9665 2.75 9.75 3.5335 9.75 4.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M9.39072 7.71281C8.96444 7.89758 8.49418 8 8 8C7.50582 8 7.03556 7.89758 6.60928 7.71281L5.26491 9.72938C5.719 10.182 6 10.8082 6 11.5C6 12.8807 4.88071 14 3.5 14C2.11929 14 1 12.8807 1 11.5C1 10.1193 2.11929 9 3.5 9C3.73768 9 3.96761 9.03317 4.18543 9.09513L5.56972 7.01868C4.91019 6.38216 4.5 5.48898 4.5 4.5C4.5 2.567 6.067 1 8 1C9.933 1 11.5 2.567 11.5 4.5C11.5 5.48898 11.0898 6.38216 10.4303 7.01868L11.8146 9.09513C12.0324 9.03317 12.2623 9 12.5 9C13.8807 9 15 10.1193 15 11.5C15 12.8807 13.8807 14 12.5 14C11.1193 14 10 12.8807 10 11.5C10 10.8082 10.281 10.182 10.7351 9.72938L9.39072 7.71281ZM9.75 4.5C9.75 5.4665 8.9665 6.25 8 6.25C7.0335 6.25 6.25 5.4665 6.25 4.5C6.25 3.5335 7.0335 2.75 8 2.75C8.9665 2.75 9.75 3.5335 9.75 4.5Z" fill={'currentColor'} /></svg>;
 };
+
 ReplicaSet.displayName = 'ReplicaSet';
 ReplicaSet.isGlyph = true;
+
 export default ReplicaSet;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Resize.tsx b/packages/icon/src/generated/Resize.tsx
index 92a30ee3db..66778ed7b0 100644
--- a/packages/icon/src/generated/Resize.tsx
+++ b/packages/icon/src/generated/Resize.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fee3256c80da5096170156f59e09e087
+* @checksum f2b8fef4d0d9526e5950f2b63e5a9c7f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ResizeProps extends LGGlyph.ComponentProps {}
+
 const Resize = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ResizeProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Resize', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Resize', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M14.7706 5.71967C15.0631 6.01256 15.0631 6.48744 14.7706 6.78033L6.77898 14.7803C6.4864 15.0732 6.01202 15.0732 5.71944 14.7803C5.42685 14.4874 5.42685 14.0126 5.71944 13.7197L13.711 5.71967C14.0036 5.42678 14.478 5.42678 14.7706 5.71967Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M14.7806 10.2197C15.0731 10.5126 15.0731 10.9874 14.7806 11.2803L11.2842 14.7803C10.9917 15.0732 10.5173 15.0732 10.2247 14.7803C9.93212 14.4874 9.93212 14.0126 10.2247 13.7197L13.721 10.2197C14.0136 9.92678 14.488 9.92678 14.7806 10.2197Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M14.7706 5.71967C15.0631 6.01256 15.0631 6.48744 14.7706 6.78033L6.77898 14.7803C6.4864 15.0732 6.01202 15.0732 5.71944 14.7803C5.42685 14.4874 5.42685 14.0126 5.71944 13.7197L13.711 5.71967C14.0036 5.42678 14.478 5.42678 14.7706 5.71967Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M14.7806 10.2197C15.0731 10.5126 15.0731 10.9874 14.7806 11.2803L11.2842 14.7803C10.9917 15.0732 10.5173 15.0732 10.2247 14.7803C9.93212 14.4874 9.93212 14.0126 10.2247 13.7197L13.721 10.2197C14.0136 9.92678 14.488 9.92678 14.7806 10.2197Z" fill={'currentColor'} /></svg>;
 };
+
 Resize.displayName = 'Resize';
 Resize.isGlyph = true;
+
 export default Resize;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Resource.tsx b/packages/icon/src/generated/Resource.tsx
index 32f8ffb533..40e393ade6 100644
--- a/packages/icon/src/generated/Resource.tsx
+++ b/packages/icon/src/generated/Resource.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9ec4992f3837f7bd0837fb90a4d9ed89
+* @checksum ac15c121adc3fb2cd1aef50c8fe9d221
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ResourceProps extends LGGlyph.ComponentProps {}
+
 const Resource = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ResourceProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Resource', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Resource', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M6.09999 1.99998C5.71339 1.99998 5.39999 2.31338 5.39999 2.69998V13.3C5.39999 13.6866 5.71339 14 6.09999 14H8.19999C8.58659 14 8.89999 13.6866 8.89999 13.3V2.69998C8.89999 2.31338 8.58659 1.99998 8.19999 1.99998H6.09999ZM8.02499 2.99998H6.27499V3.99998H8.02499V2.99998ZM6.27499 4.99998H8.02499V5.49998H6.27499V4.99998ZM8.02499 12H6.27499V13H8.02499V12Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M9.84432 2.35808C9.46647 2.4399 9.22758 2.81229 9.31074 3.18984L11.5698 13.4468C11.653 13.8243 12.0267 14.0641 12.4046 13.9823L14.4557 13.5381C14.8335 13.4563 15.0724 13.0839 14.9893 12.7064L12.7302 2.44944C12.647 2.07189 12.2733 1.83215 11.8954 1.91396L9.84432 2.35808ZM11.9381 2.91964L10.2283 3.28984L10.4417 4.25852L12.1514 3.88832L11.9381 2.91964ZM10.6551 5.22735L12.3648 4.85715L12.4715 5.34149L10.7618 5.71169L10.6551 5.22735ZM13.8583 11.6377L12.1485 12.0079L12.3619 12.9766L14.0716 12.6064L13.8583 11.6377Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M2.09999 1.99998C1.71339 1.99998 1.39999 2.31338 1.39999 2.69998V13.3C1.39999 13.6866 1.71339 14 2.09999 14H4.19999C4.58659 14 4.89999 13.6866 4.89999 13.3V2.69998C4.89999 2.31338 4.58659 1.99998 4.19999 1.99998H2.09999ZM4.02499 2.99998H2.27499V3.99998H4.02499V2.99998ZM2.27499 4.99998H4.02499V5.49998H2.27499V4.99998ZM4.02499 12H2.27499V13H4.02499V12Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M6.09999 1.99998C5.71339 1.99998 5.39999 2.31338 5.39999 2.69998V13.3C5.39999 13.6866 5.71339 14 6.09999 14H8.19999C8.58659 14 8.89999 13.6866 8.89999 13.3V2.69998C8.89999 2.31338 8.58659 1.99998 8.19999 1.99998H6.09999ZM8.02499 2.99998H6.27499V3.99998H8.02499V2.99998ZM6.27499 4.99998H8.02499V5.49998H6.27499V4.99998ZM8.02499 12H6.27499V13H8.02499V12Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M9.84432 2.35808C9.46647 2.4399 9.22758 2.81229 9.31074 3.18984L11.5698 13.4468C11.653 13.8243 12.0267 14.0641 12.4046 13.9823L14.4557 13.5381C14.8335 13.4563 15.0724 13.0839 14.9893 12.7064L12.7302 2.44944C12.647 2.07189 12.2733 1.83215 11.8954 1.91396L9.84432 2.35808ZM11.9381 2.91964L10.2283 3.28984L10.4417 4.25852L12.1514 3.88832L11.9381 2.91964ZM10.6551 5.22735L12.3648 4.85715L12.4715 5.34149L10.7618 5.71169L10.6551 5.22735ZM13.8583 11.6377L12.1485 12.0079L12.3619 12.9766L14.0716 12.6064L13.8583 11.6377Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M2.09999 1.99998C1.71339 1.99998 1.39999 2.31338 1.39999 2.69998V13.3C1.39999 13.6866 1.71339 14 2.09999 14H4.19999C4.58659 14 4.89999 13.6866 4.89999 13.3V2.69998C4.89999 2.31338 4.58659 1.99998 4.19999 1.99998H2.09999ZM4.02499 2.99998H2.27499V3.99998H4.02499V2.99998ZM2.27499 4.99998H4.02499V5.49998H2.27499V4.99998ZM4.02499 12H2.27499V13H4.02499V12Z" fill={'currentColor'} /></svg>;
 };
+
 Resource.displayName = 'Resource';
 Resource.isGlyph = true;
+
 export default Resource;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Return.tsx b/packages/icon/src/generated/Return.tsx
index 7ef3bec91f..1fe110360f 100644
--- a/packages/icon/src/generated/Return.tsx
+++ b/packages/icon/src/generated/Return.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f2504ef6bb18fa9ef178d7936f437bd6
+* @checksum 0a6d5eea28b8b28795f5f95cf8b0ac4e
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ReturnProps extends LGGlyph.ComponentProps {}
+
 const Return = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ReturnProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Return', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Return', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><g id="Return"><path id="Union" d="M5 2C4.44772 2 4 2.44772 4 3C4 3.55228 4.44772 4 5 4H10C11.3807 4 12.5 5.11929 12.5 6.5C12.5 7.88071 11.3807 9 10 9H5.20328L6.65079 7.75927C7.07012 7.39985 7.11868 6.76855 6.75926 6.34923C6.39983 5.9299 5.76853 5.88134 5.34921 6.24076L1.84921 9.24076C1.62756 9.43074 1.5 9.70809 1.5 10C1.5 10.2919 1.62756 10.5693 1.84921 10.7593L5.34921 13.7593C5.76853 14.1187 6.39983 14.0701 6.75926 13.6508C7.11868 13.2315 7.07012 12.6002 6.65079 12.2408L5.20324 11H10C12.4853 11 14.5 8.98528 14.5 6.5C14.5 4.01472 12.4853 2 10 2H5Z" fill="currentColor" /></g></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><g id="Return"><path id="Union" d="M5 2C4.44772 2 4 2.44772 4 3C4 3.55228 4.44772 4 5 4H10C11.3807 4 12.5 5.11929 12.5 6.5C12.5 7.88071 11.3807 9 10 9H5.20328L6.65079 7.75927C7.07012 7.39985 7.11868 6.76855 6.75926 6.34923C6.39983 5.9299 5.76853 5.88134 5.34921 6.24076L1.84921 9.24076C1.62756 9.43074 1.5 9.70809 1.5 10C1.5 10.2919 1.62756 10.5693 1.84921 10.7593L5.34921 13.7593C5.76853 14.1187 6.39983 14.0701 6.75926 13.6508C7.11868 13.2315 7.07012 12.6002 6.65079 12.2408L5.20324 11H10C12.4853 11 14.5 8.98528 14.5 6.5C14.5 4.01472 12.4853 2 10 2H5Z" fill={'currentColor'} /></g></svg>;
 };
+
 Return.displayName = 'Return';
 Return.isGlyph = true;
+
 export default Return;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Revert.tsx b/packages/icon/src/generated/Revert.tsx
index 5e7c58c0c8..b51004d831 100644
--- a/packages/icon/src/generated/Revert.tsx
+++ b/packages/icon/src/generated/Revert.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ceebe674c72b8db63286c07567793217
+* @checksum ab2b366ba615915d4da3ef6f0d7c94dc
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface RevertProps extends LGGlyph.ComponentProps {}
+
 const Revert = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: RevertProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Revert', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Revert', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13 8C13 10.7614 10.7614 13 8 13C7.16895 13 6.38526 12.7973 5.69568 12.4385C5.34783 12.2576 4.90944 12.3087 4.65841 12.6099L4.32712 13.0075C4.05174 13.3379 4.1087 13.8355 4.48034 14.0521C5.51438 14.6548 6.71687 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C6.05606 1 4.2972 1.7924 3.02879 3.07181L1.96954 2.14618C1.56206 1.7901 0.931193 2.13127 1.00611 2.66721L1.4606 5.9185C1.50083 6.20624 1.7463 6.4287 2.03684 6.43H5.31972C5.86086 6.43241 6.1144 5.76821 5.70691 5.41212L4.53896 4.3915C5.4373 3.52965 6.65679 3 8 3C10.7614 3 13 5.23858 13 8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13 8C13 10.7614 10.7614 13 8 13C7.16895 13 6.38526 12.7973 5.69568 12.4385C5.34783 12.2576 4.90944 12.3087 4.65841 12.6099L4.32712 13.0075C4.05174 13.3379 4.1087 13.8355 4.48034 14.0521C5.51438 14.6548 6.71687 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C6.05606 1 4.2972 1.7924 3.02879 3.07181L1.96954 2.14618C1.56206 1.7901 0.931193 2.13127 1.00611 2.66721L1.4606 5.9185C1.50083 6.20624 1.7463 6.4287 2.03684 6.43H5.31972C5.86086 6.43241 6.1144 5.76821 5.70691 5.41212L4.53896 4.3915C5.4373 3.52965 6.65679 3 8 3C10.7614 3 13 5.23858 13 8Z" fill={'currentColor'} /></svg>;
 };
+
 Revert.displayName = 'Revert';
 Revert.isGlyph = true;
+
 export default Revert;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Router.tsx b/packages/icon/src/generated/Router.tsx
index 92fcc56ba0..b4682755c4 100644
--- a/packages/icon/src/generated/Router.tsx
+++ b/packages/icon/src/generated/Router.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 26b268485a87705e369fef3cee115d85
+* @checksum 7ae1f7eddce6727bc906059b4e7d931f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface RouterProps extends LGGlyph.ComponentProps {}
+
 const Router = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: RouterProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Router', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Router', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13.89 4.89001C13.61 4.77001 13.29 4.89001 13.16 5.17001L12.6 6.41001C12.56 6.31001 12.53 6.21001 12.49 6.12001C12.33 5.70001 12.17 5.27001 12.04 4.93001C11.91 4.59001 11.82 4.35001 11.78 4.25001C11.54 3.70001 11.2 3.38001 11.12 3.31001C11.12 3.31001 11.11 3.30001 11.1 3.30001C11.01 3.21001 10.41 2.66001 9.34003 2.53001C9.22003 2.52001 9.11003 2.51001 8.99003 2.51001C7.95003 2.51001 7.27003 3.03001 7.14003 3.12001C7.14003 3.12001 7.12003 3.13001 7.12003 3.14001C7.05003 3.19001 6.81003 3.38001 6.55003 3.71001C6.26003 4.08001 5.94003 4.64001 5.88003 5.37001V5.60001C5.88003 6.72001 6.47003 7.42001 6.61003 7.58001C6.61003 7.58001 7.80003 9.08001 8.48003 9.91001C8.70003 10.18 8.77003 10.51 8.77003 10.81C8.77003 10.97 8.75003 11.11 8.73003 11.21L8.70003 11.32V11.34V11.36V11.37C8.70003 11.39 8.62003 11.62 8.43003 11.85C8.23003 12.07 7.94003 12.3 7.37003 12.38C7.28003 12.39 7.19003 12.4 7.11003 12.4C6.64003 12.4 6.36003 12.23 6.17003 12.05C6.08003 11.96 6.01003 11.87 5.97003 11.81L5.93003 11.74V11.72L5.34003 10.61C5.76003 10.22 6.02003 9.67001 6.02003 9.06001C6.02003 7.89001 5.07003 6.94001 3.90003 6.94001C2.73003 6.94001 1.78003 7.89001 1.78003 9.06001C1.78003 10.23 2.73003 11.18 3.90003 11.18C4.06003 11.18 4.22003 11.16 4.37003 11.12L4.95003 12.21C4.99003 12.29 5.13003 12.56 5.44003 12.85C5.78003 13.17 6.35003 13.49 7.13003 13.49C7.26003 13.49 7.39003 13.49 7.52003 13.46C8.41003 13.35 9.01003 12.9 9.34003 12.47C9.64003 12.09 9.74003 11.76 9.77003 11.66C9.77003 11.66 9.89003 11.28 9.89003 10.79C9.89003 10.33 9.79003 9.73001 9.36003 9.19001C8.69003 8.37001 7.50003 6.87001 7.50003 6.87001V6.85001L7.47003 6.84001C7.44003 6.81001 6.99003 6.28001 7.00003 5.58001V5.44001C7.04003 5.00001 7.24003 4.63001 7.45003 4.37001C7.55003 4.24001 7.65003 4.14001 7.72003 4.08001L7.80003 4.01001H7.82003L7.83003 3.99001H7.84003C7.84003 3.99001 8.38003 3.59001 9.03003 3.59001H9.25003C9.63003 3.65001 9.92003 3.78001 10.12 3.89001C10.22 3.95001 10.29 4.00001 10.34 4.04001L10.39 4.08001V4.09001C10.39 4.09001 10.65 4.35001 10.79 4.68001C10.8 4.71001 10.91 4.97001 11.03 5.31001C11.19 5.72001 11.39 6.27001 11.58 6.77001L10.26 6.17001C9.98003 6.04001 9.66003 6.17001 9.53003 6.44001C9.40003 6.72001 9.53003 7.04001 9.80003 7.17001L12.35 8.33001C12.48 8.39001 12.63 8.40001 12.77 8.34001C12.91 8.29001 13.02 8.18001 13.08 8.05001L14.18 5.60001C14.3 5.32001 14.18 5.00001 13.9 4.87001L13.89 4.89001ZM2.85003 9.07001C2.85003 8.51001 3.31003 8.05001 3.87003 8.05001C4.43003 8.05001 4.89003 8.51001 4.89003 9.07001C4.89003 9.64001 4.43003 10.09 3.87003 10.09C3.30003 10.09 2.85003 9.63001 2.85003 9.07001Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.89 4.89001C13.61 4.77001 13.29 4.89001 13.16 5.17001L12.6 6.41001C12.56 6.31001 12.53 6.21001 12.49 6.12001C12.33 5.70001 12.17 5.27001 12.04 4.93001C11.91 4.59001 11.82 4.35001 11.78 4.25001C11.54 3.70001 11.2 3.38001 11.12 3.31001C11.12 3.31001 11.11 3.30001 11.1 3.30001C11.01 3.21001 10.41 2.66001 9.34003 2.53001C9.22003 2.52001 9.11003 2.51001 8.99003 2.51001C7.95003 2.51001 7.27003 3.03001 7.14003 3.12001C7.14003 3.12001 7.12003 3.13001 7.12003 3.14001C7.05003 3.19001 6.81003 3.38001 6.55003 3.71001C6.26003 4.08001 5.94003 4.64001 5.88003 5.37001V5.60001C5.88003 6.72001 6.47003 7.42001 6.61003 7.58001C6.61003 7.58001 7.80003 9.08001 8.48003 9.91001C8.70003 10.18 8.77003 10.51 8.77003 10.81C8.77003 10.97 8.75003 11.11 8.73003 11.21L8.70003 11.32V11.34V11.36V11.37C8.70003 11.39 8.62003 11.62 8.43003 11.85C8.23003 12.07 7.94003 12.3 7.37003 12.38C7.28003 12.39 7.19003 12.4 7.11003 12.4C6.64003 12.4 6.36003 12.23 6.17003 12.05C6.08003 11.96 6.01003 11.87 5.97003 11.81L5.93003 11.74V11.72L5.34003 10.61C5.76003 10.22 6.02003 9.67001 6.02003 9.06001C6.02003 7.89001 5.07003 6.94001 3.90003 6.94001C2.73003 6.94001 1.78003 7.89001 1.78003 9.06001C1.78003 10.23 2.73003 11.18 3.90003 11.18C4.06003 11.18 4.22003 11.16 4.37003 11.12L4.95003 12.21C4.99003 12.29 5.13003 12.56 5.44003 12.85C5.78003 13.17 6.35003 13.49 7.13003 13.49C7.26003 13.49 7.39003 13.49 7.52003 13.46C8.41003 13.35 9.01003 12.9 9.34003 12.47C9.64003 12.09 9.74003 11.76 9.77003 11.66C9.77003 11.66 9.89003 11.28 9.89003 10.79C9.89003 10.33 9.79003 9.73001 9.36003 9.19001C8.69003 8.37001 7.50003 6.87001 7.50003 6.87001V6.85001L7.47003 6.84001C7.44003 6.81001 6.99003 6.28001 7.00003 5.58001V5.44001C7.04003 5.00001 7.24003 4.63001 7.45003 4.37001C7.55003 4.24001 7.65003 4.14001 7.72003 4.08001L7.80003 4.01001H7.82003L7.83003 3.99001H7.84003C7.84003 3.99001 8.38003 3.59001 9.03003 3.59001H9.25003C9.63003 3.65001 9.92003 3.78001 10.12 3.89001C10.22 3.95001 10.29 4.00001 10.34 4.04001L10.39 4.08001V4.09001C10.39 4.09001 10.65 4.35001 10.79 4.68001C10.8 4.71001 10.91 4.97001 11.03 5.31001C11.19 5.72001 11.39 6.27001 11.58 6.77001L10.26 6.17001C9.98003 6.04001 9.66003 6.17001 9.53003 6.44001C9.40003 6.72001 9.53003 7.04001 9.80003 7.17001L12.35 8.33001C12.48 8.39001 12.63 8.40001 12.77 8.34001C12.91 8.29001 13.02 8.18001 13.08 8.05001L14.18 5.60001C14.3 5.32001 14.18 5.00001 13.9 4.87001L13.89 4.89001ZM2.85003 9.07001C2.85003 8.51001 3.31003 8.05001 3.87003 8.05001C4.43003 8.05001 4.89003 8.51001 4.89003 9.07001C4.89003 9.64001 4.43003 10.09 3.87003 10.09C3.30003 10.09 2.85003 9.63001 2.85003 9.07001Z" fill={'currentColor'} /></svg>;
 };
+
 Router.displayName = 'Router';
 Router.isGlyph = true;
+
 export default Router;
\ No newline at end of file
diff --git a/packages/icon/src/generated/SMS.tsx b/packages/icon/src/generated/SMS.tsx
index 12dc9d6ef3..ee331d7878 100644
--- a/packages/icon/src/generated/SMS.tsx
+++ b/packages/icon/src/generated/SMS.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ce13ff18d80b041de18dc658f749a828
+* @checksum 8423889f6df038586a2f3ec7e33eeb45
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SMSProps extends LGGlyph.ComponentProps {}
+
 const SMS = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SMSProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'SMS', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'SMS', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1 4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10C15 11.1046 14.1046 12 13 12H7.75495L4.23014 14.8311C3.74164 15.2234 3 14.8886 3 14.2758L3 12C1.89543 12 1 11.1046 1 10V4ZM3.00001 4.75C3.00001 4.33579 3.3358 4 3.75001 4H11.25C11.6642 4 12 4.33579 12 4.75C12 5.16421 11.6642 5.5 11.25 5.5H3.75001C3.3358 5.5 3.00001 5.16421 3.00001 4.75ZM3.00001 7.75C3.00001 7.33579 3.3358 7 3.75001 7H9.25001C9.66423 7 10 7.33579 10 7.75C10 8.16421 9.66423 8.5 9.25001 8.5H3.75001C3.3358 8.5 3.00001 8.16421 3.00001 7.75Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 4C1 2.89543 1.89543 2 3 2H13C14.1046 2 15 2.89543 15 4V10C15 11.1046 14.1046 12 13 12H7.75495L4.23014 14.8311C3.74164 15.2234 3 14.8886 3 14.2758L3 12C1.89543 12 1 11.1046 1 10V4ZM3.00001 4.75C3.00001 4.33579 3.3358 4 3.75001 4H11.25C11.6642 4 12 4.33579 12 4.75C12 5.16421 11.6642 5.5 11.25 5.5H3.75001C3.3358 5.5 3.00001 5.16421 3.00001 4.75ZM3.00001 7.75C3.00001 7.33579 3.3358 7 3.75001 7H9.25001C9.66423 7 10 7.33579 10 7.75C10 8.16421 9.66423 8.5 9.25001 8.5H3.75001C3.3358 8.5 3.00001 8.16421 3.00001 7.75Z" fill={'currentColor'} /></svg>;
 };
+
 SMS.displayName = 'SMS';
 SMS.isGlyph = true;
+
 export default SMS;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Save.tsx b/packages/icon/src/generated/Save.tsx
index b2b04624d9..be000b9dea 100644
--- a/packages/icon/src/generated/Save.tsx
+++ b/packages/icon/src/generated/Save.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 904983e53706275facd1f094d926a4cf
+* @checksum 9411c2752a656a90086bac45690aea21
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SaveProps extends LGGlyph.ComponentProps {}
+
 const Save = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SaveProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Save', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Save', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M2 3.6C2 3.03995 2 2.75992 2.10899 2.54601C2.20487 2.35785 2.35785 2.20487 2.54601 2.10899C2.75992 2 3.03995 2 3.6 2H11.3373C11.5818 2 11.7041 2 11.8192 2.02763C11.9213 2.05213 12.0188 2.09253 12.1083 2.14736C12.2092 2.2092 12.2957 2.29568 12.4686 2.46862L13.5314 3.53137C13.7043 3.70432 13.7908 3.7908 13.8526 3.89172C13.9075 3.98119 13.9479 4.07873 13.9724 4.18077C14 4.29586 14 4.41815 14 4.66274V12.4C14 12.9601 14 13.2401 13.891 13.454C13.7951 13.6422 13.6422 13.7951 13.454 13.891C13.2532 13.9933 12.9942 13.9996 12.5 14L12.5 9.28404C12.5 9.15788 12.5 9.03494 12.4915 8.93089C12.4822 8.81659 12.4602 8.68172 12.391 8.54601C12.2951 8.35785 12.1422 8.20487 11.954 8.109C11.8183 8.03985 11.6834 8.01781 11.5691 8.00848C11.465 7.99997 11.3421 7.99999 11.216 8H4.78405C4.65786 7.99999 4.53497 7.99997 4.43089 8.00848C4.31659 8.01781 4.18172 8.03985 4.04601 8.109C3.85785 8.20487 3.70487 8.35785 3.609 8.54601C3.53985 8.68172 3.51781 8.81659 3.50848 8.93089C3.49997 9.03497 3.49999 9.15786 3.5 9.28405L3.5 14C3.00583 13.9996 2.74679 13.9933 2.54601 13.891C2.35785 13.7951 2.20487 13.6422 2.10899 13.454C2 13.2401 2 12.9601 2 12.4V3.6ZM4 3.5C3.72386 3.5 3.5 3.72386 3.5 4V6C3.5 6.27614 3.72386 6.5 4 6.5H9C9.27614 6.5 9.5 6.27614 9.5 6V4C9.5 3.72386 9.27614 3.5 9 3.5H4Z" fill="currentColor" /><path d="M11.5 9.3V14H4.5V9.3C4.5 9.15174 4.50039 9.07061 4.50515 9.01232L4.50573 9.00573L4.51232 9.00515C4.57061 9.00039 4.65174 9 4.8 9H11.2C11.3483 9 11.4294 9.00039 11.4877 9.00515L11.4943 9.00573L11.4949 9.01232C11.4996 9.07061 11.5 9.15174 11.5 9.3Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M2 3.6C2 3.03995 2 2.75992 2.10899 2.54601C2.20487 2.35785 2.35785 2.20487 2.54601 2.10899C2.75992 2 3.03995 2 3.6 2H11.3373C11.5818 2 11.7041 2 11.8192 2.02763C11.9213 2.05213 12.0188 2.09253 12.1083 2.14736C12.2092 2.2092 12.2957 2.29568 12.4686 2.46862L13.5314 3.53137C13.7043 3.70432 13.7908 3.7908 13.8526 3.89172C13.9075 3.98119 13.9479 4.07873 13.9724 4.18077C14 4.29586 14 4.41815 14 4.66274V12.4C14 12.9601 14 13.2401 13.891 13.454C13.7951 13.6422 13.6422 13.7951 13.454 13.891C13.2532 13.9933 12.9942 13.9996 12.5 14L12.5 9.28404C12.5 9.15788 12.5 9.03494 12.4915 8.93089C12.4822 8.81659 12.4602 8.68172 12.391 8.54601C12.2951 8.35785 12.1422 8.20487 11.954 8.109C11.8183 8.03985 11.6834 8.01781 11.5691 8.00848C11.465 7.99997 11.3421 7.99999 11.216 8H4.78405C4.65786 7.99999 4.53497 7.99997 4.43089 8.00848C4.31659 8.01781 4.18172 8.03985 4.04601 8.109C3.85785 8.20487 3.70487 8.35785 3.609 8.54601C3.53985 8.68172 3.51781 8.81659 3.50848 8.93089C3.49997 9.03497 3.49999 9.15786 3.5 9.28405L3.5 14C3.00583 13.9996 2.74679 13.9933 2.54601 13.891C2.35785 13.7951 2.20487 13.6422 2.10899 13.454C2 13.2401 2 12.9601 2 12.4V3.6ZM4 3.5C3.72386 3.5 3.5 3.72386 3.5 4V6C3.5 6.27614 3.72386 6.5 4 6.5H9C9.27614 6.5 9.5 6.27614 9.5 6V4C9.5 3.72386 9.27614 3.5 9 3.5H4Z" fill={'currentColor'} /><path d="M11.5 9.3V14H4.5V9.3C4.5 9.15174 4.50039 9.07061 4.50515 9.01232L4.50573 9.00573L4.51232 9.00515C4.57061 9.00039 4.65174 9 4.8 9H11.2C11.3483 9 11.4294 9.00039 11.4877 9.00515L11.4943 9.00573L11.4949 9.01232C11.4996 9.07061 11.5 9.15174 11.5 9.3Z" fill={'currentColor'} /></svg>;
 };
+
 Save.displayName = 'Save';
 Save.isGlyph = true;
+
 export default Save;
\ No newline at end of file
diff --git a/packages/icon/src/generated/SearchIndex.tsx b/packages/icon/src/generated/SearchIndex.tsx
index 654264e3a7..d5a21ef99d 100644
--- a/packages/icon/src/generated/SearchIndex.tsx
+++ b/packages/icon/src/generated/SearchIndex.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 84fafe19c477c2660e835a752627ee27
+* @checksum 64bd94ea0fa76853657b2aba29733933
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SearchIndexProps extends LGGlyph.ComponentProps {}
+
 const SearchIndex = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SearchIndexProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'SearchIndex', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'SearchIndex', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8.81572 12.7544C9.73678 13.6754 11.1421 13.8164 12.2116 13.1777L13.8338 14.7999C14.1006 15.0667 14.5331 15.0667 14.7999 14.7999C15.0667 14.5331 15.0667 14.1006 14.7999 13.8338L13.1777 12.2116C13.8164 11.1421 13.6754 9.73678 12.7544 8.81572C11.6667 7.72809 9.90335 7.72809 8.81572 8.81572C7.72809 9.90335 7.72809 11.6667 8.81572 12.7544ZM11.7883 9.78181C12.3424 10.3359 12.3424 11.2342 11.7883 11.7883C11.2342 12.3424 10.3359 12.3424 9.78181 11.7883C9.22773 11.2342 9.22773 10.3359 9.78181 9.78181C10.3359 9.22773 11.2342 9.22773 11.7883 9.78181Z" fill="currentColor" /><path d="M12 3.66667C12 3.75035 11.9994 3.83206 11.9983 3.91184C11.9994 3.94108 12 3.97047 12 4V4.21428C12 4.49502 11.8763 4.76461 11.6065 5.02898C11.3319 5.2981 10.9246 5.54074 10.4197 5.74366C9.41078 6.14907 8.10976 6.35714 7 6.35714C5.89024 6.35714 4.58922 6.14907 3.58034 5.74366C3.07537 5.54074 2.66813 5.2981 2.39348 5.02898C2.12368 4.76461 2 4.49502 2 4.21428V4C2 3.96691 2.00073 3.934 2.00217 3.90128C2.00073 3.82496 2 3.74677 2 3.66667C2 1.85714 4.53444 1 7 1C9.46556 1 12 1.85714 12 3.66667Z" fill="currentColor" /><path d="M2 5.81314V7.64286C2 7.92359 2.12368 8.19318 2.39348 8.45755C2.66813 8.72667 3.07537 8.96932 3.58034 9.17224C4.58922 9.57765 5.89024 9.78571 7 9.78571C7.04434 9.78571 7.08899 9.78538 7.13391 9.78472C7.3015 9.17079 7.6264 8.59083 8.10862 8.10862C9.16114 7.05609 10.6793 6.75302 12 7.1994V5.81314C11.6435 6.11014 11.1998 6.35041 10.7229 6.54204C9.59874 6.99378 8.19143 7.21428 7 7.21428C5.80857 7.21428 4.40126 6.99378 3.2771 6.54204C2.8002 6.35041 2.35654 6.11014 2 5.81314Z" fill="currentColor" /><path d="M7 10.6429H7.00266C6.97218 11.4587 7.20413 12.2826 7.69852 12.977C7.46653 12.9923 7.23296 13 7 13C4.53444 13 2 12.1429 2 10.3333C2 10.2503 2.00057 10.1683 2.00171 10.0875C2.00057 10.0585 2 10.0293 2 10V9.24171C2.35654 9.53872 2.8002 9.77898 3.2771 9.97062C4.40126 10.4223 5.80857 10.6429 7 10.6429Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.81572 12.7544C9.73678 13.6754 11.1421 13.8164 12.2116 13.1777L13.8338 14.7999C14.1006 15.0667 14.5331 15.0667 14.7999 14.7999C15.0667 14.5331 15.0667 14.1006 14.7999 13.8338L13.1777 12.2116C13.8164 11.1421 13.6754 9.73678 12.7544 8.81572C11.6667 7.72809 9.90335 7.72809 8.81572 8.81572C7.72809 9.90335 7.72809 11.6667 8.81572 12.7544ZM11.7883 9.78181C12.3424 10.3359 12.3424 11.2342 11.7883 11.7883C11.2342 12.3424 10.3359 12.3424 9.78181 11.7883C9.22773 11.2342 9.22773 10.3359 9.78181 9.78181C10.3359 9.22773 11.2342 9.22773 11.7883 9.78181Z" fill={'currentColor'} /><path d="M12 3.66667C12 3.75035 11.9994 3.83206 11.9983 3.91184C11.9994 3.94108 12 3.97047 12 4V4.21428C12 4.49502 11.8763 4.76461 11.6065 5.02898C11.3319 5.2981 10.9246 5.54074 10.4197 5.74366C9.41078 6.14907 8.10976 6.35714 7 6.35714C5.89024 6.35714 4.58922 6.14907 3.58034 5.74366C3.07537 5.54074 2.66813 5.2981 2.39348 5.02898C2.12368 4.76461 2 4.49502 2 4.21428V4C2 3.96691 2.00073 3.934 2.00217 3.90128C2.00073 3.82496 2 3.74677 2 3.66667C2 1.85714 4.53444 1 7 1C9.46556 1 12 1.85714 12 3.66667Z" fill={'currentColor'} /><path d="M2 5.81314V7.64286C2 7.92359 2.12368 8.19318 2.39348 8.45755C2.66813 8.72667 3.07537 8.96932 3.58034 9.17224C4.58922 9.57765 5.89024 9.78571 7 9.78571C7.04434 9.78571 7.08899 9.78538 7.13391 9.78472C7.3015 9.17079 7.6264 8.59083 8.10862 8.10862C9.16114 7.05609 10.6793 6.75302 12 7.1994V5.81314C11.6435 6.11014 11.1998 6.35041 10.7229 6.54204C9.59874 6.99378 8.19143 7.21428 7 7.21428C5.80857 7.21428 4.40126 6.99378 3.2771 6.54204C2.8002 6.35041 2.35654 6.11014 2 5.81314Z" fill={'currentColor'} /><path d="M7 10.6429H7.00266C6.97218 11.4587 7.20413 12.2826 7.69852 12.977C7.46653 12.9923 7.23296 13 7 13C4.53444 13 2 12.1429 2 10.3333C2 10.2503 2.00057 10.1683 2.00171 10.0875C2.00057 10.0585 2 10.0293 2 10V9.24171C2.35654 9.53872 2.8002 9.77898 3.2771 9.97062C4.40126 10.4223 5.80857 10.6429 7 10.6429Z" fill={'currentColor'} /></svg>;
 };
+
 SearchIndex.displayName = 'SearchIndex';
 SearchIndex.isGlyph = true;
+
 export default SearchIndex;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Secondary.tsx b/packages/icon/src/generated/Secondary.tsx
index 32fb68f9c3..499ee531e6 100644
--- a/packages/icon/src/generated/Secondary.tsx
+++ b/packages/icon/src/generated/Secondary.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 88240cf63eabdb680196493723db69de
+* @checksum 9d4e9a9d137b881c1a1438ddaf39122f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SecondaryProps extends LGGlyph.ComponentProps {}
+
 const Secondary = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SecondaryProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Secondary', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Secondary', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor" /><path d="M11 9.6705C11 11.1111 9.78621 12 8.11724 12C6.33793 12 5.06897 10.8966 5 9.39464H6.97241C7.04138 10.069 7.56552 10.3908 8.17241 10.3908C8.76552 10.3908 9.06896 10.1456 9.06896 9.77778C9.06896 9.37931 8.8069 9.18008 8.2 9.01149L6.90345 8.64368C5.70345 8.30651 5.15172 7.38697 5.15172 6.2682C5.15172 4.95019 6.2 4 7.92414 4C9.44138 4 10.6 4.88889 10.7103 6.42146H8.8069C8.71034 5.83908 8.31034 5.63985 7.89655 5.63985C7.41379 5.63985 7.08276 5.85441 7.08276 6.22222C7.08276 6.65134 7.45517 6.81992 7.86897 6.9272L9.08276 7.29502C10.4345 7.67816 11 8.4751 11 9.6705Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill={'currentColor'} /><path d="M11 9.6705C11 11.1111 9.78621 12 8.11724 12C6.33793 12 5.06897 10.8966 5 9.39464H6.97241C7.04138 10.069 7.56552 10.3908 8.17241 10.3908C8.76552 10.3908 9.06896 10.1456 9.06896 9.77778C9.06896 9.37931 8.8069 9.18008 8.2 9.01149L6.90345 8.64368C5.70345 8.30651 5.15172 7.38697 5.15172 6.2682C5.15172 4.95019 6.2 4 7.92414 4C9.44138 4 10.6 4.88889 10.7103 6.42146H8.8069C8.71034 5.83908 8.31034 5.63985 7.89655 5.63985C7.41379 5.63985 7.08276 5.85441 7.08276 6.22222C7.08276 6.65134 7.45517 6.81992 7.86897 6.9272L9.08276 7.29502C10.4345 7.67816 11 8.4751 11 9.6705Z" fill={'currentColor'} /></svg>;
 };
+
 Secondary.displayName = 'Secondary';
 Secondary.isGlyph = true;
+
 export default Secondary;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Serverless.tsx b/packages/icon/src/generated/Serverless.tsx
index 65e067b5ac..92503b1ef4 100644
--- a/packages/icon/src/generated/Serverless.tsx
+++ b/packages/icon/src/generated/Serverless.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6236dd59a36b30b56a85d2551a5ecb37
+* @checksum a14a3b0d2ba38e4e7e33653539280cc6
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ServerlessProps extends LGGlyph.ComponentProps {}
+
 const Serverless = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ServerlessProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Serverless', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Serverless', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.13223 10.8487C0.834955 9.84256 0 8.26878 0 6.5C0 3.46243 2.46243 1 5.5 1C7.74673 1 9.67881 2.34714 10.5326 4.27774C10.9869 4.09848 11.482 4 12 4C14.2091 4 16 5.79086 16 8C16 9.05152 15.5943 10.0083 14.9308 10.7222C14.8896 10.7907 14.8395 10.8552 14.7805 10.9142L13.0092 12.8124C12.6426 13.2337 12.1024 13.5 11.5 13.5L7.79198 13.5C7.4062 14.383 6.52516 15 5.5 15C4.11929 15 3 13.8807 3 12.5C3 12.1448 3.07407 11.8069 3.2076 11.501C3.59316 10.6175 4.47447 10 5.5 10C6.52515 10 7.40619 10.617 7.79197 11.5L11.5 11.5L12.6664 10.25L8.49996 10.25C7.81664 9.34027 6.72814 8.75 5.5 8.75C4.02153 8.75 2.7429 9.6056 2.13223 10.8487Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.13223 10.8487C0.834955 9.84256 0 8.26878 0 6.5C0 3.46243 2.46243 1 5.5 1C7.74673 1 9.67881 2.34714 10.5326 4.27774C10.9869 4.09848 11.482 4 12 4C14.2091 4 16 5.79086 16 8C16 9.05152 15.5943 10.0083 14.9308 10.7222C14.8896 10.7907 14.8395 10.8552 14.7805 10.9142L13.0092 12.8124C12.6426 13.2337 12.1024 13.5 11.5 13.5L7.79198 13.5C7.4062 14.383 6.52516 15 5.5 15C4.11929 15 3 13.8807 3 12.5C3 12.1448 3.07407 11.8069 3.2076 11.501C3.59316 10.6175 4.47447 10 5.5 10C6.52515 10 7.40619 10.617 7.79197 11.5L11.5 11.5L12.6664 10.25L8.49996 10.25C7.81664 9.34027 6.72814 8.75 5.5 8.75C4.02153 8.75 2.7429 9.6056 2.13223 10.8487Z" fill={'currentColor'} /></svg>;
 };
+
 Serverless.displayName = 'Serverless';
 Serverless.isGlyph = true;
+
 export default Serverless;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Settings.tsx b/packages/icon/src/generated/Settings.tsx
index 9a22f53723..a5f4994782 100644
--- a/packages/icon/src/generated/Settings.tsx
+++ b/packages/icon/src/generated/Settings.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 8dd130a799c0e750237f9d7e9bf1973b
+* @checksum 491d0012ddde040519ba12c038553ac9
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SettingsProps extends LGGlyph.ComponentProps {}
+
 const Settings = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SettingsProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Settings', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Settings', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M10.2068 1.06716C9.88875 0.935661 9.52203 1.03749 9.31733 1.31414L8.94293 1.82012C8.30664 1.72253 7.66857 1.72598 7.04948 1.8218L6.67408 1.31582C6.46902 1.03944 6.10217 0.938077 5.7843 1.06998L4.65819 1.53728C4.34032 1.66918 4.15301 2.0005 4.20388 2.34087L4.29701 2.96397C3.79197 3.33462 3.33892 3.78396 2.95865 4.30338L2.33602 4.21114C1.99558 4.1607 1.66451 4.34843 1.53301 4.66647L1.06716 5.79319C0.935661 6.11122 1.03749 6.47794 1.31414 6.68265L1.82012 7.05705C1.72253 7.69334 1.72598 8.33142 1.8218 8.9505L1.31583 9.32589C1.03945 9.53096 0.938089 9.89781 1.06999 10.2157L1.53729 11.3418C1.6692 11.6597 2.00051 11.847 2.34088 11.7961L2.96398 11.703C3.33462 12.208 3.78396 12.6611 4.30338 13.0413L4.21114 13.664C4.1607 14.0044 4.34843 14.3355 4.66647 14.467L5.79319 14.9328C6.11122 15.0643 6.47794 14.9625 6.68265 14.6858L7.05705 14.1799C7.69335 14.2774 8.33142 14.274 8.95051 14.1782L9.3259 14.6841C9.53096 14.9605 9.89781 15.0619 10.2157 14.93L11.3418 14.4627C11.6597 14.3308 11.847 13.9995 11.7961 13.6591L11.703 13.036C12.208 12.6654 12.6611 12.216 13.0413 11.6966L13.664 11.7888C14.0044 11.8393 14.3355 11.6515 14.467 11.3335L14.9328 10.2068C15.0643 9.88875 14.9625 9.52203 14.6858 9.31733L14.1799 8.94293C14.2774 8.30663 14.274 7.66856 14.1782 7.04947L14.6841 6.67408C14.9605 6.46902 15.0619 6.10217 14.93 5.7843L14.4627 4.65819C14.3308 4.34032 13.9995 4.15301 13.6591 4.20388L13.036 4.29701C12.6654 3.79197 12.216 3.33892 11.6966 2.95865L11.7888 2.33602C11.8393 1.99558 11.6515 1.66451 11.3335 1.53301L10.2068 1.06716ZM10.5413 9.05074C9.96102 10.4543 8.35278 11.1216 6.94924 10.5413C5.54569 9.96102 4.87833 8.35278 5.45865 6.94924C6.03896 5.54569 7.6472 4.87833 9.05074 5.45865C10.4543 6.03896 11.1216 7.6472 10.5413 9.05074Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M10.2068 1.06716C9.88875 0.935661 9.52203 1.03749 9.31733 1.31414L8.94293 1.82012C8.30664 1.72253 7.66857 1.72598 7.04948 1.8218L6.67408 1.31582C6.46902 1.03944 6.10217 0.938077 5.7843 1.06998L4.65819 1.53728C4.34032 1.66918 4.15301 2.0005 4.20388 2.34087L4.29701 2.96397C3.79197 3.33462 3.33892 3.78396 2.95865 4.30338L2.33602 4.21114C1.99558 4.1607 1.66451 4.34843 1.53301 4.66647L1.06716 5.79319C0.935661 6.11122 1.03749 6.47794 1.31414 6.68265L1.82012 7.05705C1.72253 7.69334 1.72598 8.33142 1.8218 8.9505L1.31583 9.32589C1.03945 9.53096 0.938089 9.89781 1.06999 10.2157L1.53729 11.3418C1.6692 11.6597 2.00051 11.847 2.34088 11.7961L2.96398 11.703C3.33462 12.208 3.78396 12.6611 4.30338 13.0413L4.21114 13.664C4.1607 14.0044 4.34843 14.3355 4.66647 14.467L5.79319 14.9328C6.11122 15.0643 6.47794 14.9625 6.68265 14.6858L7.05705 14.1799C7.69335 14.2774 8.33142 14.274 8.95051 14.1782L9.3259 14.6841C9.53096 14.9605 9.89781 15.0619 10.2157 14.93L11.3418 14.4627C11.6597 14.3308 11.847 13.9995 11.7961 13.6591L11.703 13.036C12.208 12.6654 12.6611 12.216 13.0413 11.6966L13.664 11.7888C14.0044 11.8393 14.3355 11.6515 14.467 11.3335L14.9328 10.2068C15.0643 9.88875 14.9625 9.52203 14.6858 9.31733L14.1799 8.94293C14.2774 8.30663 14.274 7.66856 14.1782 7.04947L14.6841 6.67408C14.9605 6.46902 15.0619 6.10217 14.93 5.7843L14.4627 4.65819C14.3308 4.34032 13.9995 4.15301 13.6591 4.20388L13.036 4.29701C12.6654 3.79197 12.216 3.33892 11.6966 2.95865L11.7888 2.33602C11.8393 1.99558 11.6515 1.66451 11.3335 1.53301L10.2068 1.06716ZM10.5413 9.05074C9.96102 10.4543 8.35278 11.1216 6.94924 10.5413C5.54569 9.96102 4.87833 8.35278 5.45865 6.94924C6.03896 5.54569 7.6472 4.87833 9.05074 5.45865C10.4543 6.03896 11.1216 7.6472 10.5413 9.05074Z" fill={'currentColor'} /></svg>;
 };
+
 Settings.displayName = 'Settings';
 Settings.isGlyph = true;
+
 export default Settings;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ShardedCluster.tsx b/packages/icon/src/generated/ShardedCluster.tsx
index ad179067df..56ccb8678c 100644
--- a/packages/icon/src/generated/ShardedCluster.tsx
+++ b/packages/icon/src/generated/ShardedCluster.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bce97cf1d21ec506245a6e1311775b42
+* @checksum c83bc43f12c1a7c88dce3f186ee8561b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ShardedClusterProps extends LGGlyph.ComponentProps {}
+
 const ShardedCluster = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ShardedClusterProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ShardedCluster', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ShardedCluster', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M13 2.75C13 3.7165 12.2165 4.5 11.25 4.5C11.1218 4.5 10.9969 4.48622 10.8766 4.46007L10.2582 5.32584C10.8666 5.84015 11.2971 6.55834 11.4444 7.375H12.6149C12.8665 6.71716 13.5037 6.25 14.25 6.25C15.2165 6.25 16 7.0335 16 8C16 8.9665 15.2165 9.75 14.25 9.75C13.5037 9.75 12.8665 9.28284 12.6149 8.625H11.4444C11.2971 9.44165 10.8666 10.1598 10.2582 10.6741L10.8766 11.5399C10.9969 11.5138 11.1219 11.5 11.25 11.5C12.2165 11.5 13 12.2835 13 13.25C13 14.2165 12.2165 15 11.25 15C10.2835 15 9.5 14.2165 9.5 13.25C9.5 12.8677 9.6226 12.514 9.83062 12.2261L9.1691 11.3C8.8035 11.4295 8.40998 11.5 8 11.5C7.59258 11.5 7.20142 11.4304 6.83777 11.3024L6.17369 12.2321C6.3791 12.5189 6.5 12.8703 6.5 13.25C6.5 14.2165 5.7165 15 4.75 15C3.7835 15 3 14.2165 3 13.25C3 12.2835 3.7835 11.5 4.75 11.5C4.88079 11.5 5.00822 11.5143 5.13082 11.5416L5.74716 10.6787C5.13591 10.1641 4.70329 9.44405 4.55564 8.625H3.38509C3.13349 9.28284 2.4963 9.75 1.75 9.75C0.783502 9.75 0 8.9665 0 8C0 7.0335 0.783502 6.25 1.75 6.25C2.4963 6.25 3.13349 6.71716 3.38509 7.375H4.55564C4.70329 6.55595 5.13591 5.83594 5.74716 5.32133L5.13082 4.45845C5.00822 4.48565 4.88079 4.5 4.75 4.5C3.7835 4.5 3 3.7165 3 2.75C3 1.7835 3.7835 1 4.75 1C5.7165 1 6.5 1.7835 6.5 2.75C6.5 3.12967 6.3791 3.48109 6.17369 3.76788L6.83777 4.69759C7.20142 4.56961 7.59258 4.5 8 4.5C8.40998 4.5 8.80349 4.57049 9.16908 4.70001L9.83061 3.77386C9.62259 3.48598 9.5 3.13231 9.5 2.75C9.5 1.7835 10.2835 1 11.25 1C12.2165 1 13 1.7835 13 2.75ZM9.75 8C9.75 8.9665 8.9665 9.75 8 9.75C7.0335 9.75 6.25 8.9665 6.25 8C6.25 7.0335 7.0335 6.25 8 6.25C8.9665 6.25 9.75 7.0335 9.75 8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13 2.75C13 3.7165 12.2165 4.5 11.25 4.5C11.1218 4.5 10.9969 4.48622 10.8766 4.46007L10.2582 5.32584C10.8666 5.84015 11.2971 6.55834 11.4444 7.375H12.6149C12.8665 6.71716 13.5037 6.25 14.25 6.25C15.2165 6.25 16 7.0335 16 8C16 8.9665 15.2165 9.75 14.25 9.75C13.5037 9.75 12.8665 9.28284 12.6149 8.625H11.4444C11.2971 9.44165 10.8666 10.1598 10.2582 10.6741L10.8766 11.5399C10.9969 11.5138 11.1219 11.5 11.25 11.5C12.2165 11.5 13 12.2835 13 13.25C13 14.2165 12.2165 15 11.25 15C10.2835 15 9.5 14.2165 9.5 13.25C9.5 12.8677 9.6226 12.514 9.83062 12.2261L9.1691 11.3C8.8035 11.4295 8.40998 11.5 8 11.5C7.59258 11.5 7.20142 11.4304 6.83777 11.3024L6.17369 12.2321C6.3791 12.5189 6.5 12.8703 6.5 13.25C6.5 14.2165 5.7165 15 4.75 15C3.7835 15 3 14.2165 3 13.25C3 12.2835 3.7835 11.5 4.75 11.5C4.88079 11.5 5.00822 11.5143 5.13082 11.5416L5.74716 10.6787C5.13591 10.1641 4.70329 9.44405 4.55564 8.625H3.38509C3.13349 9.28284 2.4963 9.75 1.75 9.75C0.783502 9.75 0 8.9665 0 8C0 7.0335 0.783502 6.25 1.75 6.25C2.4963 6.25 3.13349 6.71716 3.38509 7.375H4.55564C4.70329 6.55595 5.13591 5.83594 5.74716 5.32133L5.13082 4.45845C5.00822 4.48565 4.88079 4.5 4.75 4.5C3.7835 4.5 3 3.7165 3 2.75C3 1.7835 3.7835 1 4.75 1C5.7165 1 6.5 1.7835 6.5 2.75C6.5 3.12967 6.3791 3.48109 6.17369 3.76788L6.83777 4.69759C7.20142 4.56961 7.59258 4.5 8 4.5C8.40998 4.5 8.80349 4.57049 9.16908 4.70001L9.83061 3.77386C9.62259 3.48598 9.5 3.13231 9.5 2.75C9.5 1.7835 10.2835 1 11.25 1C12.2165 1 13 1.7835 13 2.75ZM9.75 8C9.75 8.9665 8.9665 9.75 8 9.75C7.0335 9.75 6.25 8.9665 6.25 8C6.25 7.0335 7.0335 6.25 8 6.25C8.9665 6.25 9.75 7.0335 9.75 8Z" fill={'currentColor'} /></svg>;
 };
+
 ShardedCluster.displayName = 'ShardedCluster';
 ShardedCluster.isGlyph = true;
+
 export default ShardedCluster;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Shell.tsx b/packages/icon/src/generated/Shell.tsx
index 4462d94775..ec32ab3db2 100644
--- a/packages/icon/src/generated/Shell.tsx
+++ b/packages/icon/src/generated/Shell.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4b16b5ec09706e8eff27700d81d1b23b
+* @checksum 2952b655c4715659a46d72ae5ffca739
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ShellProps extends LGGlyph.ComponentProps {}
+
 const Shell = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ShellProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Shell', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Shell', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}><path d="M1.8 5.2L5.2 7.4L1.41036 9.92642C1.18282 10.0781 1.11937 10.3845 1.26793 10.6141L1.82463 11.4744C1.9761 11.7085 2.28977 11.7735 2.52176 11.6188L7.5 8.3C7.8 8.1 8 7.8 8 7.5C8 7.2 7.8 6.9 7.6 6.7L2.52235 3.28412C2.29032 3.12804 1.97539 3.19258 1.82347 3.42736L1.27593 4.27357C1.12424 4.50799 1.19394 4.82121 1.43071 4.96919L1.8 5.2ZM6.7 13C6.7 13.2761 6.92386 13.5 7.2 13.5H14.9C15.1761 13.5 15.4 13.2761 15.4 13V12C15.4 11.7239 15.1761 11.5 14.9 11.5H7.2C6.92386 11.5 6.7 11.7239 6.7 12V13Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M1.8 5.2L5.2 7.4L1.41036 9.92642C1.18282 10.0781 1.11937 10.3845 1.26793 10.6141L1.82463 11.4744C1.9761 11.7085 2.28977 11.7735 2.52176 11.6188L7.5 8.3C7.8 8.1 8 7.8 8 7.5C8 7.2 7.8 6.9 7.6 6.7L2.52235 3.28412C2.29032 3.12804 1.97539 3.19258 1.82347 3.42736L1.27593 4.27357C1.12424 4.50799 1.19394 4.82121 1.43071 4.96919L1.8 5.2ZM6.7 13C6.7 13.2761 6.92386 13.5 7.2 13.5H14.9C15.1761 13.5 15.4 13.2761 15.4 13V12C15.4 11.7239 15.1761 11.5 14.9 11.5H7.2C6.92386 11.5 6.7 11.7239 6.7 12V13Z" fill={'currentColor'} /></svg>;
 };
+
 Shell.displayName = 'Shell';
 Shell.isGlyph = true;
+
 export default Shell;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Shield.tsx b/packages/icon/src/generated/Shield.tsx
index 8068d3c051..495b1703cf 100644
--- a/packages/icon/src/generated/Shield.tsx
+++ b/packages/icon/src/generated/Shield.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 70cc6170af301b7a5ccc2e39f2ae8d34
+* @checksum 3a462a4cc139bb585787a62a74b28410
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ShieldProps extends LGGlyph.ComponentProps {}
+
 const Shield = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ShieldProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Shield', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Shield', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8.00001 15.0001C10.7303 14.4227 12.9549 12.3761 13.833 9.63371L13.9712 9.20234L14.6795 4.95897C14.7201 4.71585 14.5772 4.47999 14.3447 4.39817C12.1971 3.64242 10.1477 2.5622 8.28968 1.21369C8.11569 1.08742 7.88082 1.08253 7.70399 1.20478L7.59446 1.2805C5.73823 2.56382 3.73939 3.60897 1.64175 4.39348C1.41552 4.47809 1.27832 4.70976 1.31729 4.94814L2.02886 9.30167L2.14042 9.64296C3.0359 12.3823 5.2671 14.4222 8.00001 15.0001ZM7.99977 12.9449C6.11619 12.4083 4.59951 10.9361 3.9669 9.00085L3.90464 8.8104L3.48073 6.21684C3.4435 5.98905 3.56721 5.76581 3.7786 5.67313C5.13339 5.07913 6.44393 4.38092 7.69919 3.58415C7.86827 3.47682 8.08467 3.47835 8.25243 3.58774C9.50741 4.40603 10.8318 5.11469 12.204 5.7004C12.4189 5.79214 12.5455 6.01806 12.507 6.24855L12.0954 8.7139L12.0027 9.0034C11.3839 10.936 9.87631 12.4092 7.99977 12.9449Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M7.12322 8.87421L9.85084 6.14657C10.0461 5.9513 10.3627 5.9513 10.558 6.14657L10.9115 6.50012C11.1068 6.69538 11.1068 7.01197 10.9115 7.20723L7.37793 10.7408C7.1644 10.9544 6.81177 10.9313 6.62783 10.6918L5.10349 8.70704C4.93529 8.48804 4.97648 8.17415 5.19548 8.00595L5.49289 7.77753C5.76665 7.56728 6.15901 7.61876 6.36926 7.89252L7.12322 8.87421Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.00001 15.0001C10.7303 14.4227 12.9549 12.3761 13.833 9.63371L13.9712 9.20234L14.6795 4.95897C14.7201 4.71585 14.5772 4.47999 14.3447 4.39817C12.1971 3.64242 10.1477 2.5622 8.28968 1.21369C8.11569 1.08742 7.88082 1.08253 7.70399 1.20478L7.59446 1.2805C5.73823 2.56382 3.73939 3.60897 1.64175 4.39348C1.41552 4.47809 1.27832 4.70976 1.31729 4.94814L2.02886 9.30167L2.14042 9.64296C3.0359 12.3823 5.2671 14.4222 8.00001 15.0001ZM7.99977 12.9449C6.11619 12.4083 4.59951 10.9361 3.9669 9.00085L3.90464 8.8104L3.48073 6.21684C3.4435 5.98905 3.56721 5.76581 3.7786 5.67313C5.13339 5.07913 6.44393 4.38092 7.69919 3.58415C7.86827 3.47682 8.08467 3.47835 8.25243 3.58774C9.50741 4.40603 10.8318 5.11469 12.204 5.7004C12.4189 5.79214 12.5455 6.01806 12.507 6.24855L12.0954 8.7139L12.0027 9.0034C11.3839 10.936 9.87631 12.4092 7.99977 12.9449Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M7.12322 8.87421L9.85084 6.14657C10.0461 5.9513 10.3627 5.9513 10.558 6.14657L10.9115 6.50012C11.1068 6.69538 11.1068 7.01197 10.9115 7.20723L7.37793 10.7408C7.1644 10.9544 6.81177 10.9313 6.62783 10.6918L5.10349 8.70704C4.93529 8.48804 4.97648 8.17415 5.19548 8.00595L5.49289 7.77753C5.76665 7.56728 6.15901 7.61876 6.36926 7.89252L7.12322 8.87421Z" fill={'currentColor'} /></svg>;
 };
+
 Shield.displayName = 'Shield';
 Shield.isGlyph = true;
+
 export default Shield;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Shirt.tsx b/packages/icon/src/generated/Shirt.tsx
index 009876fe7c..51d43a80cd 100644
--- a/packages/icon/src/generated/Shirt.tsx
+++ b/packages/icon/src/generated/Shirt.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 98b2f66e19898c84f1dce726e066deb6
+* @checksum ad208ac2a0dcf4c053737af22770cd62
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ShirtProps extends LGGlyph.ComponentProps {}
+
 const Shirt = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ShirtProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Shirt', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Shirt', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.08868 4.24432C2.03629 4.02602 2.13581 3.79957 2.33205 3.69055L5.37504 2C8.00004 4.5 10.625 2 10.625 2L13.668 3.69055C13.8643 3.79957 13.9638 4.02602 13.9114 4.24432L13.388 6.42503C13.3071 6.76224 13.0055 7 12.6587 7H11V12.4271C11 12.7782 10.8017 13.0992 10.4876 13.2562C8.92164 14.0392 7.07844 14.0392 5.5125 13.2562C5.19843 13.0992 5.00004 12.7782 5.00004 12.4271V7H3.34134C2.99455 7 2.69298 6.76224 2.61205 6.42503L2.08868 4.24432Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.08868 4.24432C2.03629 4.02602 2.13581 3.79957 2.33205 3.69055L5.37504 2C8.00004 4.5 10.625 2 10.625 2L13.668 3.69055C13.8643 3.79957 13.9638 4.02602 13.9114 4.24432L13.388 6.42503C13.3071 6.76224 13.0055 7 12.6587 7H11V12.4271C11 12.7782 10.8017 13.0992 10.4876 13.2562C8.92164 14.0392 7.07844 14.0392 5.5125 13.2562C5.19843 13.0992 5.00004 12.7782 5.00004 12.4271V7H3.34134C2.99455 7 2.69298 6.76224 2.61205 6.42503L2.08868 4.24432Z" fill={'currentColor'} /></svg>;
 };
+
 Shirt.displayName = 'Shirt';
 Shirt.isGlyph = true;
+
 export default Shirt;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Shortcut.tsx b/packages/icon/src/generated/Shortcut.tsx
index afba63caa3..dd73114d59 100644
--- a/packages/icon/src/generated/Shortcut.tsx
+++ b/packages/icon/src/generated/Shortcut.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 54866582b4ce0e776960df3186a39b95
+* @checksum ceca83e8f08a28f4a1f467a88f5700b3
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ShortcutProps extends LGGlyph.ComponentProps {}
+
 const Shortcut = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ShortcutProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Shortcut', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Shortcut', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M14.1332 8.64356L13.0543 7.99961L14.1332 7.35623C14.6761 7.03257 15 6.47109 15 5.85406C15 5.23704 14.6755 4.67555 14.1332 4.3519L8.95605 1.26399C8.36504 0.911724 7.63381 0.912285 7.04395 1.26399L1.86682 4.3519C1.3239 4.67555 1 5.23704 1 5.85406C1 6.47109 1.32448 7.03257 1.86682 7.35623L2.9457 7.99961L1.86682 8.64356C1.3239 8.96722 1 9.5287 1 10.1457C1 10.7627 1.32448 11.3242 1.86682 11.6479L7.04395 14.7358C7.33946 14.9119 7.66973 15 8 15C8.33027 15 8.66112 14.9119 8.95547 14.7364L14.1332 11.6485C14.6761 11.3248 15 10.7633 15 10.1463C15 9.52927 14.6755 8.96722 14.1332 8.64356ZM2.15884 5.85406C2.15884 5.62577 2.27415 5.42664 2.47463 5.30716L7.65235 2.21869C7.75954 2.15474 7.87948 2.12277 8 2.12277C8.12052 2.12277 8.24046 2.1553 8.34823 2.21925L13.526 5.30716C13.7264 5.42664 13.8417 5.62577 13.8417 5.85406C13.8417 6.08236 13.7264 6.28149 13.526 6.40097L11.9499 7.34108L8.95605 5.55509C8.3662 5.20339 7.63439 5.20339 7.04453 5.55509L5.76185 6.32023C5.48796 6.48361 5.40311 6.84093 5.57431 7.11C5.73868 7.36832 6.0787 7.44906 6.34165 7.29221L7.65235 6.51035C7.86731 6.3819 8.13327 6.3819 8.34823 6.51035L10.845 7.99961L8.34765 9.48888C8.13443 9.61677 7.86789 9.61733 7.65235 9.48888L2.47463 6.40041C2.27415 6.28093 2.15884 6.08236 2.15884 5.85406ZM13.5254 10.6921L8.34708 13.7805C8.13385 13.9084 7.86731 13.909 7.65177 13.7805L2.47405 10.6926C2.27357 10.5732 2.15827 10.374 2.15827 10.1457C2.15827 9.91743 2.27357 9.7183 2.47405 9.59882L4.05008 8.65871L7.04338 10.4441C7.33888 10.6203 7.66915 10.7083 7.99942 10.7083C8.32969 10.7083 8.66054 10.6203 8.95489 10.4447L11.9488 8.65927L13.5248 9.59938C13.7253 9.71886 13.8406 9.91799 13.8406 10.1463C13.8406 10.3746 13.7253 10.5737 13.5248 10.6932L13.5254 10.6921Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M14.1332 8.64356L13.0543 7.99961L14.1332 7.35623C14.6761 7.03257 15 6.47109 15 5.85406C15 5.23704 14.6755 4.67555 14.1332 4.3519L8.95605 1.26399C8.36504 0.911724 7.63381 0.912285 7.04395 1.26399L1.86682 4.3519C1.3239 4.67555 1 5.23704 1 5.85406C1 6.47109 1.32448 7.03257 1.86682 7.35623L2.9457 7.99961L1.86682 8.64356C1.3239 8.96722 1 9.5287 1 10.1457C1 10.7627 1.32448 11.3242 1.86682 11.6479L7.04395 14.7358C7.33946 14.9119 7.66973 15 8 15C8.33027 15 8.66112 14.9119 8.95547 14.7364L14.1332 11.6485C14.6761 11.3248 15 10.7633 15 10.1463C15 9.52927 14.6755 8.96722 14.1332 8.64356ZM2.15884 5.85406C2.15884 5.62577 2.27415 5.42664 2.47463 5.30716L7.65235 2.21869C7.75954 2.15474 7.87948 2.12277 8 2.12277C8.12052 2.12277 8.24046 2.1553 8.34823 2.21925L13.526 5.30716C13.7264 5.42664 13.8417 5.62577 13.8417 5.85406C13.8417 6.08236 13.7264 6.28149 13.526 6.40097L11.9499 7.34108L8.95605 5.55509C8.3662 5.20339 7.63439 5.20339 7.04453 5.55509L5.76185 6.32023C5.48796 6.48361 5.40311 6.84093 5.57431 7.11C5.73868 7.36832 6.0787 7.44906 6.34165 7.29221L7.65235 6.51035C7.86731 6.3819 8.13327 6.3819 8.34823 6.51035L10.845 7.99961L8.34765 9.48888C8.13443 9.61677 7.86789 9.61733 7.65235 9.48888L2.47463 6.40041C2.27415 6.28093 2.15884 6.08236 2.15884 5.85406ZM13.5254 10.6921L8.34708 13.7805C8.13385 13.9084 7.86731 13.909 7.65177 13.7805L2.47405 10.6926C2.27357 10.5732 2.15827 10.374 2.15827 10.1457C2.15827 9.91743 2.27357 9.7183 2.47405 9.59882L4.05008 8.65871L7.04338 10.4441C7.33888 10.6203 7.66915 10.7083 7.99942 10.7083C8.32969 10.7083 8.66054 10.6203 8.95489 10.4447L11.9488 8.65927L13.5248 9.59938C13.7253 9.71886 13.8406 9.91799 13.8406 10.1463C13.8406 10.3746 13.7253 10.5737 13.5248 10.6932L13.5254 10.6921Z" fill={'currentColor'} /></svg>;
 };
+
 Shortcut.displayName = 'Shortcut';
 Shortcut.isGlyph = true;
+
 export default Shortcut;
\ No newline at end of file
diff --git a/packages/icon/src/generated/SortAscending.tsx b/packages/icon/src/generated/SortAscending.tsx
index 35d8e3b2e5..e4dfe92249 100644
--- a/packages/icon/src/generated/SortAscending.tsx
+++ b/packages/icon/src/generated/SortAscending.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d467fb89729cd88f35c539371faf8b14
+* @checksum e29a9cd318c16f6f7f8d79a1d12a4ba3
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SortAscendingProps extends LGGlyph.ComponentProps {}
+
 const SortAscending = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SortAscendingProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'SortAscending', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'SortAscending', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M4.44991 1.14265C4.23029 0.95245 3.90429 0.952449 3.68466 1.14265L1.20302 3.29182C0.793944 3.64609 1.04449 4.31811 1.58564 4.31811H2.89835V13.6696C2.89835 14.3152 3.4217 14.8386 4.06729 14.8386C4.71287 14.8386 5.23623 14.3152 5.23623 13.6696V4.31811H6.54893C7.09009 4.31811 7.34063 3.64609 6.93156 3.29182L4.44991 1.14265Z" fill="currentColor" /><path d="M8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H14C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5H8Z" fill="currentColor" /><path d="M7 9C7 8.44772 7.44772 8 8 8H12C12.5523 8 13 8.44772 13 9C13 9.55229 12.5523 10 12 10H8C7.44772 10 7 9.55229 7 9Z" fill="currentColor" /><path d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H10C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11H8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.44991 1.14265C4.23029 0.95245 3.90429 0.952449 3.68466 1.14265L1.20302 3.29182C0.793944 3.64609 1.04449 4.31811 1.58564 4.31811H2.89835V13.6696C2.89835 14.3152 3.4217 14.8386 4.06729 14.8386C4.71287 14.8386 5.23623 14.3152 5.23623 13.6696V4.31811H6.54893C7.09009 4.31811 7.34063 3.64609 6.93156 3.29182L4.44991 1.14265Z" fill={'currentColor'} /><path d="M8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H14C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5H8Z" fill={'currentColor'} /><path d="M7 9C7 8.44772 7.44772 8 8 8H12C12.5523 8 13 8.44772 13 9C13 9.55229 12.5523 10 12 10H8C7.44772 10 7 9.55229 7 9Z" fill={'currentColor'} /><path d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H10C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11H8Z" fill={'currentColor'} /></svg>;
 };
+
 SortAscending.displayName = 'SortAscending';
 SortAscending.isGlyph = true;
+
 export default SortAscending;
\ No newline at end of file
diff --git a/packages/icon/src/generated/SortDescending.tsx b/packages/icon/src/generated/SortDescending.tsx
index 8acc89e286..3945807c93 100644
--- a/packages/icon/src/generated/SortDescending.tsx
+++ b/packages/icon/src/generated/SortDescending.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 77ca38381a8dfb3d248f686f85aae34c
+* @checksum bbdffa99d2b8a8f52fe9b48d488f407d
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SortDescendingProps extends LGGlyph.ComponentProps {}
+
 const SortDescending = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SortDescendingProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'SortDescending', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'SortDescending', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M4.44991 14.6959C4.23029 14.8861 3.90429 14.8861 3.68466 14.6959L1.20302 12.5467C0.793944 12.1925 1.04449 11.5205 1.58564 11.5205H2.89835V2.16894C2.89835 1.52335 3.4217 1 4.06729 1C4.71287 1 5.23623 1.52335 5.23623 2.16894V11.5205H6.54893C7.09009 11.5205 7.34063 12.1925 6.93156 12.5467L4.44991 14.6959Z" fill="currentColor" /><path d="M8 3C7.44772 3 7 3.44772 7 4C7 4.55229 7.44772 5 8 5H14C14.5523 5 15 4.55229 15 4C15 3.44772 14.5523 3 14 3H8Z" fill="currentColor" /><path d="M7 7C7 6.44772 7.44772 6 8 6H12C12.5523 6 13 6.44772 13 7C13 7.55229 12.5523 8 12 8H8C7.44772 8 7 7.55229 7 7Z" fill="currentColor" /><path d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H10C10.5523 11 11 10.5523 11 10C11 9.44771 10.5523 9 10 9H8Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M4.44991 14.6959C4.23029 14.8861 3.90429 14.8861 3.68466 14.6959L1.20302 12.5467C0.793944 12.1925 1.04449 11.5205 1.58564 11.5205H2.89835V2.16894C2.89835 1.52335 3.4217 1 4.06729 1C4.71287 1 5.23623 1.52335 5.23623 2.16894V11.5205H6.54893C7.09009 11.5205 7.34063 12.1925 6.93156 12.5467L4.44991 14.6959Z" fill={'currentColor'} /><path d="M8 3C7.44772 3 7 3.44772 7 4C7 4.55229 7.44772 5 8 5H14C14.5523 5 15 4.55229 15 4C15 3.44772 14.5523 3 14 3H8Z" fill={'currentColor'} /><path d="M7 7C7 6.44772 7.44772 6 8 6H12C12.5523 6 13 6.44772 13 7C13 7.55229 12.5523 8 12 8H8C7.44772 8 7 7.55229 7 7Z" fill={'currentColor'} /><path d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H10C10.5523 11 11 10.5523 11 10C11 9.44771 10.5523 9 10 9H8Z" fill={'currentColor'} /></svg>;
 };
+
 SortDescending.displayName = 'SortDescending';
 SortDescending.isGlyph = true;
+
 export default SortDescending;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Sparkle.tsx b/packages/icon/src/generated/Sparkle.tsx
index 82f7d99f1e..34e6f19bbb 100644
--- a/packages/icon/src/generated/Sparkle.tsx
+++ b/packages/icon/src/generated/Sparkle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum dcb075c6ece22142352c3c8ccae791a9
+* @checksum 40c480abbb0303f323a355c3c7eca0b6
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SparkleProps extends LGGlyph.ComponentProps {}
+
 const Sparkle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SparkleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Sparkle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Sparkle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M6.27334 2.89343L5.27501 5.88842C5.1749 6.18877 4.93922 6.42445 4.63887 6.52456L1.64388 7.52289C1.18537 7.67573 1.18537 8.32427 1.64388 8.47711L4.63887 9.47544C4.93922 9.57555 5.1749 9.81123 5.27501 10.1116L6.27334 13.1066C6.42618 13.5651 7.07472 13.5651 7.22756 13.1066L8.22589 10.1116C8.326 9.81123 8.56168 9.57555 8.86203 9.47544L11.857 8.47711C12.3155 8.32427 12.3155 7.67573 11.857 7.52289L8.86203 6.52456C8.56168 6.42445 8.326 6.18877 8.22589 5.88842L7.22756 2.89343C7.07472 2.43492 6.42618 2.43492 6.27334 2.89343Z" fill="currentColor" /><path d="M12.5469 1.17194L12.3158 1.8651C12.2157 2.16545 11.98 2.40113 11.6797 2.50125L10.9865 2.7323C10.7573 2.80872 10.7573 3.13299 10.9865 3.20941L11.6797 3.44046C11.98 3.54058 12.2157 3.77626 12.3158 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.255 4.0766C13.3552 3.77626 13.5908 3.54058 13.8912 3.44046L14.5843 3.20941C14.8136 3.13299 14.8136 2.80872 14.5843 2.7323L13.8912 2.50125C13.5908 2.40113 13.3552 2.16545 13.255 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill="currentColor" /><path d="M12.5469 11.2302L12.3158 11.9234C12.2157 12.2237 11.98 12.4594 11.6797 12.5595L10.9865 12.7906C10.7573 12.867 10.7573 13.1913 10.9865 13.2677L11.6797 13.4988C11.98 13.5989 12.2157 13.8346 12.3158 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.255 14.1349C13.3552 13.8346 13.5908 13.5989 13.8912 13.4988L14.5843 13.2677C14.8136 13.1913 14.8136 12.867 14.5843 12.7906L13.8912 12.5595C13.5908 12.4594 13.3552 12.2237 13.255 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M6.27334 2.89343L5.27501 5.88842C5.1749 6.18877 4.93922 6.42445 4.63887 6.52456L1.64388 7.52289C1.18537 7.67573 1.18537 8.32427 1.64388 8.47711L4.63887 9.47544C4.93922 9.57555 5.1749 9.81123 5.27501 10.1116L6.27334 13.1066C6.42618 13.5651 7.07472 13.5651 7.22756 13.1066L8.22589 10.1116C8.326 9.81123 8.56168 9.57555 8.86203 9.47544L11.857 8.47711C12.3155 8.32427 12.3155 7.67573 11.857 7.52289L8.86203 6.52456C8.56168 6.42445 8.326 6.18877 8.22589 5.88842L7.22756 2.89343C7.07472 2.43492 6.42618 2.43492 6.27334 2.89343Z" fill={'currentColor'} /><path d="M12.5469 1.17194L12.3158 1.8651C12.2157 2.16545 11.98 2.40113 11.6797 2.50125L10.9865 2.7323C10.7573 2.80872 10.7573 3.13299 10.9865 3.20941L11.6797 3.44046C11.98 3.54058 12.2157 3.77626 12.3158 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.255 4.0766C13.3552 3.77626 13.5908 3.54058 13.8912 3.44046L14.5843 3.20941C14.8136 3.13299 14.8136 2.80872 14.5843 2.7323L13.8912 2.50125C13.5908 2.40113 13.3552 2.16545 13.255 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill={'currentColor'} /><path d="M12.5469 11.2302L12.3158 11.9234C12.2157 12.2237 11.98 12.4594 11.6797 12.5595L10.9865 12.7906C10.7573 12.867 10.7573 13.1913 10.9865 13.2677L11.6797 13.4988C11.98 13.5989 12.2157 13.8346 12.3158 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.255 14.1349C13.3552 13.8346 13.5908 13.5989 13.8912 13.4988L14.5843 13.2677C14.8136 13.1913 14.8136 12.867 14.5843 12.7906L13.8912 12.5595C13.5908 12.4594 13.3552 12.2237 13.255 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" fill={'currentColor'} /></svg>;
 };
+
 Sparkle.displayName = 'Sparkle';
 Sparkle.isGlyph = true;
+
 export default Sparkle;
\ No newline at end of file
diff --git a/packages/icon/src/generated/SplitHorizontal.tsx b/packages/icon/src/generated/SplitHorizontal.tsx
index f535f6a96e..92febf4d7f 100644
--- a/packages/icon/src/generated/SplitHorizontal.tsx
+++ b/packages/icon/src/generated/SplitHorizontal.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 79804e11ff1c22567752e7be4c9d5f7b
+* @checksum c9945622c9783716fe99eb60f0a8fcad
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SplitHorizontalProps extends LGGlyph.ComponentProps {}
+
 const SplitHorizontal = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SplitHorizontalProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'SplitHorizontal', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'SplitHorizontal', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={14} viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M15 11C15 12.1046 14.1046 13 13 13L3 13C1.89543 13 1 12.1046 1 11L1 3C1 1.89543 1.89543 1 3 1L13 1C14.1046 1 15 1.89543 15 3L15 11ZM13 6.5L13 3L3 3L3 6.5L13 6.5ZM3 7.5L3 11L13 11L13 7.5L3 7.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M15 11C15 12.1046 14.1046 13 13 13L3 13C1.89543 13 1 12.1046 1 11L1 3C1 1.89543 1.89543 1 3 1L13 1C14.1046 1 15 1.89543 15 3L15 11ZM13 6.5L13 3L3 3L3 6.5L13 6.5ZM3 7.5L3 11L13 11L13 7.5L3 7.5Z" fill={'currentColor'} /></svg>;
 };
+
 SplitHorizontal.displayName = 'SplitHorizontal';
 SplitHorizontal.isGlyph = true;
+
 export default SplitHorizontal;
\ No newline at end of file
diff --git a/packages/icon/src/generated/SplitVertical.tsx b/packages/icon/src/generated/SplitVertical.tsx
index 160dbe8760..1c34991a97 100644
--- a/packages/icon/src/generated/SplitVertical.tsx
+++ b/packages/icon/src/generated/SplitVertical.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 23a43817b3ef9eeb03f289536ea833c4
+* @checksum b765029b22fd724c194d4cd5909fb705
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SplitVerticalProps extends LGGlyph.ComponentProps {}
+
 const SplitVertical = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SplitVerticalProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'SplitVertical', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'SplitVertical', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={14} viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M13 1C14.1046 1 15 1.89543 15 3V11C15 12.1046 14.1046 13 13 13H3C1.89543 13 1 12.1046 1 11V3C1 1.89543 1.89543 1 3 1H13ZM7.5 3H3V11H7.5V3ZM8.5 11H13V3H8.5V11Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13 1C14.1046 1 15 1.89543 15 3V11C15 12.1046 14.1046 13 13 13H3C1.89543 13 1 12.1046 1 11V3C1 1.89543 1.89543 1 3 1H13ZM7.5 3H3V11H7.5V3ZM8.5 11H13V3H8.5V11Z" fill={'currentColor'} /></svg>;
 };
+
 SplitVertical.displayName = 'SplitVertical';
 SplitVertical.isGlyph = true;
+
 export default SplitVertical;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Stitch.tsx b/packages/icon/src/generated/Stitch.tsx
index 73dddd80c5..45e6c822ec 100644
--- a/packages/icon/src/generated/Stitch.tsx
+++ b/packages/icon/src/generated/Stitch.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4f795369a06c595141210f603e63a331
+* @checksum 0da8e953dba6cfb827a229b40513ec18
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface StitchProps extends LGGlyph.ComponentProps {}
+
 const Stitch = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: StitchProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Stitch', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Stitch', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" {...props}><g id="Stitch-Copy" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd"><path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4 L14,2 L2,2 L2,4 L14,4 Z M14,14 L14,5 L2,5 L2,14 L14,14 Z M8,6 L8,13 L6,13 L6,6 L8,6 Z M13,6 L13,10 L9,10 L9,6 L13,6 Z M5,8 L5,13 L3,13 L3,8 L5,8 Z M13,11 L13,13 L9,13 L9,11 L13,11 Z" id="\uE311" fill="currentColor" /></g></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><g id="Stitch-Copy" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd"><path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4 L14,2 L2,2 L2,4 L14,4 Z M14,14 L14,5 L2,5 L2,14 L14,14 Z M8,6 L8,13 L6,13 L6,6 L8,6 Z M13,6 L13,10 L9,10 L9,6 L13,6 Z M5,8 L5,13 L3,13 L3,8 L5,8 Z M13,11 L13,13 L9,13 L9,11 L13,11 Z" id="\uE311" fill={'currentColor'} /></g></svg>;
 };
+
 Stitch.displayName = 'Stitch';
 Stitch.isGlyph = true;
+
 export default Stitch;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Stop.tsx b/packages/icon/src/generated/Stop.tsx
index 53d3b96293..bf225c63a8 100644
--- a/packages/icon/src/generated/Stop.tsx
+++ b/packages/icon/src/generated/Stop.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 02824b2c1413b47ba291fb039342b16e
+* @checksum 207f1116ab19327e434e024dc76546ff
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface StopProps extends LGGlyph.ComponentProps {}
+
 const Stop = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: StopProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Stop', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Stop', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><rect x={3} y={3} width={10} height={10} rx={1} fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><rect x={3} y={3} width={10} height={10} rx={1} fill={'currentColor'} /></svg>;
 };
+
 Stop.displayName = 'Stop';
 Stop.isGlyph = true;
+
 export default Stop;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Streaming.tsx b/packages/icon/src/generated/Streaming.tsx
index 843b6adf11..d0f1e7b6fc 100644
--- a/packages/icon/src/generated/Streaming.tsx
+++ b/packages/icon/src/generated/Streaming.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cecb0b1fef059ae78d0925fc0d134682
+* @checksum 228d68eff48e031805f3e67bdadb0a28
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface StreamingProps extends LGGlyph.ComponentProps {}
+
 const Streaming = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: StreamingProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Streaming', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Streaming', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2.5 10.4141C2.8922 10.7317 3.38069 10.9884 3.90527 11.1934C4.42946 11.3981 5.01023 11.5551 5.60449 11.6719L6.6709 13.0303L6.74902 13.1211C7.10522 13.5042 7.61387 13.6279 8.06934 13.5117C8.17594 13.8813 8.40111 14.188 8.69043 14.4111C8.46086 14.4244 8.23023 14.4336 8 14.4336C5.28789 14.4336 2.5 13.5162 2.5 11.5811C2.5 11.4924 2.50071 11.4047 2.50195 11.3184C2.50071 11.2874 2.5 11.2559 2.5 11.2246V10.4141Z" fill="currentColor" /><path d="M2.5 6.74707C2.8922 7.0647 3.38069 7.3224 3.90527 7.52734C4.65821 7.82143 5.5268 8.02238 6.38672 8.13574L5.30371 9.5166L5.23242 9.61621C5.04168 9.90844 4.96849 10.2571 5.0127 10.5928C4.743 10.5179 4.48251 10.4353 4.23828 10.3398C3.68283 10.1228 3.23472 9.86299 2.93262 9.5752C2.636 9.29254 2.5 9.00426 2.5 8.7041V6.74707Z" fill="currentColor" /><path d="M13.5 8.7041C13.5 9.00426 13.364 9.29254 13.0674 9.5752C13.011 9.6289 12.9481 9.67979 12.8818 9.73145C12.6172 9.02397 11.9307 8.52864 11.1406 8.52832H9.10352C9.09331 8.41419 9.06716 8.30489 9.03223 8.2002C10.0743 8.11047 11.1714 7.888 12.0947 7.52734C12.6193 7.3224 13.1078 7.0647 13.5 6.74707V8.7041Z" fill="currentColor" /><path d="M8 1.59961C10.7121 1.59961 13.5 2.51696 13.5 4.45215C13.5 4.54147 13.4993 4.6287 13.498 4.71387C13.4993 4.74514 13.5 4.77701 13.5 4.80859V5.03711C13.5 5.33734 13.3642 5.62645 13.0674 5.90918C12.7653 6.19692 12.3171 6.45587 11.7617 6.67285C10.7051 7.08564 9.35706 7.30393 8.17676 7.32422C7.91253 7.23284 7.62448 7.22642 7.35449 7.30664C6.29674 7.24352 5.15722 7.03186 4.23828 6.67285C3.68294 6.45587 3.2347 6.19692 2.93262 5.90918C2.63584 5.62645 2.5 5.33734 2.5 5.03711V4.80859C2.5 4.77334 2.50038 4.73799 2.50195 4.70312C2.50037 4.6216 2.5 4.53771 2.5 4.45215C2.5 2.51696 5.28789 1.59961 8 1.59961Z" fill="currentColor" /><path d="M9.85893 12.2378H12.8902V11.3819C12.8902 11.029 13.3175 10.8656 13.5427 11.1324L14.9093 12.7505C15.0302 12.8937 15.0302 13.1063 14.9093 13.2495L13.5427 14.8676C13.3175 15.1344 12.8902 14.971 12.8902 14.6181V13.8125H9.85893C9.38455 13.8125 9 13.46 9 13.0252C9 12.5903 9.38455 12.2378 9.85893 12.2378Z" fill="currentColor" /><path d="M11.1411 11.2229H8.10982V12.1442C8.10982 12.524 7.68252 12.6998 7.45726 12.4127L6.09071 10.6711C5.96976 10.517 5.96976 10.2882 6.09071 10.1341L7.45726 8.39247C7.68252 8.10539 8.10982 8.28122 8.10982 8.661V9.5281H11.1411C11.6154 9.5281 12 9.90751 12 10.3755C12 10.8435 11.6154 11.2229 11.1411 11.2229Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.5 10.4141C2.8922 10.7317 3.38069 10.9884 3.90527 11.1934C4.42946 11.3981 5.01023 11.5551 5.60449 11.6719L6.6709 13.0303L6.74902 13.1211C7.10522 13.5042 7.61387 13.6279 8.06934 13.5117C8.17594 13.8813 8.40111 14.188 8.69043 14.4111C8.46086 14.4244 8.23023 14.4336 8 14.4336C5.28789 14.4336 2.5 13.5162 2.5 11.5811C2.5 11.4924 2.50071 11.4047 2.50195 11.3184C2.50071 11.2874 2.5 11.2559 2.5 11.2246V10.4141Z" fill={'currentColor'} /><path d="M2.5 6.74707C2.8922 7.0647 3.38069 7.3224 3.90527 7.52734C4.65821 7.82143 5.5268 8.02238 6.38672 8.13574L5.30371 9.5166L5.23242 9.61621C5.04168 9.90844 4.96849 10.2571 5.0127 10.5928C4.743 10.5179 4.48251 10.4353 4.23828 10.3398C3.68283 10.1228 3.23472 9.86299 2.93262 9.5752C2.636 9.29254 2.5 9.00426 2.5 8.7041V6.74707Z" fill={'currentColor'} /><path d="M13.5 8.7041C13.5 9.00426 13.364 9.29254 13.0674 9.5752C13.011 9.6289 12.9481 9.67979 12.8818 9.73145C12.6172 9.02397 11.9307 8.52864 11.1406 8.52832H9.10352C9.09331 8.41419 9.06716 8.30489 9.03223 8.2002C10.0743 8.11047 11.1714 7.888 12.0947 7.52734C12.6193 7.3224 13.1078 7.0647 13.5 6.74707V8.7041Z" fill={'currentColor'} /><path d="M8 1.59961C10.7121 1.59961 13.5 2.51696 13.5 4.45215C13.5 4.54147 13.4993 4.6287 13.498 4.71387C13.4993 4.74514 13.5 4.77701 13.5 4.80859V5.03711C13.5 5.33734 13.3642 5.62645 13.0674 5.90918C12.7653 6.19692 12.3171 6.45587 11.7617 6.67285C10.7051 7.08564 9.35706 7.30393 8.17676 7.32422C7.91253 7.23284 7.62448 7.22642 7.35449 7.30664C6.29674 7.24352 5.15722 7.03186 4.23828 6.67285C3.68294 6.45587 3.2347 6.19692 2.93262 5.90918C2.63584 5.62645 2.5 5.33734 2.5 5.03711V4.80859C2.5 4.77334 2.50038 4.73799 2.50195 4.70312C2.50037 4.6216 2.5 4.53771 2.5 4.45215C2.5 2.51696 5.28789 1.59961 8 1.59961Z" fill={'currentColor'} /><path d="M9.85893 12.2378H12.8902V11.3819C12.8902 11.029 13.3175 10.8656 13.5427 11.1324L14.9093 12.7505C15.0302 12.8937 15.0302 13.1063 14.9093 13.2495L13.5427 14.8676C13.3175 15.1344 12.8902 14.971 12.8902 14.6181V13.8125H9.85893C9.38455 13.8125 9 13.46 9 13.0252C9 12.5903 9.38455 12.2378 9.85893 12.2378Z" fill={'currentColor'} /><path d="M11.1411 11.2229H8.10982V12.1442C8.10982 12.524 7.68252 12.6998 7.45726 12.4127L6.09071 10.6711C5.96976 10.517 5.96976 10.2882 6.09071 10.1341L7.45726 8.39247C7.68252 8.10539 8.10982 8.28122 8.10982 8.661V9.5281H11.1411C11.6154 9.5281 12 9.90751 12 10.3755C12 10.8435 11.6154 11.2229 11.1411 11.2229Z" fill={'currentColor'} /></svg>;
 };
+
 Streaming.displayName = 'Streaming';
 Streaming.isGlyph = true;
+
 export default Streaming;
\ No newline at end of file
diff --git a/packages/icon/src/generated/String.tsx b/packages/icon/src/generated/String.tsx
index 7266117f52..9b00f86fcb 100644
--- a/packages/icon/src/generated/String.tsx
+++ b/packages/icon/src/generated/String.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3c8da6506796ce168a23d28f387d8764
+* @checksum 59f803ce24c775cc778ab61167206e81
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface StringProps extends LGGlyph.ComponentProps {}
+
 const String = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: StringProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'String', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'String', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M10.6897 14H5.31034L5.15987 13.8629V13.1086L5.31034 12.9714H5.91223C6.2884 12.9714 6.66458 12.6286 6.66458 12.2857V3.5H5.76176C3.7116 3.5 3.22257 4.22857 3.09091 5.32571L2.94044 5.46286H2.11285L2 5.32571L2.28213 2.13714L2.4326 2H13.5674L13.7179 2.13714L14 5.32571L13.8871 5.46286H13.0596L12.9091 5.32571C12.7774 4.22857 12.2884 3.5 10.2382 3.5H9.33542V12.2857C9.33542 12.6286 9.7116 12.9714 10.0878 12.9714H10.6897L10.8401 13.1086V13.8629L10.6897 14Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M10.6897 14H5.31034L5.15987 13.8629V13.1086L5.31034 12.9714H5.91223C6.2884 12.9714 6.66458 12.6286 6.66458 12.2857V3.5H5.76176C3.7116 3.5 3.22257 4.22857 3.09091 5.32571L2.94044 5.46286H2.11285L2 5.32571L2.28213 2.13714L2.4326 2H13.5674L13.7179 2.13714L14 5.32571L13.8871 5.46286H13.0596L12.9091 5.32571C12.7774 4.22857 12.2884 3.5 10.2382 3.5H9.33542V12.2857C9.33542 12.6286 9.7116 12.9714 10.0878 12.9714H10.6897L10.8401 13.1086V13.8629L10.6897 14Z" fill={'currentColor'} /></svg>;
 };
+
 String.displayName = 'String';
 String.isGlyph = true;
+
 export default String;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Sun.tsx b/packages/icon/src/generated/Sun.tsx
index a98335ac1b..db5e22dbb7 100644
--- a/packages/icon/src/generated/Sun.tsx
+++ b/packages/icon/src/generated/Sun.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3b93aec0df1efae499d954276194c9ff
+* @checksum 34c4c8c0ac270660b7a2c13fbaa6b390
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SunProps extends LGGlyph.ComponentProps {}
+
 const Sun = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SunProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Sun', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Sun', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M12.24 10.83C11.85 10.44 11.22 10.44 10.83 10.83C10.44 11.22 10.44 11.85 10.83 12.24L11.54 12.95C11.93 13.34 12.56 13.34 12.95 12.95C13.34 12.56 13.34 11.93 12.95 11.54L12.24 10.83Z" fill="currentColor" /><path d="M8 12C7.45 12 7 12.45 7 13V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V13C9 12.45 8.55 12 8 12Z" fill="currentColor" /><path d="M8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" fill="currentColor" /><path d="M14 7H13C12.45 7 12 7.45 12 8C12 8.55 12.45 9 13 9H14C14.55 9 15 8.55 15 8C15 7.45 14.55 7 14 7Z" fill="currentColor" /><path d="M3.76 10.83L3.05 11.54C2.66 11.93 2.66 12.56 3.05 12.95C3.44 13.34 4.07 13.34 4.46 12.95L5.17 12.24C5.56 11.85 5.56 11.22 5.17 10.83C4.78 10.44 4.15 10.44 3.76 10.83Z" fill="currentColor" /><path d="M8 4C8.55 4 9 3.55 9 3V2C9 1.45 8.55 1 8 1C7.45 1 7 1.45 7 2V3C7 3.55 7.45 4 8 4Z" fill="currentColor" /><path d="M3.76 5.17C4.15 5.56 4.78 5.56 5.17 5.17C5.56 4.78 5.56 4.15 5.17 3.76L4.46 3.05C4.07 2.66 3.44 2.66 3.05 3.05C2.66 3.44 2.66 4.07 3.05 4.46L3.76 5.17Z" fill="currentColor" /><path d="M4 8C4 7.45 3.55 7 3 7H2C1.45 7 1 7.45 1 8C1 8.55 1.45 9 2 9H3C3.55 9 4 8.55 4 8Z" fill="currentColor" /><path d="M12.24 5.17L12.95 4.46C13.34 4.07 13.34 3.44 12.95 3.05C12.56 2.66 11.93 2.66 11.54 3.05L10.83 3.76C10.44 4.15 10.44 4.78 10.83 5.17C11.22 5.56 11.85 5.56 12.24 5.17Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M12.24 10.83C11.85 10.44 11.22 10.44 10.83 10.83C10.44 11.22 10.44 11.85 10.83 12.24L11.54 12.95C11.93 13.34 12.56 13.34 12.95 12.95C13.34 12.56 13.34 11.93 12.95 11.54L12.24 10.83Z" fill={'currentColor'} /><path d="M8 12C7.45 12 7 12.45 7 13V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V13C9 12.45 8.55 12 8 12Z" fill={'currentColor'} /><path d="M8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" fill={'currentColor'} /><path d="M14 7H13C12.45 7 12 7.45 12 8C12 8.55 12.45 9 13 9H14C14.55 9 15 8.55 15 8C15 7.45 14.55 7 14 7Z" fill={'currentColor'} /><path d="M3.76 10.83L3.05 11.54C2.66 11.93 2.66 12.56 3.05 12.95C3.44 13.34 4.07 13.34 4.46 12.95L5.17 12.24C5.56 11.85 5.56 11.22 5.17 10.83C4.78 10.44 4.15 10.44 3.76 10.83Z" fill={'currentColor'} /><path d="M8 4C8.55 4 9 3.55 9 3V2C9 1.45 8.55 1 8 1C7.45 1 7 1.45 7 2V3C7 3.55 7.45 4 8 4Z" fill={'currentColor'} /><path d="M3.76 5.17C4.15 5.56 4.78 5.56 5.17 5.17C5.56 4.78 5.56 4.15 5.17 3.76L4.46 3.05C4.07 2.66 3.44 2.66 3.05 3.05C2.66 3.44 2.66 4.07 3.05 4.46L3.76 5.17Z" fill={'currentColor'} /><path d="M4 8C4 7.45 3.55 7 3 7H2C1.45 7 1 7.45 1 8C1 8.55 1.45 9 2 9H3C3.55 9 4 8.55 4 8Z" fill={'currentColor'} /><path d="M12.24 5.17L12.95 4.46C13.34 4.07 13.34 3.44 12.95 3.05C12.56 2.66 11.93 2.66 11.54 3.05L10.83 3.76C10.44 4.15 10.44 4.78 10.83 5.17C11.22 5.56 11.85 5.56 12.24 5.17Z" fill={'currentColor'} /></svg>;
 };
+
 Sun.displayName = 'Sun';
 Sun.isGlyph = true;
+
 export default Sun;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Support.tsx b/packages/icon/src/generated/Support.tsx
index 4be9bb180c..614b857d64 100644
--- a/packages/icon/src/generated/Support.tsx
+++ b/packages/icon/src/generated/Support.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 48724d477e4bdb442f5157382ad8ccf2
+* @checksum c5af6115b646f1a83a4c8e53d7be2eaf
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SupportProps extends LGGlyph.ComponentProps {}
+
 const Support = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SupportProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Support', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Support', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M5 7C5 5.34315 6.34315 4 8 4C9.65685 4 11 5.34315 11 7V9.5C11 11.0106 10.043 12.2977 8.70223 12.7881C8.52167 12.6099 8.27367 12.5 8 12.5C7.44772 12.5 7 12.9477 7 13.5C7 14.0523 7.44772 14.5 8 14.5C8.464 14.5 8.85419 14.184 8.96708 13.7554C10.2714 13.3059 11.3042 12.2736 11.7545 10.9697C11.8331 10.9895 11.9153 11 12 11H12.5C13.8807 11 15 9.88071 15 8.5C15 7.25772 14.0939 6.22707 12.9065 6.03289C12.4561 3.73428 10.4306 2 8 2C5.56944 2 3.54394 3.73428 3.09346 6.03289C1.9061 6.22707 1 7.25772 1 8.5C1 9.88071 2.11929 11 3.5 11H4C4.55228 11 5 10.5523 5 10V7Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M5 7C5 5.34315 6.34315 4 8 4C9.65685 4 11 5.34315 11 7V9.5C11 11.0106 10.043 12.2977 8.70223 12.7881C8.52167 12.6099 8.27367 12.5 8 12.5C7.44772 12.5 7 12.9477 7 13.5C7 14.0523 7.44772 14.5 8 14.5C8.464 14.5 8.85419 14.184 8.96708 13.7554C10.2714 13.3059 11.3042 12.2736 11.7545 10.9697C11.8331 10.9895 11.9153 11 12 11H12.5C13.8807 11 15 9.88071 15 8.5C15 7.25772 14.0939 6.22707 12.9065 6.03289C12.4561 3.73428 10.4306 2 8 2C5.56944 2 3.54394 3.73428 3.09346 6.03289C1.9061 6.22707 1 7.25772 1 8.5C1 9.88071 2.11929 11 3.5 11H4C4.55228 11 5 10.5523 5 10V7Z" fill={'currentColor'} /></svg>;
 };
+
 Support.displayName = 'Support';
 Support.isGlyph = true;
+
 export default Support;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Sweep.tsx b/packages/icon/src/generated/Sweep.tsx
index f17068f86c..6a3d5653f9 100644
--- a/packages/icon/src/generated/Sweep.tsx
+++ b/packages/icon/src/generated/Sweep.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5b174776545eac61bde7b82bae7118e3
+* @checksum 65bb7db7cc604f2c8d3978981ba04541
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface SweepProps extends LGGlyph.ComponentProps {}
+
 const Sweep = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: SweepProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Sweep', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Sweep', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M2.99968 14.4647L4.00129 12.7336C4.29347 12.9026 4.63232 13 5 13H7V15H5C4.27129 15 3.5881 14.8051 2.99968 14.4647ZM9 15V13H11C11.3677 13 11.7065 12.9026 11.9987 12.7336L13.0003 14.4647C12.4119 14.8051 11.7287 15 11 15H9ZM15 7H13V5C13 4.63233 12.9026 4.29347 12.7336 4.00129L14.4647 2.99968C14.8051 3.5881 15 4.27129 15 5V7ZM7 1H5C4.27129 1 3.5881 1.19486 2.99968 1.53531L4.00129 3.26643C4.29347 3.09738 4.63233 3 5 3H7V1ZM1 9H3V11C3 11.3677 3.09738 11.7065 3.26643 11.9987L1.53531 13.0003C1.19486 12.4119 1 11.7287 1 11V9ZM1 7H3V5C3 4.63232 3.09738 4.29347 3.26643 4.00129L1.53531 2.99968C1.19486 3.5881 1 4.27129 1 5V7ZM9 1V3H11C11.3677 3 11.7065 3.09738 11.9987 3.26643L13.0003 1.53531C12.4119 1.19486 11.7287 1 11 1H9ZM15 9H13V11C13 11.3677 12.9026 11.7065 12.7336 11.9987L14.4647 13.0003C14.8051 12.4119 15 11.7287 15 11V9Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M2.99968 14.4647L4.00129 12.7336C4.29347 12.9026 4.63232 13 5 13H7V15H5C4.27129 15 3.5881 14.8051 2.99968 14.4647ZM9 15V13H11C11.3677 13 11.7065 12.9026 11.9987 12.7336L13.0003 14.4647C12.4119 14.8051 11.7287 15 11 15H9ZM15 7H13V5C13 4.63233 12.9026 4.29347 12.7336 4.00129L14.4647 2.99968C14.8051 3.5881 15 4.27129 15 5V7ZM7 1H5C4.27129 1 3.5881 1.19486 2.99968 1.53531L4.00129 3.26643C4.29347 3.09738 4.63233 3 5 3H7V1ZM1 9H3V11C3 11.3677 3.09738 11.7065 3.26643 11.9987L1.53531 13.0003C1.19486 12.4119 1 11.7287 1 11V9ZM1 7H3V5C3 4.63232 3.09738 4.29347 3.26643 4.00129L1.53531 2.99968C1.19486 3.5881 1 4.27129 1 5V7ZM9 1V3H11C11.3677 3 11.7065 3.09738 11.9987 3.26643L13.0003 1.53531C12.4119 1.19486 11.7287 1 11 1H9ZM15 9H13V11C13 11.3677 12.9026 11.7065 12.7336 11.9987L14.4647 13.0003C14.8051 12.4119 15 11.7287 15 11V9Z" fill={'currentColor'} /></svg>;
 };
+
 Sweep.displayName = 'Sweep';
 Sweep.isGlyph = true;
+
 export default Sweep;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Table.tsx b/packages/icon/src/generated/Table.tsx
index 649ed31d5f..8ffab868ed 100644
--- a/packages/icon/src/generated/Table.tsx
+++ b/packages/icon/src/generated/Table.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b4b9384b49c89a815def3b92cb3cb073
+* @checksum 0160de820c7c58f776c5047aa35a1d21
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface TableProps extends LGGlyph.ComponentProps {}
+
 const Table = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: TableProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Table', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Table', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M1 3.25C1 2.55964 1.55964 2 2.25 2H13.75C14.4404 2 15 2.55964 15 3.25V12.75C15 13.4404 14.4404 14 13.75 14H2.25C1.55964 14 1 13.4404 1 12.75V3.25ZM3 7.37V4H7.37V7.37H3ZM3 8.62V12H7.37V8.62H3ZM8.62 12H13V8.62H8.62V12ZM13 7.37V4H8.62V7.37H13Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 3.25C1 2.55964 1.55964 2 2.25 2H13.75C14.4404 2 15 2.55964 15 3.25V12.75C15 13.4404 14.4404 14 13.75 14H2.25C1.55964 14 1 13.4404 1 12.75V3.25ZM3 7.37V4H7.37V7.37H3ZM3 8.62V12H7.37V8.62H3ZM8.62 12H13V8.62H8.62V12ZM13 7.37V4H8.62V7.37H13Z" fill={'currentColor'} /></svg>;
 };
+
 Table.displayName = 'Table';
 Table.isGlyph = true;
+
 export default Table;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Tag.tsx b/packages/icon/src/generated/Tag.tsx
index d77626b386..10959a1c1b 100644
--- a/packages/icon/src/generated/Tag.tsx
+++ b/packages/icon/src/generated/Tag.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5cd33c32bd2b3617c7f6ec870e968975
+* @checksum 1c3d5527444a51d8e2b0c9b2a4218149
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface TagProps extends LGGlyph.ComponentProps {}
+
 const Tag = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: TagProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Tag', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Tag', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M9.70711 14.2929L14.2929 9.70711C14.6834 9.31658 14.6834 8.68342 14.2929 8.29289L8.29289 2.29289C8.10536 2.10536 7.851 2 7.58579 2H3C2.44772 2 2 2.44772 2 3V7.58579C2 7.851 2.10536 8.10536 2.29289 8.29289L8.29289 14.2929C8.68342 14.6834 9.31658 14.6834 9.70711 14.2929ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M9.70711 14.2929L14.2929 9.70711C14.6834 9.31658 14.6834 8.68342 14.2929 8.29289L8.29289 2.29289C8.10536 2.10536 7.851 2 7.58579 2H3C2.44772 2 2 2.44772 2 3V7.58579C2 7.851 2.10536 8.10536 2.29289 8.29289L8.29289 14.2929C8.68342 14.6834 9.31658 14.6834 9.70711 14.2929ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6Z" fill={'currentColor'} /></svg>;
 };
+
 Tag.displayName = 'Tag';
 Tag.isGlyph = true;
+
 export default Tag;
\ No newline at end of file
diff --git a/packages/icon/src/generated/TemporaryTable.tsx b/packages/icon/src/generated/TemporaryTable.tsx
index 4d67c22819..6b2b3983d9 100644
--- a/packages/icon/src/generated/TemporaryTable.tsx
+++ b/packages/icon/src/generated/TemporaryTable.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 165f652d98c2d6a4c0b7bdbadf0a7e1e
+* @checksum 2ac6468188f8e3f96e5a0df76126f519
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface TemporaryTableProps extends LGGlyph.ComponentProps {}
+
 const TemporaryTable = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: TemporaryTableProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'TemporaryTable', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'TemporaryTable', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M2.25 2C1.55965 2 1 2.55963 1 3.25V12.75C1 13.4404 1.55965 14 2.25 14H8.62012L8.62 8.62L15 8.62012V3.25C15 2.55963 14.4404 2 13.75 2H2.25ZM3 4V7.37H7.37V4H3ZM3 12V8.62H7.37V12H3ZM13 4V7.37H8.62V4H13Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M13 16C14.6569 16 16 14.6569 16 13C16 11.3431 14.6569 10 13 10C11.3431 10 10 11.3431 10 13C10 14.6569 11.3431 16 13 16ZM12.625 11.375C12.625 11.1679 12.7929 11 13 11C13.2071 11 13.375 11.1679 13.375 11.375V12.9548L14.2469 13.7178C14.4028 13.8542 14.4186 14.0911 14.2822 14.2469C14.1458 14.4028 13.9089 14.4186 13.7531 14.2822L12.7553 13.4092C12.7507 13.4052 12.7462 13.4011 12.7418 13.397C12.7069 13.3639 12.6798 13.3256 12.6604 13.2843C12.6377 13.236 12.625 13.182 12.625 13.125V11.375Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M2.25 2C1.55965 2 1 2.55963 1 3.25V12.75C1 13.4404 1.55965 14 2.25 14H8.62012L8.62 8.62L15 8.62012V3.25C15 2.55963 14.4404 2 13.75 2H2.25ZM3 4V7.37H7.37V4H3ZM3 12V8.62H7.37V12H3ZM13 4V7.37H8.62V4H13Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M13 16C14.6569 16 16 14.6569 16 13C16 11.3431 14.6569 10 13 10C11.3431 10 10 11.3431 10 13C10 14.6569 11.3431 16 13 16ZM12.625 11.375C12.625 11.1679 12.7929 11 13 11C13.2071 11 13.375 11.1679 13.375 11.375V12.9548L14.2469 13.7178C14.4028 13.8542 14.4186 14.0911 14.2822 14.2469C14.1458 14.4028 13.9089 14.4186 13.7531 14.2822L12.7553 13.4092C12.7507 13.4052 12.7462 13.4011 12.7418 13.397C12.7069 13.3639 12.6798 13.3256 12.6604 13.2843C12.6377 13.236 12.625 13.182 12.625 13.125V11.375Z" fill={'currentColor'} /></svg>;
 };
+
 TemporaryTable.displayName = 'TemporaryTable';
 TemporaryTable.isGlyph = true;
+
 export default TemporaryTable;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ThumbsDown.tsx b/packages/icon/src/generated/ThumbsDown.tsx
index febf441e43..b5a162814b 100644
--- a/packages/icon/src/generated/ThumbsDown.tsx
+++ b/packages/icon/src/generated/ThumbsDown.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 71f3824af79a2a53ea638b2feb5c61e7
+* @checksum ac56b0d448135214f43a036d4920ca31
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ThumbsDownProps extends LGGlyph.ComponentProps {}
+
 const ThumbsDown = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ThumbsDownProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ThumbsDown', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ThumbsDown', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8.01852 15C8.53023 15 8.99812 14.7199 9.22744 14.2764L11.728 9.43945C11.7542 9.38879 11.7773 9.33683 11.7972 9.28386C11.8277 9.28652 11.8584 9.28788 11.8896 9.28788L13.9843 9.28788C14.5453 9.28788 15 8.84694 15 8.30303L15 3.18182C15 2.6379 14.5453 2 13.9844 2L11.8896 2C11.6144 2 11 2 11 2C11 2 10.3639 2 9.85827 2L3.99311 2C3.02273 2 2.18787 2.66552 2.00017 3.5887L1.03904 8.31597C0.791531 9.53331 1.7524 10.6667 3.03198 10.6667L5.31958 10.6667L5.31958 12.3829C5.31958 13.8283 6.52794 15 8.01852 15ZM9.85827 8.66091L7.65371 12.9252C7.47137 12.8096 7.35088 12.6099 7.35088 12.3829L7.35088 10.0758C7.35088 9.31427 6.71427 8.69697 5.92897 8.69697L3.64387 8.69697C3.32769 8.69697 3.09089 8.40718 3.15389 8.09735L3.9117 4.37008C3.95907 4.1371 4.16394 3.9697 4.40168 3.9697L9.85827 3.9697L9.85827 8.66091Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.01852 15C8.53023 15 8.99812 14.7199 9.22744 14.2764L11.728 9.43945C11.7542 9.38879 11.7773 9.33683 11.7972 9.28386C11.8277 9.28652 11.8584 9.28788 11.8896 9.28788L13.9843 9.28788C14.5453 9.28788 15 8.84694 15 8.30303L15 3.18182C15 2.6379 14.5453 2 13.9844 2L11.8896 2C11.6144 2 11 2 11 2C11 2 10.3639 2 9.85827 2L3.99311 2C3.02273 2 2.18787 2.66552 2.00017 3.5887L1.03904 8.31597C0.791531 9.53331 1.7524 10.6667 3.03198 10.6667L5.31958 10.6667L5.31958 12.3829C5.31958 13.8283 6.52794 15 8.01852 15ZM9.85827 8.66091L7.65371 12.9252C7.47137 12.8096 7.35088 12.6099 7.35088 12.3829L7.35088 10.0758C7.35088 9.31427 6.71427 8.69697 5.92897 8.69697L3.64387 8.69697C3.32769 8.69697 3.09089 8.40718 3.15389 8.09735L3.9117 4.37008C3.95907 4.1371 4.16394 3.9697 4.40168 3.9697L9.85827 3.9697L9.85827 8.66091Z" fill={'currentColor'} /></svg>;
 };
+
 ThumbsDown.displayName = 'ThumbsDown';
 ThumbsDown.isGlyph = true;
+
 export default ThumbsDown;
\ No newline at end of file
diff --git a/packages/icon/src/generated/ThumbsUp.tsx b/packages/icon/src/generated/ThumbsUp.tsx
index c9649a52ac..7ddf5a1181 100644
--- a/packages/icon/src/generated/ThumbsUp.tsx
+++ b/packages/icon/src/generated/ThumbsUp.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4143793eb7004a29fdeef4eaa9a3018a
+* @checksum 83abf62f40f0b98a640136e8002ad402
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ThumbsUpProps extends LGGlyph.ComponentProps {}
+
 const ThumbsUp = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ThumbsUpProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'ThumbsUp', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'ThumbsUp', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M7.98148 1C7.46977 1 7.00188 1.28007 6.77256 1.72365L4.27198 6.56054C4.24579 6.61121 4.22269 6.66317 4.20275 6.71614C4.17234 6.71348 4.14155 6.71212 4.11043 6.71212H2.01565C1.45472 6.71212 1 7.15306 1 7.69697V12.8182C1 13.3621 1.45472 14 2.01565 14H4.11043C4.38564 14 5 14 5 14C5 14 5.63614 14 6.14173 14H12.0069C12.9773 14 13.8121 13.3345 13.9998 12.4113L14.961 7.68402C15.2085 6.46669 14.2476 5.33333 12.968 5.33333H10.6804V3.61709C10.6804 2.17171 9.47206 1 7.98148 1ZM6.14173 7.33909L8.34629 3.0748C8.52863 3.19038 8.64912 3.39009 8.64912 3.61709V5.92424C8.64912 6.68572 9.28573 7.30303 10.071 7.30303H12.3561C12.6723 7.30303 12.9091 7.59282 12.8461 7.90265L12.0883 11.6299C12.0409 11.8629 11.8361 12.0303 11.5983 12.0303L6.14173 12.0303V7.33909Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7.98148 1C7.46977 1 7.00188 1.28007 6.77256 1.72365L4.27198 6.56054C4.24579 6.61121 4.22269 6.66317 4.20275 6.71614C4.17234 6.71348 4.14155 6.71212 4.11043 6.71212H2.01565C1.45472 6.71212 1 7.15306 1 7.69697V12.8182C1 13.3621 1.45472 14 2.01565 14H4.11043C4.38564 14 5 14 5 14C5 14 5.63614 14 6.14173 14H12.0069C12.9773 14 13.8121 13.3345 13.9998 12.4113L14.961 7.68402C15.2085 6.46669 14.2476 5.33333 12.968 5.33333H10.6804V3.61709C10.6804 2.17171 9.47206 1 7.98148 1ZM6.14173 7.33909L8.34629 3.0748C8.52863 3.19038 8.64912 3.39009 8.64912 3.61709V5.92424C8.64912 6.68572 9.28573 7.30303 10.071 7.30303H12.3561C12.6723 7.30303 12.9091 7.59282 12.8461 7.90265L12.0883 11.6299C12.0409 11.8629 11.8361 12.0303 11.5983 12.0303L6.14173 12.0303V7.33909Z" fill={'currentColor'} /></svg>;
 };
+
 ThumbsUp.displayName = 'ThumbsUp';
 ThumbsUp.isGlyph = true;
+
 export default ThumbsUp;
\ No newline at end of file
diff --git a/packages/icon/src/generated/TimeSeries.tsx b/packages/icon/src/generated/TimeSeries.tsx
index e45f831b2a..6ea92dfe2d 100644
--- a/packages/icon/src/generated/TimeSeries.tsx
+++ b/packages/icon/src/generated/TimeSeries.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e6fc7034b28a94dc36bff3b57bdebbcd
+* @checksum a7e0cd04102076735ce6e87691bd6d52
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface TimeSeriesProps extends LGGlyph.ComponentProps {}
+
 const TimeSeries = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: TimeSeriesProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'TimeSeries', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'TimeSeries', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M7.02336 1.51761C7.53556 1.54248 7.97993 1.88141 8.14209 2.37087L9.38008 6.10758L10.9391 4.01615C11.1552 3.72626 11.4857 3.54499 11.8449 3.5193C12.2042 3.49361 12.5568 3.62604 12.8115 3.88227L14.7089 5.79128C15.097 6.1818 15.097 6.81497 14.7089 7.20549L14.3325 7.55905C13.9444 7.94957 13.3151 7.94957 12.9269 7.55905L12.0674 6.66916L9.94519 9.51615C9.66793 9.8881 9.2084 10.0745 8.75227 10C8.29614 9.92554 7.91877 9.60251 7.77265 9.16144L6.79779 6.21895L6.11095 7.77383C5.91154 8.22524 5.46662 8.51615 4.97564 8.51615H1.99391C1.44499 8.51615 1 8.06844 1 7.51615V7.01615C1 6.46387 1.44499 6.01615 1.99391 6.01615H4.16825L5.82815 2.25848C6.03641 1.78702 6.51117 1.49273 7.02336 1.51761Z" fill="currentColor" /><path d="M14 12C14.5523 12 15 12.4477 15 13V13.5C15 14.0523 14.5523 14.5 14 14.5H2C1.44772 14.5 1 14.0523 1 13.5V13C1 12.4477 1.44772 12 2 12H14Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M7.02336 1.51761C7.53556 1.54248 7.97993 1.88141 8.14209 2.37087L9.38008 6.10758L10.9391 4.01615C11.1552 3.72626 11.4857 3.54499 11.8449 3.5193C12.2042 3.49361 12.5568 3.62604 12.8115 3.88227L14.7089 5.79128C15.097 6.1818 15.097 6.81497 14.7089 7.20549L14.3325 7.55905C13.9444 7.94957 13.3151 7.94957 12.9269 7.55905L12.0674 6.66916L9.94519 9.51615C9.66793 9.8881 9.2084 10.0745 8.75227 10C8.29614 9.92554 7.91877 9.60251 7.77265 9.16144L6.79779 6.21895L6.11095 7.77383C5.91154 8.22524 5.46662 8.51615 4.97564 8.51615H1.99391C1.44499 8.51615 1 8.06844 1 7.51615V7.01615C1 6.46387 1.44499 6.01615 1.99391 6.01615H4.16825L5.82815 2.25848C6.03641 1.78702 6.51117 1.49273 7.02336 1.51761Z" fill={'currentColor'} /><path d="M14 12C14.5523 12 15 12.4477 15 13V13.5C15 14.0523 14.5523 14.5 14 14.5H2C1.44772 14.5 1 14.0523 1 13.5V13C1 12.4477 1.44772 12 2 12H14Z" fill={'currentColor'} /></svg>;
 };
+
 TimeSeries.displayName = 'TimeSeries';
 TimeSeries.isGlyph = true;
+
 export default TimeSeries;
\ No newline at end of file
diff --git a/packages/icon/src/generated/TimeSeriesCollection.tsx b/packages/icon/src/generated/TimeSeriesCollection.tsx
index 169f975e52..f4afd8512d 100644
--- a/packages/icon/src/generated/TimeSeriesCollection.tsx
+++ b/packages/icon/src/generated/TimeSeriesCollection.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum badaa5f7f2f1e04267653028daf9a5d4
+* @checksum 09024a5b6da8c2a5e321877906c8ce3e
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface TimeSeriesCollectionProps extends LGGlyph.ComponentProps {}
+
 const TimeSeriesCollection = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: TimeSeriesCollectionProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'TimeSeriesCollection', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'TimeSeriesCollection', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M13.6 10.3826H15C15.6 10.3826 16 10.8816 16 11.4805C16 12.0794 15.6 12.4787 15 12.4787H14.1L12.6 14.5748C12.4 14.8742 12 15.0738 11.6 14.974C11.2 14.8742 10.9 14.5748 10.8 14.1755L10.4 12.4787L10 13.6764C9.9 13.9759 9.5 14.2753 9.1 14.2753H8C7.4 14.2753 7 13.8761 7 13.2772C7 12.6783 7.4 12.279 8 12.279H8.4L9.8 8.58591C9.9 8.18665 10.4 7.98702 10.8 7.98702C11.2 7.98702 11.6 8.38628 11.7 8.68572L12.3 11.4805L12.8 10.7818C13 10.5822 13.3 10.3826 13.6 10.3826Z" fill="currentColor" /><path d="M1.92857 1C1.41574 1 1 1.40964 1 1.91497V11.0646C1 11.57 1.41574 11.9796 1.92857 11.9796H5.84028C5.94099 11.8068 6.06518 11.6437 6.21434 11.4948C6.53603 11.1737 6.92403 10.9685 7.33247 10.8644L8.37506 8.11411C8.58323 7.43691 9.08123 7.02881 9.48162 6.81567C9.90517 6.59019 10.376 6.4898 10.8 6.4898C11.4819 6.4898 12.0142 6.81318 12.3314 7.08112C12.6494 7.34973 12.9659 7.74184 13.123 8.21226L13.1493 8.29092L13.2818 8.90808C13.3842 8.8934 13.4904 8.88535 13.6 8.88535H14V3.7449C14 3.23958 13.5843 2.82993 13.0714 2.82993H7.5C6.98716 2.82993 6.57143 2.42029 6.57143 1.91497C6.57143 1.40964 6.15569 1 5.64286 1H1.92857Z" fill="currentColor" /><path d="M10.9494 8.00476C10.9275 7.99966 10.9055 7.9956 10.8835 7.99266L10.9494 8.00476Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M13.6 10.3826H15C15.6 10.3826 16 10.8816 16 11.4805C16 12.0794 15.6 12.4787 15 12.4787H14.1L12.6 14.5748C12.4 14.8742 12 15.0738 11.6 14.974C11.2 14.8742 10.9 14.5748 10.8 14.1755L10.4 12.4787L10 13.6764C9.9 13.9759 9.5 14.2753 9.1 14.2753H8C7.4 14.2753 7 13.8761 7 13.2772C7 12.6783 7.4 12.279 8 12.279H8.4L9.8 8.58591C9.9 8.18665 10.4 7.98702 10.8 7.98702C11.2 7.98702 11.6 8.38628 11.7 8.68572L12.3 11.4805L12.8 10.7818C13 10.5822 13.3 10.3826 13.6 10.3826Z" fill={'currentColor'} /><path d="M1.92857 1C1.41574 1 1 1.40964 1 1.91497V11.0646C1 11.57 1.41574 11.9796 1.92857 11.9796H5.84028C5.94099 11.8068 6.06518 11.6437 6.21434 11.4948C6.53603 11.1737 6.92403 10.9685 7.33247 10.8644L8.37506 8.11411C8.58323 7.43691 9.08123 7.02881 9.48162 6.81567C9.90517 6.59019 10.376 6.4898 10.8 6.4898C11.4819 6.4898 12.0142 6.81318 12.3314 7.08112C12.6494 7.34973 12.9659 7.74184 13.123 8.21226L13.1493 8.29092L13.2818 8.90808C13.3842 8.8934 13.4904 8.88535 13.6 8.88535H14V3.7449C14 3.23958 13.5843 2.82993 13.0714 2.82993H7.5C6.98716 2.82993 6.57143 2.42029 6.57143 1.91497C6.57143 1.40964 6.15569 1 5.64286 1H1.92857Z" fill={'currentColor'} /><path d="M10.9494 8.00476C10.9275 7.99966 10.9055 7.9956 10.8835 7.99266L10.9494 8.00476Z" fill={'currentColor'} /></svg>;
 };
+
 TimeSeriesCollection.displayName = 'TimeSeriesCollection';
 TimeSeriesCollection.isGlyph = true;
+
 export default TimeSeriesCollection;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Trash.tsx b/packages/icon/src/generated/Trash.tsx
index e24dccbc28..7bec2070e5 100644
--- a/packages/icon/src/generated/Trash.tsx
+++ b/packages/icon/src/generated/Trash.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4ec6190fcaa732d59f9b62a914dd5748
+* @checksum 1f2e003df8e95d73a3158669803c155f
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface TrashProps extends LGGlyph.ComponentProps {}
+
 const Trash = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: TrashProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Trash', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Trash', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M5 2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2H13C13.5523 2 14 2.44772 14 3V4H2V3C2 2.44772 2.44772 2 3 2H5ZM14 5H2L3.67845 13.3922C3.86542 14.3271 4.68625 15 5.63961 15H10.3604C11.3138 15 12.1346 14.3271 12.3216 13.3922L14 5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M5 2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2H13C13.5523 2 14 2.44772 14 3V4H2V3C2 2.44772 2.44772 2 3 2H5ZM14 5H2L3.67845 13.3922C3.86542 14.3271 4.68625 15 5.63961 15H10.3604C11.3138 15 12.1346 14.3271 12.3216 13.3922L14 5Z" fill={'currentColor'} /></svg>;
 };
+
 Trash.displayName = 'Trash';
 Trash.isGlyph = true;
+
 export default Trash;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Undo.tsx b/packages/icon/src/generated/Undo.tsx
index baa3ae30b1..af91de4953 100644
--- a/packages/icon/src/generated/Undo.tsx
+++ b/packages/icon/src/generated/Undo.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f252343c842bb7d7db324ecc18b5b8ed
+* @checksum c9ce7984b9d418397cd1636800cc7aff
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface UndoProps extends LGGlyph.ComponentProps {}
+
 const Undo = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: UndoProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Undo', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Undo', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M11.9812 9.40216C12.0303 9.72987 12.2942 10 12.6256 10H13.4256C13.757 10 14.0288 9.73064 13.9961 9.40089C13.8186 7.6104 12.8539 6.05139 11.4531 5.07473C10.9741 4.73549 10.4315 4.46519 9.844 4.28051C9.27044 4.09832 8.6595 4.00002 8.0256 4.00002C8.01612 3.99998 8.00663 4.00002 7.99714 4.00002C5.29819 4.00002 3.04689 5.71778 2.52999 8.00002H1.11567C0.574518 8.00002 0.323974 8.67204 0.733046 9.02631L3.21469 11.1755C3.43432 11.3657 3.76031 11.3657 3.97994 11.1755L6.46159 9.02631C6.87066 8.67204 6.62011 8.00002 6.07896 8.00002H4.63233C5.10106 6.91458 6.31283 6.00002 7.99714 6.00002C8.18375 6.00002 8.36456 6.01124 8.5392 6.03269C9.24477 6.12312 9.89283 6.39739 10.4338 6.80592C10.4522 6.8206 10.4704 6.83543 10.4885 6.85041C10.5052 6.86432 10.5225 6.87728 10.5404 6.88926C11.2999 7.50399 11.8297 8.39119 11.9812 9.40216Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M11.9812 9.40216C12.0303 9.72987 12.2942 10 12.6256 10H13.4256C13.757 10 14.0288 9.73064 13.9961 9.40089C13.8186 7.6104 12.8539 6.05139 11.4531 5.07473C10.9741 4.73549 10.4315 4.46519 9.844 4.28051C9.27044 4.09832 8.6595 4.00002 8.0256 4.00002C8.01612 3.99998 8.00663 4.00002 7.99714 4.00002C5.29819 4.00002 3.04689 5.71778 2.52999 8.00002H1.11567C0.574518 8.00002 0.323974 8.67204 0.733046 9.02631L3.21469 11.1755C3.43432 11.3657 3.76031 11.3657 3.97994 11.1755L6.46159 9.02631C6.87066 8.67204 6.62011 8.00002 6.07896 8.00002H4.63233C5.10106 6.91458 6.31283 6.00002 7.99714 6.00002C8.18375 6.00002 8.36456 6.01124 8.5392 6.03269C9.24477 6.12312 9.89283 6.39739 10.4338 6.80592C10.4522 6.8206 10.4704 6.83543 10.4885 6.85041C10.5052 6.86432 10.5225 6.87728 10.5404 6.88926C11.2999 7.50399 11.8297 8.39119 11.9812 9.40216Z" fill={'currentColor'} /></svg>;
 };
+
 Undo.displayName = 'Undo';
 Undo.isGlyph = true;
+
 export default Undo;
\ No newline at end of file
diff --git a/packages/icon/src/generated/University.tsx b/packages/icon/src/generated/University.tsx
index fc1438ff36..1362f89fae 100644
--- a/packages/icon/src/generated/University.tsx
+++ b/packages/icon/src/generated/University.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 58486ad5c0edb233fb2565d2a2cfbbcf
+* @checksum d411d5a0949b9cfdf24ad83ee0607487
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface UniversityProps extends LGGlyph.ComponentProps {}
+
 const University = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: UniversityProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'University', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'University', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.5 4.61279C8.5 4.22996 8.69133 3.87245 9.00987 3.66009C9.66508 3.22328 10.3905 2.90238 11.1545 2.71139L13.5611 2.10972C13.7841 2.05399 14 2.22259 14 2.45237V10.3323C14 10.5698 14 10.6886 13.9571 10.7854C13.9193 10.8707 13.8583 10.9437 13.7811 10.9962C13.6936 11.0557 13.5768 11.077 13.3431 11.1194L9.44311 11.8285C9.11918 11.8874 8.95721 11.9169 8.83074 11.8714C8.71979 11.8315 8.62651 11.7536 8.56739 11.6516C8.5 11.5353 8.5 11.3707 8.5 11.0414V4.61279Z" fill="currentColor" /><path d="M2 2.45237C2 2.22259 2.21594 2.05399 2.43887 2.10972L4.84555 2.71139C5.6095 2.90238 6.33492 3.22328 6.99013 3.66009C7.30867 3.87245 7.5 4.22996 7.5 4.61279V11.0414C7.5 11.3707 7.5 11.5353 7.43262 11.6516C7.37349 11.7536 7.28022 11.8315 7.16926 11.8714C7.04279 11.9169 6.88083 11.8874 6.55689 11.8285L2.6569 11.1194C2.42324 11.077 2.30641 11.0557 2.21886 10.9962C2.14168 10.9437 2.08073 10.8707 2.04291 10.7854C2 10.6886 2 10.5698 2 10.3323V2.45237Z" fill="currentColor" /><path d="M2.00807 12.4106C2.05747 12.1389 2.31776 11.9587 2.58945 12.0081L7.73167 12.943C7.90911 12.9753 8.0909 12.9753 8.26833 12.943L13.4106 12.0081C13.6822 11.9587 13.9425 12.1389 13.9919 12.4106C14.0413 12.6822 13.8611 12.9425 13.5894 12.9919L9.45517 13.7436C9.29201 14.1782 8.70238 14.5 8 14.5C7.29762 14.5 6.70799 14.1782 6.54483 13.7436L2.41056 12.9919C2.13887 12.9425 1.95867 12.6822 2.00807 12.4106Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.5 4.61279C8.5 4.22996 8.69133 3.87245 9.00987 3.66009C9.66508 3.22328 10.3905 2.90238 11.1545 2.71139L13.5611 2.10972C13.7841 2.05399 14 2.22259 14 2.45237V10.3323C14 10.5698 14 10.6886 13.9571 10.7854C13.9193 10.8707 13.8583 10.9437 13.7811 10.9962C13.6936 11.0557 13.5768 11.077 13.3431 11.1194L9.44311 11.8285C9.11918 11.8874 8.95721 11.9169 8.83074 11.8714C8.71979 11.8315 8.62651 11.7536 8.56739 11.6516C8.5 11.5353 8.5 11.3707 8.5 11.0414V4.61279Z" fill={'currentColor'} /><path d="M2 2.45237C2 2.22259 2.21594 2.05399 2.43887 2.10972L4.84555 2.71139C5.6095 2.90238 6.33492 3.22328 6.99013 3.66009C7.30867 3.87245 7.5 4.22996 7.5 4.61279V11.0414C7.5 11.3707 7.5 11.5353 7.43262 11.6516C7.37349 11.7536 7.28022 11.8315 7.16926 11.8714C7.04279 11.9169 6.88083 11.8874 6.55689 11.8285L2.6569 11.1194C2.42324 11.077 2.30641 11.0557 2.21886 10.9962C2.14168 10.9437 2.08073 10.8707 2.04291 10.7854C2 10.6886 2 10.5698 2 10.3323V2.45237Z" fill={'currentColor'} /><path d="M2.00807 12.4106C2.05747 12.1389 2.31776 11.9587 2.58945 12.0081L7.73167 12.943C7.90911 12.9753 8.0909 12.9753 8.26833 12.943L13.4106 12.0081C13.6822 11.9587 13.9425 12.1389 13.9919 12.4106C14.0413 12.6822 13.8611 12.9425 13.5894 12.9919L9.45517 13.7436C9.29201 14.1782 8.70238 14.5 8 14.5C7.29762 14.5 6.70799 14.1782 6.54483 13.7436L2.41056 12.9919C2.13887 12.9425 1.95867 12.6822 2.00807 12.4106Z" fill={'currentColor'} /></svg>;
 };
+
 University.displayName = 'University';
 University.isGlyph = true;
+
 export default University;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Unlock.tsx b/packages/icon/src/generated/Unlock.tsx
index c40df500cc..4442ecad88 100644
--- a/packages/icon/src/generated/Unlock.tsx
+++ b/packages/icon/src/generated/Unlock.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1398661254afbd25f082d3802da4e54d
+* @checksum 7eea4e428747d77570f0eeee8ffb5964
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface UnlockProps extends LGGlyph.ComponentProps {}
+
 const Unlock = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: UnlockProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Unlock', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Unlock', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M6.15738 4.22101C6.46112 3.50344 7.17177 3 8 3C9.10457 3 10 3.89543 10 5V7H4C3.44772 7 3 7.44772 3 8V14C3 14.5523 3.44772 15 4 15H12C12.5523 15 13 14.5523 13 14V8C13 7.44772 12.5523 7 12 7V5C12 2.79086 10.2091 1 8 1C6.20247 1 4.68187 2.18568 4.17763 3.81762C3.98198 4.45082 4.53726 5 5.2 5C5.64183 5 5.98516 4.62789 6.15738 4.22101ZM8.58667 10.8099C8.83712 10.6282 9 10.3331 9 10C9 9.44771 8.55228 9 8 9C7.44772 9 7 9.44771 7 10C7 10.3361 7.16577 10.6334 7.42 10.8147V12.6667C7.42 12.9888 7.68117 13.25 8.00333 13.25C8.3255 13.25 8.58667 12.9888 8.58667 12.6667V10.8099Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M6.15738 4.22101C6.46112 3.50344 7.17177 3 8 3C9.10457 3 10 3.89543 10 5V7H4C3.44772 7 3 7.44772 3 8V14C3 14.5523 3.44772 15 4 15H12C12.5523 15 13 14.5523 13 14V8C13 7.44772 12.5523 7 12 7V5C12 2.79086 10.2091 1 8 1C6.20247 1 4.68187 2.18568 4.17763 3.81762C3.98198 4.45082 4.53726 5 5.2 5C5.64183 5 5.98516 4.62789 6.15738 4.22101ZM8.58667 10.8099C8.83712 10.6282 9 10.3331 9 10C9 9.44771 8.55228 9 8 9C7.44772 9 7 9.44771 7 10C7 10.3361 7.16577 10.6334 7.42 10.8147V12.6667C7.42 12.9888 7.68117 13.25 8.00333 13.25C8.3255 13.25 8.58667 12.9888 8.58667 12.6667V10.8099Z" fill={'currentColor'} /></svg>;
 };
+
 Unlock.displayName = 'Unlock';
 Unlock.isGlyph = true;
+
 export default Unlock;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Unsorted.tsx b/packages/icon/src/generated/Unsorted.tsx
index 522c7c7fa3..d4a701b30b 100644
--- a/packages/icon/src/generated/Unsorted.tsx
+++ b/packages/icon/src/generated/Unsorted.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b478bddb140a3412f644139063f5fca3
+* @checksum 62efba6d722d157f522878adb9f96bb7
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface UnsortedProps extends LGGlyph.ComponentProps {}
+
 const Unsorted = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: UnsortedProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Unsorted', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Unsorted', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M3.68466 1.14265C3.90429 0.952449 4.23028 0.95245 4.44991 1.14265L6.93156 3.29182C7.34063 3.64609 7.09009 4.31811 6.54893 4.31811H5.23624L5.23624 11.6819H6.54894C7.09009 11.6819 7.34064 12.3539 6.93157 12.7082L4.44992 14.8573C4.23029 15.0476 3.9043 15.0476 3.68467 14.8573L1.20303 12.7082C0.793953 12.3539 1.0445 11.6819 1.58565 11.6819H2.89836V11.6742L2.89835 11.6696L2.89835 4.31811H1.58564C1.04449 4.31811 0.793944 3.64609 1.20302 3.29182L3.68466 1.14265Z" fill="currentColor" /><path d="M8 8C8 7.44772 8.44772 7 9 7H14C14.5523 7 15 7.44772 15 8C15 8.55228 14.5523 9 14 9H9C8.44772 9 8 8.55228 8 8Z" fill="currentColor" /><path d="M9 4C8.44772 4 8 4.44772 8 5C8 5.55228 8.44772 6 9 6H14C14.5523 6 15 5.55228 15 5C15 4.44772 14.5523 4 14 4H9Z" fill="currentColor" /><path d="M8 11C8 10.4477 8.44772 10 9 10H14C14.5523 10 15 10.4477 15 11C15 11.5523 14.5523 12 14 12H9C8.44772 12 8 11.5523 8 11Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3.68466 1.14265C3.90429 0.952449 4.23028 0.95245 4.44991 1.14265L6.93156 3.29182C7.34063 3.64609 7.09009 4.31811 6.54893 4.31811H5.23624L5.23624 11.6819H6.54894C7.09009 11.6819 7.34064 12.3539 6.93157 12.7082L4.44992 14.8573C4.23029 15.0476 3.9043 15.0476 3.68467 14.8573L1.20303 12.7082C0.793953 12.3539 1.0445 11.6819 1.58565 11.6819H2.89836V11.6742L2.89835 11.6696L2.89835 4.31811H1.58564C1.04449 4.31811 0.793944 3.64609 1.20302 3.29182L3.68466 1.14265Z" fill={'currentColor'} /><path d="M8 8C8 7.44772 8.44772 7 9 7H14C14.5523 7 15 7.44772 15 8C15 8.55228 14.5523 9 14 9H9C8.44772 9 8 8.55228 8 8Z" fill={'currentColor'} /><path d="M9 4C8.44772 4 8 4.44772 8 5C8 5.55228 8.44772 6 9 6H14C14.5523 6 15 5.55228 15 5C15 4.44772 14.5523 4 14 4H9Z" fill={'currentColor'} /><path d="M8 11C8 10.4477 8.44772 10 9 10H14C14.5523 10 15 10.4477 15 11C15 11.5523 14.5523 12 14 12H9C8.44772 12 8 11.5523 8 11Z" fill={'currentColor'} /></svg>;
 };
+
 Unsorted.displayName = 'Unsorted';
 Unsorted.isGlyph = true;
+
 export default Unsorted;
\ No newline at end of file
diff --git a/packages/icon/src/generated/UpDownCarets.tsx b/packages/icon/src/generated/UpDownCarets.tsx
index 272feed9bd..94fa5e3f2d 100644
--- a/packages/icon/src/generated/UpDownCarets.tsx
+++ b/packages/icon/src/generated/UpDownCarets.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0d09fd5ba0e292136e7d8c6dae74fcc8
+* @checksum 70d78f9d81a058e7d91f837aa2ee7db4
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface UpDownCaretsProps extends LGGlyph.ComponentProps {}
+
 const UpDownCarets = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: UpDownCaretsProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'UpDownCarets', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'UpDownCarets', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" {...props}><g id="Glyphs-/-Up-Down-Carets" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd"><path d="M7.5273,1.2109 C7.7873,0.9299 8.2123,0.9299 8.4753,1.2109 L11.8023,4.7729 C12.2243,5.2249 11.9253,5.9999 11.3273,5.9999 L4.6733,5.9999 C4.0743,5.9999 3.7753,5.2249 4.1973,4.7729 L7.5273,1.2109 Z M11.3273,9.9999 C11.9253,9.9999 12.2243,10.7749 11.8023,11.2279 L8.4753,14.7889 C8.2123,15.0699 7.7873,15.0699 7.5273,14.7889 L4.1973,11.2279 C3.7753,10.7749 4.0743,9.9999 4.6733,9.9999 L11.3273,9.9999 Z" id="Fill-1" fill="currentColor" /></g></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><g id="Glyphs-/-Up-Down-Carets" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd"><path d="M7.5273,1.2109 C7.7873,0.9299 8.2123,0.9299 8.4753,1.2109 L11.8023,4.7729 C12.2243,5.2249 11.9253,5.9999 11.3273,5.9999 L4.6733,5.9999 C4.0743,5.9999 3.7753,5.2249 4.1973,4.7729 L7.5273,1.2109 Z M11.3273,9.9999 C11.9253,9.9999 12.2243,10.7749 11.8023,11.2279 L8.4753,14.7889 C8.2123,15.0699 7.7873,15.0699 7.5273,14.7889 L4.1973,11.2279 C3.7753,10.7749 4.0743,9.9999 4.6733,9.9999 L11.3273,9.9999 Z" id="Fill-1" fill={'currentColor'} /></g></svg>;
 };
+
 UpDownCarets.displayName = 'UpDownCarets';
 UpDownCarets.isGlyph = true;
+
 export default UpDownCarets;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Upload.tsx b/packages/icon/src/generated/Upload.tsx
index 9908d65449..da5e4f9a70 100644
--- a/packages/icon/src/generated/Upload.tsx
+++ b/packages/icon/src/generated/Upload.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5a585242d556b5b40d7dc32e59be15aa
+* @checksum de82405d3ca42e8e30552e956ae06db1
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface UploadProps extends LGGlyph.ComponentProps {}
+
 const Upload = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: UploadProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Upload', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Upload', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M11.2967 11V11.9384C11.525 11.9789 11.7601 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C11.482 4 10.9869 4.09848 10.5326 4.27774C9.67881 2.34714 7.74673 1 5.5 1C2.46243 1 0 3.46243 0 6.5C0 9.53757 2.46243 12 5.5 12C5.59955 12 5.69847 11.9974 5.79672 11.9921V11H5.39404C3.99871 11 3.31387 9.30059 4.31931 8.33311L7.47199 5.29944C8.07212 4.72196 9.02132 4.72196 9.62145 5.29944L12.7741 8.33311C13.7796 9.30059 13.0947 11 11.6994 11H11.2967ZM8.33871 6.20016C8.45486 6.08839 8.63858 6.08839 8.75473 6.20016L11.9074 9.23383C12.102 9.42108 11.9695 9.75 11.6994 9.75H10.0467V13.5C10.0467 14.3284 9.37514 15 8.54672 15C7.71829 15 7.04672 14.3284 7.04672 13.5V9.75H5.39404C5.12398 9.75 4.99143 9.42108 5.18603 9.23383L8.33871 6.20016Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M11.2967 11V11.9384C11.525 11.9789 11.7601 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C11.482 4 10.9869 4.09848 10.5326 4.27774C9.67881 2.34714 7.74673 1 5.5 1C2.46243 1 0 3.46243 0 6.5C0 9.53757 2.46243 12 5.5 12C5.59955 12 5.69847 11.9974 5.79672 11.9921V11H5.39404C3.99871 11 3.31387 9.30059 4.31931 8.33311L7.47199 5.29944C8.07212 4.72196 9.02132 4.72196 9.62145 5.29944L12.7741 8.33311C13.7796 9.30059 13.0947 11 11.6994 11H11.2967ZM8.33871 6.20016C8.45486 6.08839 8.63858 6.08839 8.75473 6.20016L11.9074 9.23383C12.102 9.42108 11.9695 9.75 11.6994 9.75H10.0467V13.5C10.0467 14.3284 9.37514 15 8.54672 15C7.71829 15 7.04672 14.3284 7.04672 13.5V9.75H5.39404C5.12398 9.75 4.99143 9.42108 5.18603 9.23383L8.33871 6.20016Z" fill={'currentColor'} /></svg>;
 };
+
 Upload.displayName = 'Upload';
 Upload.isGlyph = true;
+
 export default Upload;
\ No newline at end of file
diff --git a/packages/icon/src/generated/VerticalEllipsis.tsx b/packages/icon/src/generated/VerticalEllipsis.tsx
index 6b4cf85507..b69aff1d02 100644
--- a/packages/icon/src/generated/VerticalEllipsis.tsx
+++ b/packages/icon/src/generated/VerticalEllipsis.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fccdd3758844d746064dd4942777cacd
+* @checksum f0fb70789246b83617c31af61814aac8
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface VerticalEllipsisProps extends LGGlyph.ComponentProps {}
+
 const VerticalEllipsis = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: VerticalEllipsisProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'VerticalEllipsis', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'VerticalEllipsis', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M9.5 2.75C9.5 3.7165 8.7165 4.5 7.75 4.5C6.7835 4.5 6 3.7165 6 2.75C6 1.7835 6.7835 1 7.75 1C8.7165 1 9.5 1.7835 9.5 2.75ZM9.5 7.75C9.5 8.7165 8.7165 9.5 7.75 9.5C6.7835 9.5 6 8.7165 6 7.75C6 6.7835 6.7835 6 7.75 6C8.7165 6 9.5 6.7835 9.5 7.75ZM7.75 14.5C8.7165 14.5 9.5 13.7165 9.5 12.75C9.5 11.7835 8.7165 11 7.75 11C6.7835 11 6 11.7835 6 12.75C6 13.7165 6.7835 14.5 7.75 14.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M9.5 2.75C9.5 3.7165 8.7165 4.5 7.75 4.5C6.7835 4.5 6 3.7165 6 2.75C6 1.7835 6.7835 1 7.75 1C8.7165 1 9.5 1.7835 9.5 2.75ZM9.5 7.75C9.5 8.7165 8.7165 9.5 7.75 9.5C6.7835 9.5 6 8.7165 6 7.75C6 6.7835 6.7835 6 7.75 6C8.7165 6 9.5 6.7835 9.5 7.75ZM7.75 14.5C8.7165 14.5 9.5 13.7165 9.5 12.75C9.5 11.7835 8.7165 11 7.75 11C6.7835 11 6 11.7835 6 12.75C6 13.7165 6.7835 14.5 7.75 14.5Z" fill={'currentColor'} /></svg>;
 };
+
 VerticalEllipsis.displayName = 'VerticalEllipsis';
 VerticalEllipsis.isGlyph = true;
+
 export default VerticalEllipsis;
\ No newline at end of file
diff --git a/packages/icon/src/generated/View.tsx b/packages/icon/src/generated/View.tsx
index 82beedda8e..e6ea83f57a 100644
--- a/packages/icon/src/generated/View.tsx
+++ b/packages/icon/src/generated/View.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 30dc1f6a39c2d65b6fcb241025159b77
+* @checksum fefca0e06862f7f44a554e490764fdef
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface ViewProps extends LGGlyph.ComponentProps {}
+
 const View = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: ViewProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'View', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'View', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M3 4H4.05V2H2.5C1.67157 2 1 2.67157 1 3.5V4.95H3V4ZM6.45 2H9.55V4H6.45V2ZM11.95 2H13.5C14.3284 2 15 2.67157 15 3.5V4.95H13V4H11.95V2ZM15 6.55V9.45H13V6.55H15ZM3 6.55V9.45H1V6.55H3ZM15 11.05V12.5C15 13.3284 14.3284 14 13.5 14H11.95V12H13V11.05H15ZM3 12V11.05H1V12.5C1 13.3284 1.67157 14 2.5 14H4.05V12H3ZM6.45 12H9.55V14H6.45V12Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M4.5 8C4.5 7.72386 4.72386 7.5 5 7.5H11C11.2761 7.5 11.5 7.72386 11.5 8C11.5 8.27614 11.2761 8.5 11 8.5H5C4.72386 8.5 4.5 8.27614 4.5 8Z" fill="currentColor" /><path fillRule="evenodd" clipRule="evenodd" d="M8 5.5C8.27614 5.5 8.5 5.72386 8.5 6L8.5 10C8.5 10.2761 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.2761 7.5 10L7.5 6C7.5 5.72386 7.72386 5.5 8 5.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M3 4H4.05V2H2.5C1.67157 2 1 2.67157 1 3.5V4.95H3V4ZM6.45 2H9.55V4H6.45V2ZM11.95 2H13.5C14.3284 2 15 2.67157 15 3.5V4.95H13V4H11.95V2ZM15 6.55V9.45H13V6.55H15ZM3 6.55V9.45H1V6.55H3ZM15 11.05V12.5C15 13.3284 14.3284 14 13.5 14H11.95V12H13V11.05H15ZM3 12V11.05H1V12.5C1 13.3284 1.67157 14 2.5 14H4.05V12H3ZM6.45 12H9.55V14H6.45V12Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4.5 8C4.5 7.72386 4.72386 7.5 5 7.5H11C11.2761 7.5 11.5 7.72386 11.5 8C11.5 8.27614 11.2761 8.5 11 8.5H5C4.72386 8.5 4.5 8.27614 4.5 8Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M8 5.5C8.27614 5.5 8.5 5.72386 8.5 6L8.5 10C8.5 10.2761 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.2761 7.5 10L7.5 6C7.5 5.72386 7.72386 5.5 8 5.5Z" fill={'currentColor'} /></svg>;
 };
+
 View.displayName = 'View';
 View.isGlyph = true;
+
 export default View;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Visibility.tsx b/packages/icon/src/generated/Visibility.tsx
index 2e0617e276..6939db17e8 100644
--- a/packages/icon/src/generated/Visibility.tsx
+++ b/packages/icon/src/generated/Visibility.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3ee5e82a13af887c9ab15bda1c229fa
+* @checksum c73cddebbffaba11c8cdae8e7710d824
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface VisibilityProps extends LGGlyph.ComponentProps {}
+
 const Visibility = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: VisibilityProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Visibility', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Visibility', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 2.00781C11.9337 2.00781 14.4728 5.13665 15.4548 6.59114L15.4984 6.65528C15.7132 6.97033 16 7.39096 16 8C16 8.60904 15.7132 9.02967 15.4984 9.34472L15.4548 9.40886C14.4728 10.8633 11.9337 13.9922 8 13.9922C4.06626 13.9922 1.52716 10.8633 0.545173 9.40886L0.501583 9.34472C0.286783 9.02967 0 8.60904 0 8C0 7.39096 0.286785 6.97033 0.501583 6.65529L0.545173 6.59114C1.52716 5.13665 4.06626 2.00781 8 2.00781ZM9.13023 4.13098C8.76962 4.05004 8.39264 4.00521 8.00001 4.00521C5.75051 4.00521 3.92692 5.79374 3.92692 8C3.92692 10.2063 5.75051 11.9948 8.00001 11.9948C7.62198 11.9948 7.24379 11.9497 6.86975 11.869C7.23037 11.95 7.60736 11.9948 8.00001 11.9948C10.2495 11.9948 12.0731 10.2063 12.0731 8C12.0731 5.79374 10.2495 4.00521 8.00001 4.00521C8.37803 4.00521 8.75619 4.05033 9.13023 4.13098ZM8 10.9961C9.68713 10.9961 11.0548 9.6547 11.0548 8C11.0548 6.3453 9.68713 5.00391 8 5.00391C6.31287 5.00391 4.94519 6.3453 4.94519 8C4.94519 9.6547 6.31287 10.9961 8 10.9961Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 2.00781C11.9337 2.00781 14.4728 5.13665 15.4548 6.59114L15.4984 6.65528C15.7132 6.97033 16 7.39096 16 8C16 8.60904 15.7132 9.02967 15.4984 9.34472L15.4548 9.40886C14.4728 10.8633 11.9337 13.9922 8 13.9922C4.06626 13.9922 1.52716 10.8633 0.545173 9.40886L0.501583 9.34472C0.286783 9.02967 0 8.60904 0 8C0 7.39096 0.286785 6.97033 0.501583 6.65529L0.545173 6.59114C1.52716 5.13665 4.06626 2.00781 8 2.00781ZM9.13023 4.13098C8.76962 4.05004 8.39264 4.00521 8.00001 4.00521C5.75051 4.00521 3.92692 5.79374 3.92692 8C3.92692 10.2063 5.75051 11.9948 8.00001 11.9948C7.62198 11.9948 7.24379 11.9497 6.86975 11.869C7.23037 11.95 7.60736 11.9948 8.00001 11.9948C10.2495 11.9948 12.0731 10.2063 12.0731 8C12.0731 5.79374 10.2495 4.00521 8.00001 4.00521C8.37803 4.00521 8.75619 4.05033 9.13023 4.13098ZM8 10.9961C9.68713 10.9961 11.0548 9.6547 11.0548 8C11.0548 6.3453 9.68713 5.00391 8 5.00391C6.31287 5.00391 4.94519 6.3453 4.94519 8C4.94519 9.6547 6.31287 10.9961 8 10.9961Z" fill={'currentColor'} /></svg>;
 };
+
 Visibility.displayName = 'Visibility';
 Visibility.isGlyph = true;
+
 export default Visibility;
\ No newline at end of file
diff --git a/packages/icon/src/generated/VisibilityOff.tsx b/packages/icon/src/generated/VisibilityOff.tsx
index 03e8d51bf8..44ac2a5797 100644
--- a/packages/icon/src/generated/VisibilityOff.tsx
+++ b/packages/icon/src/generated/VisibilityOff.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e01caf6dcdfaae2f04cfcc60f165ea12
+* @checksum a9e32393a08e37177e5f60daefffb393
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface VisibilityOffProps extends LGGlyph.ComponentProps {}
+
 const VisibilityOff = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: VisibilityOffProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'VisibilityOff', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'VisibilityOff', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M14.6012 1.26611C14.1924 0.894763 13.5467 0.912984 13.1681 1.31501L1.70391 13.4864C1.32524 13.8884 1.35699 14.522 1.76579 14.8934C2.17459 15.2647 2.82027 15.2465 3.19894 14.8445L4.99238 12.9404C5.88019 13.3349 6.88397 13.5871 8 13.5871C11.9337 13.5871 14.4728 10.4542 15.4548 8.99777L15.4984 8.93355C15.7132 8.61809 16 8.19691 16 7.58708C16 6.97724 15.7132 6.55606 15.4984 6.24061L15.4548 6.17639C15.0571 5.58653 14.404 4.72168 13.5062 3.90133L14.6631 2.67309C15.0418 2.27106 15.01 1.63747 14.6012 1.26611ZM11.6703 5.85054L10.9066 6.66133C11.0028 6.9529 11.0548 7.26402 11.0548 7.58708C11.0548 9.24393 9.68713 10.5871 8 10.5871C7.7543 10.5871 7.51537 10.5586 7.28646 10.5048L6.52258 11.3158C6.98061 11.491 7.47888 11.5871 8.00001 11.5871C7.62198 11.5871 7.24379 11.5419 6.86974 11.4611C7.23037 11.5422 7.60736 11.5871 8.00001 11.5871C10.2495 11.5871 12.0731 9.79622 12.0731 7.58708C12.0731 6.96482 11.9284 6.37575 11.6703 5.85054ZM8 1.58708C8.9189 1.58708 9.7617 1.75803 10.5263 2.03863L8.97905 3.68136C8.66462 3.62036 8.33812 3.58708 8.00001 3.58708C5.75051 3.58708 3.92692 5.37794 3.92692 7.58708C3.92692 8.02163 3.99748 8.43999 4.12796 8.83172L2.14338 10.9387C1.42423 10.2238 0.889162 9.50794 0.545171 8.99777L0.501581 8.93355C0.286781 8.61809 0 8.19691 0 7.58708C0 6.97725 0.286783 6.55607 0.501581 6.24061L0.545171 6.17639C1.52716 4.72 4.06625 1.58708 8 1.58708ZM8.00001 3.58708C8.32689 3.58708 8.6539 3.62086 8.97824 3.68222L8.96213 3.69932C8.65365 3.62596 8.33146 3.58708 8.00001 3.58708ZM8 4.58708C8.04143 4.58708 8.08266 4.58789 8.12369 4.58949L4.9663 7.94166C4.95236 7.82537 4.94519 7.70705 4.94519 7.58708C4.94519 5.93022 6.31287 4.58708 8 4.58708Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M14.6012 1.26611C14.1924 0.894763 13.5467 0.912984 13.1681 1.31501L1.70391 13.4864C1.32524 13.8884 1.35699 14.522 1.76579 14.8934C2.17459 15.2647 2.82027 15.2465 3.19894 14.8445L4.99238 12.9404C5.88019 13.3349 6.88397 13.5871 8 13.5871C11.9337 13.5871 14.4728 10.4542 15.4548 8.99777L15.4984 8.93355C15.7132 8.61809 16 8.19691 16 7.58708C16 6.97724 15.7132 6.55606 15.4984 6.24061L15.4548 6.17639C15.0571 5.58653 14.404 4.72168 13.5062 3.90133L14.6631 2.67309C15.0418 2.27106 15.01 1.63747 14.6012 1.26611ZM11.6703 5.85054L10.9066 6.66133C11.0028 6.9529 11.0548 7.26402 11.0548 7.58708C11.0548 9.24393 9.68713 10.5871 8 10.5871C7.7543 10.5871 7.51537 10.5586 7.28646 10.5048L6.52258 11.3158C6.98061 11.491 7.47888 11.5871 8.00001 11.5871C7.62198 11.5871 7.24379 11.5419 6.86974 11.4611C7.23037 11.5422 7.60736 11.5871 8.00001 11.5871C10.2495 11.5871 12.0731 9.79622 12.0731 7.58708C12.0731 6.96482 11.9284 6.37575 11.6703 5.85054ZM8 1.58708C8.9189 1.58708 9.7617 1.75803 10.5263 2.03863L8.97905 3.68136C8.66462 3.62036 8.33812 3.58708 8.00001 3.58708C5.75051 3.58708 3.92692 5.37794 3.92692 7.58708C3.92692 8.02163 3.99748 8.43999 4.12796 8.83172L2.14338 10.9387C1.42423 10.2238 0.889162 9.50794 0.545171 8.99777L0.501581 8.93355C0.286781 8.61809 0 8.19691 0 7.58708C0 6.97725 0.286783 6.55607 0.501581 6.24061L0.545171 6.17639C1.52716 4.72 4.06625 1.58708 8 1.58708ZM8.00001 3.58708C8.32689 3.58708 8.6539 3.62086 8.97824 3.68222L8.96213 3.69932C8.65365 3.62596 8.33146 3.58708 8.00001 3.58708ZM8 4.58708C8.04143 4.58708 8.08266 4.58789 8.12369 4.58949L4.9663 7.94166C4.95236 7.82537 4.94519 7.70705 4.94519 7.58708C4.94519 5.93022 6.31287 4.58708 8 4.58708Z" fill={'currentColor'} /></svg>;
 };
+
 VisibilityOff.displayName = 'VisibilityOff';
 VisibilityOff.isGlyph = true;
+
 export default VisibilityOff;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Warning.tsx b/packages/icon/src/generated/Warning.tsx
index b2e4228521..f04a511072 100644
--- a/packages/icon/src/generated/Warning.tsx
+++ b/packages/icon/src/generated/Warning.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 035040f166e113ed89f47afdcd0e6ba9
+* @checksum e82642fa3af30a8d6064226cd654828c
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface WarningProps extends LGGlyph.ComponentProps {}
+
 const Warning = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: WarningProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Warning', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Warning', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8.8639 1.51357C8.49039 0.828811 7.50961 0.828811 7.1361 1.51357L1.12218 12.5388C0.763263 13.1968 1.23814 14 1.98608 14H14.0139C14.7619 14 15.2367 13.1968 14.8778 12.5388L8.8639 1.51357ZM7 5C7 4.44772 7.44772 4 8 4C8.55228 4 9 4.44772 9 5V9C9 9.55228 8.55228 10 8 10C7.44772 10 7 9.55228 7 9V5ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.8639 1.51357C8.49039 0.828811 7.50961 0.828811 7.1361 1.51357L1.12218 12.5388C0.763263 13.1968 1.23814 14 1.98608 14H14.0139C14.7619 14 15.2367 13.1968 14.8778 12.5388L8.8639 1.51357ZM7 5C7 4.44772 7.44772 4 8 4C8.55228 4 9 4.44772 9 5V9C9 9.55228 8.55228 10 8 10C7.44772 10 7 9.55228 7 9V5ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z" fill={'currentColor'} /></svg>;
 };
+
 Warning.displayName = 'Warning';
 Warning.isGlyph = true;
+
 export default Warning;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Wizard.tsx b/packages/icon/src/generated/Wizard.tsx
index 062403188d..9ca22937d9 100644
--- a/packages/icon/src/generated/Wizard.tsx
+++ b/packages/icon/src/generated/Wizard.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1a58301da72bb805197080c3015df426
+* @checksum e67a6b3e4118cbd6f4053a39f4fccce7
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface WizardProps extends LGGlyph.ComponentProps {}
+
 const Wizard = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: WizardProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Wizard', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Wizard', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M13.3273 3.27672C13.5149 2.89768 13.0912 2.47755 12.709 2.66362L10.1963 3.88661C10.0254 3.96982 9.81429 3.93162 9.67346 3.79198L7.60363 1.73961C7.28873 1.42736 6.7744 1.67771 6.85304 2.10495L7.36999 4.91317C7.40516 5.10424 7.31323 5.28994 7.14227 5.37315L4.62965 6.59614C4.24739 6.78221 4.35321 7.35705 4.78408 7.43504L7.61618 7.94762C7.80888 7.9825 7.96315 8.13547 7.99832 8.32654L8.51527 11.1348C8.59391 11.562 9.17365 11.6669 9.3613 11.2879L10.5947 8.79645C10.6786 8.62694 10.8659 8.53579 11.0586 8.57066L13.8907 9.08324C14.3216 9.16123 14.574 8.65123 14.2591 8.33898L12.1893 6.28661C12.0485 6.14697 12.01 5.93766 12.0939 5.76815L13.3273 3.27672ZM7 10.5C7.35311 10.1498 7.31222 9.54163 6.90867 9.14149C6.50512 8.74134 5.89174 8.7008 5.53863 9.05092L1.84025 12.7127C1.48714 13.0628 1.52803 13.6711 1.93158 14.0712C2.33513 14.4713 2.94851 14.5119 3.30162 14.1618L7 10.5Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M13.3273 3.27672C13.5149 2.89768 13.0912 2.47755 12.709 2.66362L10.1963 3.88661C10.0254 3.96982 9.81429 3.93162 9.67346 3.79198L7.60363 1.73961C7.28873 1.42736 6.7744 1.67771 6.85304 2.10495L7.36999 4.91317C7.40516 5.10424 7.31323 5.28994 7.14227 5.37315L4.62965 6.59614C4.24739 6.78221 4.35321 7.35705 4.78408 7.43504L7.61618 7.94762C7.80888 7.9825 7.96315 8.13547 7.99832 8.32654L8.51527 11.1348C8.59391 11.562 9.17365 11.6669 9.3613 11.2879L10.5947 8.79645C10.6786 8.62694 10.8659 8.53579 11.0586 8.57066L13.8907 9.08324C14.3216 9.16123 14.574 8.65123 14.2591 8.33898L12.1893 6.28661C12.0485 6.14697 12.01 5.93766 12.0939 5.76815L13.3273 3.27672ZM7 10.5C7.35311 10.1498 7.31222 9.54163 6.90867 9.14149C6.50512 8.74134 5.89174 8.7008 5.53863 9.05092L1.84025 12.7127C1.48714 13.0628 1.52803 13.6711 1.93158 14.0712C2.33513 14.4713 2.94851 14.5119 3.30162 14.1618L7 10.5Z" fill={'currentColor'} /></svg>;
 };
+
 Wizard.displayName = 'Wizard';
 Wizard.isGlyph = true;
+
 export default Wizard;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Wrench.tsx b/packages/icon/src/generated/Wrench.tsx
index 1c2a05e656..c78bee6b7a 100644
--- a/packages/icon/src/generated/Wrench.tsx
+++ b/packages/icon/src/generated/Wrench.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7e1030317445aa257afea5afd5508d8a
+* @checksum 06d44ec8a7034fa828a4fcde0a2a022b
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface WrenchProps extends LGGlyph.ComponentProps {}
+
 const Wrench = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: WrenchProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Wrench', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Wrench', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M10.625 9.75C13.0422 9.75 15 7.79219 15 5.375C15 4.95664 14.9398 4.55195 14.8305 4.16641C14.7457 3.87109 14.382 3.80547 14.166 4.02148L12.066 6.12148C12.0144 6.17315 11.9508 6.21071 11.8821 6.23144C11.8043 6.25491 11.7248 6.21773 11.6673 6.1603L9.8397 4.33267C9.78227 4.27523 9.74509 4.19569 9.76856 4.11794C9.78929 4.04924 9.82685 3.98565 9.87852 3.93398L11.9785 1.83398C12.1945 1.61797 12.1262 1.2543 11.8336 1.16953C11.448 1.06016 11.0434 1 10.625 1C8.20781 1 6.25 2.95781 6.25 5.375C6.25 5.82904 6.32027 6.26861 6.44822 6.68115C6.48333 6.79434 6.4563 6.9187 6.3725 7.0025L1.54414 11.8309C1.19687 12.1781 1 12.6512 1 13.1434C1 14.1688 1.83125 15 2.85664 15C3.34883 15 3.82188 14.8031 4.16914 14.4559L8.99671 9.62829C9.08092 9.54408 9.20602 9.51727 9.31967 9.55285C9.73197 9.68189 10.1713 9.75 10.625 9.75ZM2.75 14.125C3.23325 14.125 3.625 13.7332 3.625 13.25C3.625 12.7668 3.23325 12.375 2.75 12.375C2.26675 12.375 1.875 12.7668 1.875 13.25C1.875 13.7332 2.26675 14.125 2.75 14.125Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M10.625 9.75C13.0422 9.75 15 7.79219 15 5.375C15 4.95664 14.9398 4.55195 14.8305 4.16641C14.7457 3.87109 14.382 3.80547 14.166 4.02148L12.066 6.12148C12.0144 6.17315 11.9508 6.21071 11.8821 6.23144C11.8043 6.25491 11.7248 6.21773 11.6673 6.1603L9.8397 4.33267C9.78227 4.27523 9.74509 4.19569 9.76856 4.11794C9.78929 4.04924 9.82685 3.98565 9.87852 3.93398L11.9785 1.83398C12.1945 1.61797 12.1262 1.2543 11.8336 1.16953C11.448 1.06016 11.0434 1 10.625 1C8.20781 1 6.25 2.95781 6.25 5.375C6.25 5.82904 6.32027 6.26861 6.44822 6.68115C6.48333 6.79434 6.4563 6.9187 6.3725 7.0025L1.54414 11.8309C1.19687 12.1781 1 12.6512 1 13.1434C1 14.1688 1.83125 15 2.85664 15C3.34883 15 3.82188 14.8031 4.16914 14.4559L8.99671 9.62829C9.08092 9.54408 9.20602 9.51727 9.31967 9.55285C9.73197 9.68189 10.1713 9.75 10.625 9.75ZM2.75 14.125C3.23325 14.125 3.625 13.7332 3.625 13.25C3.625 12.7668 3.23325 12.375 2.75 12.375C2.26675 12.375 1.875 12.7668 1.875 13.25C1.875 13.7332 2.26675 14.125 2.75 14.125Z" fill={'currentColor'} /></svg>;
 };
+
 Wrench.displayName = 'Wrench';
 Wrench.isGlyph = true;
+
 export default Wrench;
\ No newline at end of file
diff --git a/packages/icon/src/generated/Write.tsx b/packages/icon/src/generated/Write.tsx
index 6789169458..9979d4a4aa 100644
--- a/packages/icon/src/generated/Write.tsx
+++ b/packages/icon/src/generated/Write.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 88f5725fa3ea564f5ae7a38c459c4202
+* @checksum 75604c122016aceee9a49fd4625b4f34
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface WriteProps extends LGGlyph.ComponentProps {}
+
 const Write = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: WriteProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'Write', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'Write', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.71094 3.74943C7.98779 3.5624 7.17765 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83326 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C6.64212 8.61764 6.9206 8.60546 7.20335 8.58125C6.75934 8.06173 6.67036 7.35853 6.91542 6.76298C7.19331 6.08765 7.8543 5.63811 8.62053 5.63811H8.71094V3.74943Z" fill="currentColor" /><path d="M8.06766 9.30516C7.49049 9.39617 6.91039 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22931 2.74517 8.7953C2.2802 8.61117 1.84763 8.38033 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.92835 11.2356 10.1286 11.1412 10.3071 11.0404C10.2351 10.9984 10.1654 10.9511 10.0985 10.8987L8.06766 9.30516Z" fill="currentColor" /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill="currentColor" /><path d="M12.4886 2.29681V6.87341H13.8795C14.4529 6.87341 14.7183 7.51856 14.2849 7.85866L11.6554 9.92188C11.4227 10.1045 11.0773 10.1045 10.8446 9.92188L8.21511 7.85866C7.78167 7.51856 8.04714 6.87341 8.62053 6.87341H9.92969V2.29681C9.92969 1.5806 10.5025 1 11.2091 1C11.9157 1 12.4886 1.5806 12.4886 2.29681Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.71094 3.74943C7.98779 3.5624 7.17765 3.47059 6.375 3.47059C3.97108 3.47059 1.5 4.29411 1.5 6.03268C1.5 6.10964 1.50071 6.18476 1.50212 6.25809C1.50071 6.28953 1.5 6.32115 1.5 6.35294V6.55882C1.5 6.82855 1.62059 7.08757 1.88365 7.34157C2.15143 7.60013 2.54848 7.83326 3.04084 8.02823C4.02449 8.41774 5.29298 8.61764 6.375 8.61764C6.64212 8.61764 6.9206 8.60546 7.20335 8.58125C6.75934 8.06173 6.67036 7.35853 6.91542 6.76298C7.19331 6.08765 7.8543 5.63811 8.62053 5.63811H8.71094V3.74943Z" fill={'currentColor'} /><path d="M8.06766 9.30516C7.49049 9.39617 6.91039 9.44117 6.375 9.44117C5.21336 9.44117 3.84123 9.22931 2.74517 8.7953C2.2802 8.61117 1.84763 8.38033 1.5 8.09498V9.85294C1.5 10.1227 1.62059 10.3817 1.88365 10.6357C2.15143 10.8943 2.54848 11.1274 3.04084 11.3223C4.02449 11.7119 5.29298 11.9118 6.375 11.9118C7.45702 11.9118 8.72551 11.7119 9.70916 11.3223C9.92835 11.2356 10.1286 11.1412 10.3071 11.0404C10.2351 10.9984 10.1654 10.9511 10.0985 10.8987L8.06766 9.30516Z" fill={'currentColor'} /><path d="M11.25 11.3891C10.9024 11.6745 10.4698 11.9053 10.0048 12.0894C8.90877 12.5234 7.53664 12.7353 6.375 12.7353C5.21336 12.7353 3.84123 12.5234 2.74517 12.0894C2.2802 11.9053 1.84763 11.6745 1.5 11.3891V12.1177C1.5 12.1458 1.50056 12.1738 1.50166 12.2017C1.50056 12.2794 1.5 12.3581 1.5 12.4379C1.5 14.1765 3.97108 15 6.375 15C8.77892 15 11.25 14.1765 11.25 12.4379C11.25 12.3616 11.2493 12.2862 11.2479 12.2117C11.2493 12.1805 11.25 12.1492 11.25 12.1177V11.3891Z" fill={'currentColor'} /><path d="M12.4886 2.29681V6.87341H13.8795C14.4529 6.87341 14.7183 7.51856 14.2849 7.85866L11.6554 9.92188C11.4227 10.1045 11.0773 10.1045 10.8446 9.92188L8.21511 7.85866C7.78167 7.51856 8.04714 6.87341 8.62053 6.87341H9.92969V2.29681C9.92969 1.5806 10.5025 1 11.2091 1C11.9157 1 12.4886 1.5806 12.4886 2.29681Z" fill={'currentColor'} /></svg>;
 };
+
 Write.displayName = 'Write';
 Write.isGlyph = true;
+
 export default Write;
\ No newline at end of file
diff --git a/packages/icon/src/generated/X.tsx b/packages/icon/src/generated/X.tsx
index cf2bc5ccaa..f554e1b288 100644
--- a/packages/icon/src/generated/X.tsx
+++ b/packages/icon/src/generated/X.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c4c4dba0474e43edea5bc9c3132850bb
+* @checksum 8151942a5dac836d8696a91c7a89ff25
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface XProps extends LGGlyph.ComponentProps {}
+
 const X = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: XProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'X', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'X', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={17} height={16} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M12.2028 3.40381C11.8123 3.01329 11.1791 3.01329 10.7886 3.40381L8.3137 5.87869L5.83883 3.40381C5.44831 3.01329 4.81514 3.01329 4.42462 3.40381L3.71751 4.11092C3.32699 4.50144 3.32699 5.13461 3.71751 5.52513L6.19238 8.00001L3.71751 10.4749C3.32699 10.8654 3.32699 11.4986 3.71751 11.8891L4.42462 12.5962C4.81514 12.9867 5.44831 12.9867 5.83883 12.5962L8.3137 10.1213L10.7886 12.5962C11.1791 12.9867 11.8123 12.9867 12.2028 12.5962L12.9099 11.8891C13.3004 11.4986 13.3004 10.8654 12.9099 10.4749L10.435 8.00001L12.9099 5.52513C13.3004 5.13461 13.3004 4.50144 12.9099 4.11092L12.2028 3.40381Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M12.2028 3.40381C11.8123 3.01329 11.1791 3.01329 10.7886 3.40381L8.3137 5.87869L5.83883 3.40381C5.44831 3.01329 4.81514 3.01329 4.42462 3.40381L3.71751 4.11092C3.32699 4.50144 3.32699 5.13461 3.71751 5.52513L6.19238 8.00001L3.71751 10.4749C3.32699 10.8654 3.32699 11.4986 3.71751 11.8891L4.42462 12.5962C4.81514 12.9867 5.44831 12.9867 5.83883 12.5962L8.3137 10.1213L10.7886 12.5962C11.1791 12.9867 11.8123 12.9867 12.2028 12.5962L12.9099 11.8891C13.3004 11.4986 13.3004 10.8654 12.9099 10.4749L10.435 8.00001L12.9099 5.52513C13.3004 5.13461 13.3004 4.50144 12.9099 4.11092L12.2028 3.40381Z" fill={'currentColor'} /></svg>;
 };
+
 X.displayName = 'X';
 X.isGlyph = true;
+
 export default X;
\ No newline at end of file
diff --git a/packages/icon/src/generated/XWithCircle.tsx b/packages/icon/src/generated/XWithCircle.tsx
index da225f3998..a4b555d26a 100644
--- a/packages/icon/src/generated/XWithCircle.tsx
+++ b/packages/icon/src/generated/XWithCircle.tsx
@@ -2,38 +2,58 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum be4d5840abf953589ffc2965feeb2bba
+* @checksum 97f819475ebfa1177135f285ed983ba5
 */
-import * as React from "react";
+import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
+
 export interface XWithCircleProps extends LGGlyph.ComponentProps {}
+
 const XWithCircle = ({
   className,
   size = 16,
   title,
-  ['aria-label']: ariaLabel,
-  ['aria-labelledby']: ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   fill,
   role = 'img',
   ...props
 }: XWithCircleProps) => {
   const fillStyle = css`
-        color: ${fill};
-      `;
+    color: ${fill};
+  `;
+
   const noFlexShrink = css`
-        flex-shrink: 0;
-      `;
-  const accessibleProps = generateAccessibleProps(role, 'XWithCircle', {
-    title,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby
+    flex-shrink: 0;
+  `;
+
+  const accessibleProps = generateAccessibleProps(role, 'XWithCircle', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9.41421 5.17157C9.80474 4.78105 10.4379 4.78105 10.8284 5.17157C11.219 5.5621 11.219 6.19526 10.8284 6.58579L9.41421 8L10.8284 9.41421C11.219 9.80474 11.219 10.4379 10.8284 10.8284C10.4379 11.219 9.80474 11.219 9.41421 10.8284L8 9.41421L6.58579 10.8284C6.19526 11.219 5.5621 11.219 5.17157 10.8284C4.78105 10.4379 4.78105 9.80474 5.17157 9.41421L6.58579 8L5.17157 6.58579C4.78105 6.19526 4.78105 5.5621 5.17157 5.17157C5.5621 4.78105 6.19526 4.78105 6.58579 5.17157L8 6.58579L9.41421 5.17157Z" fill="currentColor" /></svg>;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
   });
-  return <svg className={cx({
-    [fillStyle]: fill != null
-  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9.41421 5.17157C9.80474 4.78105 10.4379 4.78105 10.8284 5.17157C11.219 5.5621 11.219 6.19526 10.8284 6.58579L9.41421 8L10.8284 9.41421C11.219 9.80474 11.219 10.4379 10.8284 10.8284C10.4379 11.219 9.80474 11.219 9.41421 10.8284L8 9.41421L6.58579 10.8284C6.19526 11.219 5.5621 11.219 5.17157 10.8284C4.78105 10.4379 4.78105 9.80474 5.17157 9.41421L6.58579 8L5.17157 6.58579C4.78105 6.19526 4.78105 5.5621 5.17157 5.17157C5.5621 4.78105 6.19526 4.78105 6.58579 5.17157L8 6.58579L9.41421 5.17157Z" fill={'currentColor'} /></svg>;
 };
+
 XWithCircle.displayName = 'XWithCircle';
 XWithCircle.isGlyph = true;
+
 export default XWithCircle;
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 131b21f04a..83a37c7762 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1994,8 +1994,8 @@ importers:
         specifier: workspace:^
         version: link:../../tools/storybook-utils
       '@svgr/core':
-        specifier: ^5.3.1
-        version: 5.5.0
+        specifier: ^8.1.0
+        version: 8.1.0(typescript@5.8.3)
       '@types/xml2json':
         specifier: ^0.11.0
         version: 0.11.6
@@ -6150,70 +6150,42 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@svgr/babel-plugin-add-jsx-attribute@5.4.0':
-    resolution: {integrity: sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
     resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-remove-jsx-attribute@5.4.0':
-    resolution: {integrity: sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-remove-jsx-attribute@8.0.0':
     resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-remove-jsx-empty-expression@5.0.1':
-    resolution: {integrity: sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0':
     resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-replace-jsx-attribute-value@5.0.1':
-    resolution: {integrity: sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0':
     resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-svg-dynamic-title@5.4.0':
-    resolution: {integrity: sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-svg-dynamic-title@8.0.0':
     resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-svg-em-dimensions@5.4.0':
-    resolution: {integrity: sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-svg-em-dimensions@8.0.0':
     resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-transform-react-native-svg@5.4.0':
-    resolution: {integrity: sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-transform-react-native-svg@8.0.0':
     resolution: {integrity: sha512-UKrY3860AQICgH7g+6h2zkoxeVEPLYwX/uAjmqo4PIq2FIHppwhIqZstIyTz0ZtlwreKR41O3W3BzsBBiJV2Aw==}
     engines: {node: '>=14'}
@@ -6226,20 +6198,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-plugin-transform-svg-component@5.5.0':
-    resolution: {integrity: sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-plugin-transform-svg-component@8.0.0':
     resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==}
     engines: {node: '>=12'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/babel-preset@5.5.0':
-    resolution: {integrity: sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==}
-    engines: {node: '>=10'}
-
   '@svgr/babel-preset@8.0.0':
     resolution: {integrity: sha512-KLcjiZychInVrhs86OvcYPLTFu9L5XV2vj0XAaE1HwE3J3jLmIzRY8ttdeAg/iFyp8nhavJpafpDZTt+1LIpkQ==}
     engines: {node: '>=14'}
@@ -6257,10 +6221,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  '@svgr/core@5.5.0':
-    resolution: {integrity: sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==}
-    engines: {node: '>=10'}
-
   '@svgr/core@8.0.0':
     resolution: {integrity: sha512-aJKtc+Pie/rFYsVH/unSkDaZGvEeylNv/s2cP+ta9/rYWxRVvoV/S4Qw65Kmrtah4CBK5PM6ISH9qUH7IJQCng==}
     engines: {node: '>=14'}
@@ -6269,18 +6229,10 @@ packages:
     resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==}
     engines: {node: '>=14'}
 
-  '@svgr/hast-util-to-babel-ast@5.5.0':
-    resolution: {integrity: sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==}
-    engines: {node: '>=10'}
-
   '@svgr/hast-util-to-babel-ast@8.0.0':
     resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==}
     engines: {node: '>=14'}
 
-  '@svgr/plugin-jsx@5.5.0':
-    resolution: {integrity: sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==}
-    engines: {node: '>=10'}
-
   '@svgr/plugin-jsx@8.0.1':
     resolution: {integrity: sha512-bfCFb+4ZsM3UuKP2t7KmDwn6YV8qVn9HIQJmau6xeQb/iV65Rpi7NBNBWA2hcCd4GKoCqG8hpaaDk5FDR0eH+g==}
     engines: {node: '>=14'}
@@ -6604,14 +6556,14 @@ packages:
     peerDependencies:
       '@typescript-eslint/parser': ^8.44.0
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ~5.8.0
 
   '@typescript-eslint/parser@8.44.0':
     resolution: {integrity: sha512-VGMpFQGUQWYT9LfnPcX8ouFojyrZ/2w3K5BucvxL/spdNehccKhB4jUyB1yBCXpr2XFm0jkECxgrpXBW2ipoAw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ~5.8.0
 
   '@typescript-eslint/project-service@8.38.0':
     resolution: {integrity: sha512-dbK7Jvqcb8c9QfH01YB6pORpqX1mn5gDZc9n63Ak/+jD67oWXn3Gs0M6vddAN+eDXBCS5EmNWzbSxsn9SzFWWg==}
@@ -6623,7 +6575,7 @@ packages:
     resolution: {integrity: sha512-ZeaGNraRsq10GuEohKTo4295Z/SuGcSq2LzfGlqiuEvfArzo/VRrT0ZaJsVPuKZ55lVbNk8U6FcL+ZMH8CoyVA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ~5.8.0
 
   '@typescript-eslint/scope-manager@5.62.0':
     resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
@@ -6647,14 +6599,14 @@ packages:
     resolution: {integrity: sha512-x5Y0+AuEPqAInc6yd0n5DAcvtoQ/vyaGwuX5HE9n6qAefk1GaedqrLQF8kQGylLUb9pnZyLf+iEiL9fr8APDtQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ~5.8.0
 
   '@typescript-eslint/type-utils@8.44.0':
     resolution: {integrity: sha512-9cwsoSxJ8Sak67Be/hD2RNt/fsqmWnNE1iHohG8lxqLSNY8xNfyY7wloo5zpW3Nu9hxVgURevqfcH6vvKCt6yg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ~5.8.0
 
   '@typescript-eslint/types@5.62.0':
     resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
@@ -6687,7 +6639,7 @@ packages:
     resolution: {integrity: sha512-lqNj6SgnGcQZwL4/SBJ3xdPEfcBuhCG8zdcwCPgYcmiPLgokiNDKlbPzCwEwu7m279J/lBYWtDYL+87OEfn8Jw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: ~5.8.0
 
   '@typescript-eslint/utils@5.62.0':
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
@@ -6700,7 +6652,7 @@ packages:
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      typescript: ~5.8.0
 
   '@typescript-eslint/utils@8.44.0':
     resolution: {integrity: sha512-nktOlVcg3ALo0mYlV+L7sWUD58KG4CMj1rb2HUVOO4aL3K/6wcD+NERqd0rrA5Vg06b42YhF6cFxeixsp9Riqg==}
@@ -10745,12 +10697,6 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-api-utils@1.4.3:
-    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: ~5.8.0
-
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -14251,44 +14197,30 @@ snapshots:
     dependencies:
       storybook: 8.6.14(prettier@2.8.8)
 
-  '@svgr/babel-plugin-add-jsx-attribute@5.4.0': {}
-
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-plugin-remove-jsx-attribute@5.4.0': {}
-
   '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-plugin-remove-jsx-empty-expression@5.0.1': {}
-
   '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-plugin-replace-jsx-attribute-value@5.0.1': {}
-
   '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-plugin-svg-dynamic-title@5.4.0': {}
-
   '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-plugin-svg-em-dimensions@5.4.0': {}
-
   '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-plugin-transform-react-native-svg@5.4.0': {}
-
   '@svgr/babel-plugin-transform-react-native-svg@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
@@ -14297,23 +14229,10 @@ snapshots:
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-plugin-transform-svg-component@5.5.0': {}
-
   '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
 
-  '@svgr/babel-preset@5.5.0':
-    dependencies:
-      '@svgr/babel-plugin-add-jsx-attribute': 5.4.0
-      '@svgr/babel-plugin-remove-jsx-attribute': 5.4.0
-      '@svgr/babel-plugin-remove-jsx-empty-expression': 5.0.1
-      '@svgr/babel-plugin-replace-jsx-attribute-value': 5.0.1
-      '@svgr/babel-plugin-svg-dynamic-title': 5.4.0
-      '@svgr/babel-plugin-svg-em-dimensions': 5.4.0
-      '@svgr/babel-plugin-transform-react-native-svg': 5.4.0
-      '@svgr/babel-plugin-transform-svg-component': 5.5.0
-
   '@svgr/babel-preset@8.0.0(@babel/core@7.24.3)':
     dependencies:
       '@babel/core': 7.24.3
@@ -14354,14 +14273,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@svgr/core@5.5.0':
-    dependencies:
-      '@svgr/plugin-jsx': 5.5.0
-      camelcase: 6.3.0
-      cosmiconfig: 7.1.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@svgr/core@8.0.0(typescript@5.8.3)':
     dependencies:
       '@babel/core': 7.24.3
@@ -14384,24 +14295,11 @@ snapshots:
       - supports-color
       - typescript
 
-  '@svgr/hast-util-to-babel-ast@5.5.0':
-    dependencies:
-      '@babel/types': 7.28.1
-
   '@svgr/hast-util-to-babel-ast@8.0.0':
     dependencies:
       '@babel/types': 7.28.1
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@5.5.0':
-    dependencies:
-      '@babel/core': 7.24.3
-      '@svgr/babel-preset': 5.5.0
-      '@svgr/hast-util-to-babel-ast': 5.5.0
-      svg-parser: 2.0.4
-    transitivePeerDependencies:
-      - supports-color
-
   '@svgr/plugin-jsx@8.0.1(@svgr/core@8.0.0(typescript@5.8.3))':
     dependencies:
       '@babel/core': 7.24.3

From 283b678389e4bb205c2b54f5b26e2350f64cf5bc Mon Sep 17 00:00:00 2001
From: Brooke Scarlett Yalof <brooke.yalof@mongodb.com>
Date: Mon, 29 Sep 2025 12:12:27 -0400
Subject: [PATCH 2/4] Update packages/icon/scripts/prebuild/index.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/icon/scripts/prebuild/index.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/icon/scripts/prebuild/index.ts b/packages/icon/scripts/prebuild/index.ts
index 3ca3b83683..7e9b509959 100644
--- a/packages/icon/scripts/prebuild/index.ts
+++ b/packages/icon/scripts/prebuild/index.ts
@@ -203,7 +203,12 @@ export default $1;`,
       'packages/icon/' +
       path.relative(path.resolve(__dirname, process.cwd()), __filename);
 
-    const finalContent = customizedSVGR || processedSVGR;
+    if (customizedSVGR === null) {
+      throw new Error(
+        `Regex replacement failed for file "${file.name}.svg". The SVGR output could not be customized and would result in a broken icon component.`
+      );
+    }
+    const finalContent = customizedSVGR;
     const checksum = getChecksum(svgContent, finalContent);
 
     const outfilePath = path.resolve(outputDir, `${file.name}.tsx`);

From c157d9141c9a8993f2cdcc2d785d6061722421dd Mon Sep 17 00:00:00 2001
From: brooke <brooke.yalof@mongodb.com>
Date: Mon, 29 Sep 2025 15:59:50 -0400
Subject: [PATCH 3/4] run fix

---
 packages/icon/scripts/prebuild/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/icon/scripts/prebuild/index.ts b/packages/icon/scripts/prebuild/index.ts
index 7e9b509959..2451c4e4f6 100644
--- a/packages/icon/scripts/prebuild/index.ts
+++ b/packages/icon/scripts/prebuild/index.ts
@@ -205,9 +205,10 @@ export default $1;`,
 
     if (customizedSVGR === null) {
       throw new Error(
-        `Regex replacement failed for file "${file.name}.svg". The SVGR output could not be customized and would result in a broken icon component.`
+        `Regex replacement failed for file "${file.name}.svg". The SVGR output could not be customized and would result in a broken icon component.`,
       );
     }
+
     const finalContent = customizedSVGR;
     const checksum = getChecksum(svgContent, finalContent);
 

From 71635dc78e2d711f46cb73ec27b6dfee49531373 Mon Sep 17 00:00:00 2001
From: brooke <brooke.yalof@mongodb.com>
Date: Wed, 1 Oct 2025 12:43:25 -0400
Subject: [PATCH 4/4] responding to PR feedback

---
 packages/icon/scripts/prebuild/index.ts       | 65 ++---------------
 .../scripts/prebuild/leafyGreenTemplate.ts    | 69 +++++++++++++++++++
 packages/icon/src/generated/AIModel.tsx       |  2 +-
 packages/icon/src/generated/ActivityFeed.tsx  |  2 +-
 packages/icon/src/generated/AddFile.tsx       |  2 +-
 packages/icon/src/generated/AllProducts.tsx   |  2 +-
 packages/icon/src/generated/AnalyticsNode.tsx |  2 +-
 packages/icon/src/generated/Apps.tsx          |  2 +-
 packages/icon/src/generated/Array.tsx         |  2 +-
 packages/icon/src/generated/ArrowDown.tsx     |  2 +-
 packages/icon/src/generated/ArrowLeft.tsx     |  2 +-
 packages/icon/src/generated/ArrowRight.tsx    |  2 +-
 packages/icon/src/generated/ArrowUp.tsx       |  2 +-
 packages/icon/src/generated/Award.tsx         |  2 +-
 packages/icon/src/generated/Beaker.tsx        |  2 +-
 packages/icon/src/generated/Bell.tsx          |  2 +-
 packages/icon/src/generated/Biometric.tsx     |  2 +-
 packages/icon/src/generated/Boolean.tsx       |  2 +-
 packages/icon/src/generated/Building.tsx      |  2 +-
 packages/icon/src/generated/Bulb.tsx          |  2 +-
 packages/icon/src/generated/Calendar.tsx      |  2 +-
 packages/icon/src/generated/Camera.tsx        |  2 +-
 packages/icon/src/generated/Cap.tsx           |  2 +-
 packages/icon/src/generated/CaretDown.tsx     |  2 +-
 packages/icon/src/generated/CaretLeft.tsx     |  2 +-
 packages/icon/src/generated/CaretRight.tsx    |  2 +-
 packages/icon/src/generated/CaretUp.tsx       |  2 +-
 packages/icon/src/generated/ChartFilled.tsx   |  2 +-
 packages/icon/src/generated/Charts.tsx        |  2 +-
 packages/icon/src/generated/Checkmark.tsx     |  2 +-
 .../src/generated/CheckmarkWithCircle.tsx     |  2 +-
 packages/icon/src/generated/ChevronDown.tsx   |  2 +-
 packages/icon/src/generated/ChevronLeft.tsx   |  2 +-
 packages/icon/src/generated/ChevronRight.tsx  |  2 +-
 packages/icon/src/generated/ChevronUp.tsx     |  2 +-
 packages/icon/src/generated/Circle.tsx        |  2 +-
 packages/icon/src/generated/Clock.tsx         |  2 +-
 .../icon/src/generated/ClockWithArrow.tsx     |  2 +-
 packages/icon/src/generated/Clone.tsx         |  2 +-
 packages/icon/src/generated/Cloud.tsx         |  2 +-
 packages/icon/src/generated/Code.tsx          |  2 +-
 packages/icon/src/generated/CodeBlock.tsx     |  2 +-
 packages/icon/src/generated/Coin.tsx          |  2 +-
 packages/icon/src/generated/Colon.tsx         |  2 +-
 packages/icon/src/generated/Config.tsx        |  2 +-
 packages/icon/src/generated/Connect.tsx       |  2 +-
 packages/icon/src/generated/Copy.tsx          |  2 +-
 packages/icon/src/generated/CreditCard.tsx    |  2 +-
 packages/icon/src/generated/CurlyBraces.tsx   |  2 +-
 packages/icon/src/generated/Cursor.tsx        |  2 +-
 packages/icon/src/generated/Dashboard.tsx     |  2 +-
 packages/icon/src/generated/Database.tsx      |  2 +-
 packages/icon/src/generated/Diagram.tsx       |  2 +-
 packages/icon/src/generated/Diagram2.tsx      |  2 +-
 packages/icon/src/generated/Diagram3.tsx      |  2 +-
 packages/icon/src/generated/Disconnect.tsx    |  2 +-
 packages/icon/src/generated/Download.tsx      |  2 +-
 packages/icon/src/generated/Drag.tsx          |  2 +-
 packages/icon/src/generated/Edit.tsx          |  2 +-
 packages/icon/src/generated/Ellipsis.tsx      |  2 +-
 packages/icon/src/generated/Email.tsx         |  2 +-
 packages/icon/src/generated/EmptyDatabase.tsx |  2 +-
 packages/icon/src/generated/EmptyFolder.tsx   |  2 +-
 packages/icon/src/generated/Eraser.tsx        |  2 +-
 packages/icon/src/generated/Escalation.tsx    |  2 +-
 packages/icon/src/generated/Export.tsx        |  2 +-
 packages/icon/src/generated/Favorite.tsx      |  2 +-
 packages/icon/src/generated/Federation.tsx    |  2 +-
 packages/icon/src/generated/File.tsx          |  2 +-
 packages/icon/src/generated/Filter.tsx        |  2 +-
 packages/icon/src/generated/Folder.tsx        |  2 +-
 packages/icon/src/generated/Format.tsx        |  2 +-
 .../icon/src/generated/FullScreenEnter.tsx    |  2 +-
 .../icon/src/generated/FullScreenExit.tsx     |  2 +-
 packages/icon/src/generated/Function.tsx      |  2 +-
 packages/icon/src/generated/Gauge.tsx         |  2 +-
 packages/icon/src/generated/GlobeAmericas.tsx |  2 +-
 .../icon/src/generated/GovernmentBuilding.tsx |  2 +-
 packages/icon/src/generated/Guide.tsx         |  2 +-
 packages/icon/src/generated/Hash.tsx          |  2 +-
 .../src/generated/HiddenSecondaryNode.tsx     |  2 +-
 packages/icon/src/generated/Highlight.tsx     |  2 +-
 packages/icon/src/generated/Home.tsx          |  2 +-
 .../icon/src/generated/HorizontalDrag.tsx     |  2 +-
 packages/icon/src/generated/Import.tsx        |  2 +-
 .../src/generated/ImportantWithCircle.tsx     |  2 +-
 .../icon/src/generated/InfoWithCircle.tsx     |  2 +-
 .../icon/src/generated/InternalEmployee.tsx   |  2 +-
 packages/icon/src/generated/InviteUser.tsx    |  2 +-
 packages/icon/src/generated/Key.tsx           |  2 +-
 packages/icon/src/generated/Laptop.tsx        |  2 +-
 packages/icon/src/generated/LightningBolt.tsx |  2 +-
 packages/icon/src/generated/Link.tsx          |  2 +-
 packages/icon/src/generated/List.tsx          |  2 +-
 packages/icon/src/generated/Lock.tsx          |  2 +-
 packages/icon/src/generated/LogIn.tsx         |  2 +-
 packages/icon/src/generated/LogOut.tsx        |  2 +-
 .../icon/src/generated/MagnifyingGlass.tsx    |  2 +-
 packages/icon/src/generated/Megaphone.tsx     |  2 +-
 packages/icon/src/generated/Menu.tsx          |  2 +-
 packages/icon/src/generated/Minus.tsx         |  2 +-
 packages/icon/src/generated/Mobile.tsx        |  2 +-
 packages/icon/src/generated/Moon.tsx          |  2 +-
 .../src/generated/MultiDirectionArrow.tsx     |  2 +-
 packages/icon/src/generated/MultiLayers.tsx   |  2 +-
 packages/icon/src/generated/NavCollapse.tsx   |  2 +-
 packages/icon/src/generated/NavExpand.tsx     |  2 +-
 packages/icon/src/generated/NoFilter.tsx      |  2 +-
 packages/icon/src/generated/NotAllowed.tsx    |  2 +-
 packages/icon/src/generated/Note.tsx          |  2 +-
 packages/icon/src/generated/NumberedList.tsx  |  2 +-
 packages/icon/src/generated/OpenNewTab.tsx    |  2 +-
 .../icon/src/generated/OutlineFavorite.tsx    |  2 +-
 packages/icon/src/generated/Package.tsx       |  2 +-
 packages/icon/src/generated/Pause.tsx         |  2 +-
 packages/icon/src/generated/Pending.tsx       |  2 +-
 packages/icon/src/generated/Person.tsx        |  2 +-
 packages/icon/src/generated/PersonGroup.tsx   |  2 +-
 .../icon/src/generated/PersonWithLock.tsx     |  2 +-
 packages/icon/src/generated/Pin.tsx           |  2 +-
 packages/icon/src/generated/Play.tsx          |  2 +-
 packages/icon/src/generated/Plus.tsx          |  2 +-
 .../icon/src/generated/PlusWithCircle.tsx     |  2 +-
 packages/icon/src/generated/Primary.tsx       |  2 +-
 packages/icon/src/generated/Project.tsx       |  2 +-
 .../src/generated/QuestionMarkWithCircle.tsx  |  2 +-
 packages/icon/src/generated/Read.tsx          |  2 +-
 packages/icon/src/generated/Recommended.tsx   |  2 +-
 packages/icon/src/generated/Redo.tsx          |  2 +-
 packages/icon/src/generated/Refresh.tsx       |  2 +-
 packages/icon/src/generated/Relationship.tsx  |  2 +-
 packages/icon/src/generated/ReplicaSet.tsx    |  2 +-
 packages/icon/src/generated/Resize.tsx        |  2 +-
 packages/icon/src/generated/Resource.tsx      |  2 +-
 packages/icon/src/generated/Return.tsx        |  2 +-
 packages/icon/src/generated/Revert.tsx        |  2 +-
 packages/icon/src/generated/Router.tsx        |  2 +-
 packages/icon/src/generated/SMS.tsx           |  2 +-
 packages/icon/src/generated/Save.tsx          |  2 +-
 packages/icon/src/generated/SearchIndex.tsx   |  2 +-
 packages/icon/src/generated/Secondary.tsx     |  2 +-
 packages/icon/src/generated/Serverless.tsx    |  2 +-
 packages/icon/src/generated/Settings.tsx      |  2 +-
 .../icon/src/generated/ShardedCluster.tsx     |  2 +-
 packages/icon/src/generated/Shell.tsx         |  2 +-
 packages/icon/src/generated/Shield.tsx        |  2 +-
 packages/icon/src/generated/Shirt.tsx         |  2 +-
 packages/icon/src/generated/Shortcut.tsx      |  2 +-
 packages/icon/src/generated/SortAscending.tsx |  2 +-
 .../icon/src/generated/SortDescending.tsx     |  2 +-
 packages/icon/src/generated/Sparkle.tsx       |  2 +-
 .../icon/src/generated/SplitHorizontal.tsx    |  2 +-
 packages/icon/src/generated/SplitVertical.tsx |  2 +-
 packages/icon/src/generated/Stitch.tsx        |  2 +-
 packages/icon/src/generated/Stop.tsx          |  2 +-
 packages/icon/src/generated/Streaming.tsx     |  2 +-
 packages/icon/src/generated/String.tsx        |  2 +-
 packages/icon/src/generated/Sun.tsx           |  2 +-
 packages/icon/src/generated/Support.tsx       |  2 +-
 packages/icon/src/generated/Sweep.tsx         |  2 +-
 packages/icon/src/generated/Table.tsx         |  2 +-
 packages/icon/src/generated/Tag.tsx           |  2 +-
 .../icon/src/generated/TemporaryTable.tsx     |  2 +-
 packages/icon/src/generated/ThumbsDown.tsx    |  2 +-
 packages/icon/src/generated/ThumbsUp.tsx      |  2 +-
 packages/icon/src/generated/TimeSeries.tsx    |  2 +-
 .../src/generated/TimeSeriesCollection.tsx    |  2 +-
 packages/icon/src/generated/Trash.tsx         |  2 +-
 packages/icon/src/generated/Undo.tsx          |  2 +-
 packages/icon/src/generated/University.tsx    |  2 +-
 packages/icon/src/generated/Unlock.tsx        |  2 +-
 packages/icon/src/generated/Unsorted.tsx      |  2 +-
 packages/icon/src/generated/UpDownCarets.tsx  |  2 +-
 packages/icon/src/generated/Upload.tsx        |  2 +-
 .../icon/src/generated/VerticalEllipsis.tsx   |  2 +-
 packages/icon/src/generated/View.tsx          |  2 +-
 packages/icon/src/generated/Visibility.tsx    |  2 +-
 packages/icon/src/generated/VisibilityOff.tsx |  2 +-
 packages/icon/src/generated/Warning.tsx       |  2 +-
 packages/icon/src/generated/Wizard.tsx        |  2 +-
 packages/icon/src/generated/Wrench.tsx        |  2 +-
 packages/icon/src/generated/Write.tsx         |  2 +-
 packages/icon/src/generated/X.tsx             |  2 +-
 packages/icon/src/generated/XWithCircle.tsx   |  2 +-
 184 files changed, 256 insertions(+), 242 deletions(-)
 create mode 100644 packages/icon/scripts/prebuild/leafyGreenTemplate.ts

diff --git a/packages/icon/scripts/prebuild/index.ts b/packages/icon/scripts/prebuild/index.ts
index 2451c4e4f6..7d3dea25c0 100644
--- a/packages/icon/scripts/prebuild/index.ts
+++ b/packages/icon/scripts/prebuild/index.ts
@@ -7,6 +7,7 @@ import path from 'path';
 
 import { getChecksum } from './checksum';
 import { indexTemplate } from './indexTemplate';
+import { applyLeafyGreenTemplate } from './leafyGreenTemplate';
 import { FileObject, PrebuildOptions } from './prebuild.types';
 
 const SRC_PATH = path.resolve(__dirname, '..', '..', 'src');
@@ -141,71 +142,15 @@ function makeFileProcessor(outputDir: string, options?: PrebuildOptions) {
       { componentName: file.name },
     );
 
-    // Post-process to add custom LeafyGreen wrapper
-    const customizedSVGR = processedSVGR.replace(
-      /import \* as React from "react";\nimport type \{ SVGProps \} from "react";\nconst (\w+) = \(props: SVGProps<SVGSVGElement>\) => (.*?);\nexport default \1;/s,
-      `import * as React from 'react';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { generateAccessibleProps, sizeMap } from '../glyphCommon';
-import { LGGlyph } from '../types';
-
-export interface $1Props extends LGGlyph.ComponentProps {}
-
-const $1 = ({
-  className,
-  size = 16,
-  title,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledby,
-  fill,
-  role = 'img',
-  ...props
-}: $1Props) => {
-  const fillStyle = css\`
-    color: \${fill};
-  \`;
-
-  const noFlexShrink = css\`
-    flex-shrink: 0;
-  \`;
-
-  const accessibleProps = generateAccessibleProps(role, '$1', { 
-    title, 
-    'aria-label': ariaLabel, 
-    'aria-labelledby': ariaLabelledby 
-  });
-
-  const svgElement = $2;
-
-  return React.cloneElement(svgElement, {
-    className: cx(
-      {
-        [fillStyle]: fill != null,
-      },
-      noFlexShrink,
-      className,
-    ),
-    height: typeof size === 'number' ? size : sizeMap[size],
-    width: typeof size === 'number' ? size : sizeMap[size],
-    role,
-    ...accessibleProps,
-    ...props,
-  });
-};
-
-$1.displayName = '$1';
-$1.isGlyph = true;
-
-export default $1;`,
-    );
-
+    // Apply custom LeafyGreen wrapper using template
+    const customizedSVGR = applyLeafyGreenTemplate(processedSVGR, file.name);
     const scriptPath =
       'packages/icon/' +
       path.relative(path.resolve(__dirname, process.cwd()), __filename);
 
-    if (customizedSVGR === null) {
+    if (!customizedSVGR) {
       throw new Error(
-        `Regex replacement failed for file "${file.name}.svg". The SVGR output could not be customized and would result in a broken icon component.`,
+        `SVGR transformation failed for file "${file.name}.svg". The component could not be generated.`,
       );
     }
 
diff --git a/packages/icon/scripts/prebuild/leafyGreenTemplate.ts b/packages/icon/scripts/prebuild/leafyGreenTemplate.ts
new file mode 100644
index 0000000000..b0d22fc8ea
--- /dev/null
+++ b/packages/icon/scripts/prebuild/leafyGreenTemplate.ts
@@ -0,0 +1,69 @@
+/**
+ * LeafyGreen template transformation for SVGR-generated components
+ * This replaces the previous inline regex with a more maintainable template approach
+ */
+
+export function applyLeafyGreenTemplate(
+  svgrOutput: string,
+  componentName: string,
+): string {
+  // This pattern matches the standard SVGR TypeScript output structure
+  const svgrPattern =
+    /import \* as React from "react";\nimport type \{ SVGProps \} from "react";\nconst (\w+) = \(props: SVGProps<SVGSVGElement>\) => (.*?);\nexport default \1;/s;
+
+  const leafyGreenTemplate = `import * as React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+
+export interface $1Props extends LGGlyph.ComponentProps {}
+
+const $1 = ({
+  className,
+  size = 16,
+  title,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: $1Props) => {
+  const fillStyle = css\`
+    color: \${fill};
+  \`;
+
+  const noFlexShrink = css\`
+    flex-shrink: 0;
+  \`;
+
+  const accessibleProps = generateAccessibleProps(role, '${componentName}', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = $2;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
+  });
+};
+
+$1.displayName = '${componentName}';
+$1.isGlyph = true;
+
+export default $1;`;
+
+  return svgrOutput.replace(svgrPattern, leafyGreenTemplate);
+}
diff --git a/packages/icon/src/generated/AIModel.tsx b/packages/icon/src/generated/AIModel.tsx
index 146d5c8f8e..92e209a8ec 100644
--- a/packages/icon/src/generated/AIModel.tsx
+++ b/packages/icon/src/generated/AIModel.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b1565b6a8cc976654fe8825255b35ade
+* @checksum 1cad73a378c611b7580027d1cec09474
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ActivityFeed.tsx b/packages/icon/src/generated/ActivityFeed.tsx
index d15c8e4462..826e54071b 100644
--- a/packages/icon/src/generated/ActivityFeed.tsx
+++ b/packages/icon/src/generated/ActivityFeed.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9e3ed49fd95300c4db96ff45d3c5d0ed
+* @checksum 8a5c143838d876dbd1d32f77d08e5b75
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/AddFile.tsx b/packages/icon/src/generated/AddFile.tsx
index 82ecfbf5bd..2b50c3afa7 100644
--- a/packages/icon/src/generated/AddFile.tsx
+++ b/packages/icon/src/generated/AddFile.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a32fe4bc24d1d06940e8ad5b4759ca90
+* @checksum 553a7a167fe1c152635e25230b7744a2
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/AllProducts.tsx b/packages/icon/src/generated/AllProducts.tsx
index 7328b62914..93a3b9b025 100644
--- a/packages/icon/src/generated/AllProducts.tsx
+++ b/packages/icon/src/generated/AllProducts.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 82e659690fa9df7d45ffab92ea74f2d2
+* @checksum d86367020ded8e6aff9aaf7071b9c20d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/AnalyticsNode.tsx b/packages/icon/src/generated/AnalyticsNode.tsx
index ad8181499a..ffaddfabba 100644
--- a/packages/icon/src/generated/AnalyticsNode.tsx
+++ b/packages/icon/src/generated/AnalyticsNode.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0f78dc3016a5dfcc4c834e28fc886fc8
+* @checksum cab473dd0ce3e78859a42b626c0c08f5
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Apps.tsx b/packages/icon/src/generated/Apps.tsx
index 5466df1363..d91957ce6b 100644
--- a/packages/icon/src/generated/Apps.tsx
+++ b/packages/icon/src/generated/Apps.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 80f4c527f038cd8fbe383f7f092904c8
+* @checksum d80196960ac35e9eaad5787d77d85048
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Array.tsx b/packages/icon/src/generated/Array.tsx
index 8878abf29a..337f5990db 100644
--- a/packages/icon/src/generated/Array.tsx
+++ b/packages/icon/src/generated/Array.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e698630955b15ff74135249e3d785085
+* @checksum cd40d74d0108475bfb381fd4b8d38b77
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ArrowDown.tsx b/packages/icon/src/generated/ArrowDown.tsx
index 5ffaa2fd8b..bdd8db772d 100644
--- a/packages/icon/src/generated/ArrowDown.tsx
+++ b/packages/icon/src/generated/ArrowDown.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1d38f19bad05cbf5fd063565aec8ac7f
+* @checksum 4b677b2d2f00d5c0a02e6e14f0681b33
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ArrowLeft.tsx b/packages/icon/src/generated/ArrowLeft.tsx
index 812daa4086..58bbd851d0 100644
--- a/packages/icon/src/generated/ArrowLeft.tsx
+++ b/packages/icon/src/generated/ArrowLeft.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9e636cdf4b9dc5618600f933b1c14c26
+* @checksum 9de52840eb63e4212da5711e4041256b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ArrowRight.tsx b/packages/icon/src/generated/ArrowRight.tsx
index c07b45d202..ebea923f1f 100644
--- a/packages/icon/src/generated/ArrowRight.tsx
+++ b/packages/icon/src/generated/ArrowRight.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e27715f2d8871b82dc2e58f26758f03e
+* @checksum 05983c0369270e0162f9babc3f539601
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ArrowUp.tsx b/packages/icon/src/generated/ArrowUp.tsx
index 3ce7ff1ead..382c9999d9 100644
--- a/packages/icon/src/generated/ArrowUp.tsx
+++ b/packages/icon/src/generated/ArrowUp.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bbdcd6cc340ceffd3ba19f4d214a8e3d
+* @checksum 79712a264c060fb7c54d63d3f7bd0a80
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Award.tsx b/packages/icon/src/generated/Award.tsx
index c84d7754da..65929ffe59 100644
--- a/packages/icon/src/generated/Award.tsx
+++ b/packages/icon/src/generated/Award.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5fc35f531fa72646021ec013c3e47285
+* @checksum 6015a4b3d077c7facb05208077975fb4
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Beaker.tsx b/packages/icon/src/generated/Beaker.tsx
index 0ba4795ff7..6b0834542a 100644
--- a/packages/icon/src/generated/Beaker.tsx
+++ b/packages/icon/src/generated/Beaker.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 896c982d51a7557c82d3198e2a06fdde
+* @checksum bd8b00f3adf76af427efadaea6b6ee6d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Bell.tsx b/packages/icon/src/generated/Bell.tsx
index f526a25b62..aa04ff0a75 100644
--- a/packages/icon/src/generated/Bell.tsx
+++ b/packages/icon/src/generated/Bell.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7f2b8d3bd1e5e9f9b6797bd4a2773a97
+* @checksum 4ec4b34d85b140505a487488046f5f5b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Biometric.tsx b/packages/icon/src/generated/Biometric.tsx
index 03171cf970..21d620a0a4 100644
--- a/packages/icon/src/generated/Biometric.tsx
+++ b/packages/icon/src/generated/Biometric.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 56cd3920c12120fa82e83da32ec4d76b
+* @checksum 32f3f885ba91f06459f0651de8e3d90f
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Boolean.tsx b/packages/icon/src/generated/Boolean.tsx
index e375f2b3b8..08daacd911 100644
--- a/packages/icon/src/generated/Boolean.tsx
+++ b/packages/icon/src/generated/Boolean.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eb50c8689347217f62e42fdab024fcb2
+* @checksum fa7dcef9fa9579ae72e9755b0588747c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Building.tsx b/packages/icon/src/generated/Building.tsx
index c067aaceaa..6e2bdab7e9 100644
--- a/packages/icon/src/generated/Building.tsx
+++ b/packages/icon/src/generated/Building.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 09c08da572e2f70a35ce65ca09f4f9f3
+* @checksum 367b82813983c5e0cdd61bb5c6bc552a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Bulb.tsx b/packages/icon/src/generated/Bulb.tsx
index e2399e2e34..990563dda0 100644
--- a/packages/icon/src/generated/Bulb.tsx
+++ b/packages/icon/src/generated/Bulb.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 01a18b28d71adbc717736589886bb930
+* @checksum d3ce85d0a4debf4b23823cc0e39fd5b4
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Calendar.tsx b/packages/icon/src/generated/Calendar.tsx
index 3eade8012c..5772e27ae0 100644
--- a/packages/icon/src/generated/Calendar.tsx
+++ b/packages/icon/src/generated/Calendar.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 8cedeea29c00f7829d8c21a1f4ad344c
+* @checksum 0af7f3a6d5db9ea5f5f591edbe7ef155
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Camera.tsx b/packages/icon/src/generated/Camera.tsx
index d322335cfc..346c9cfcc8 100644
--- a/packages/icon/src/generated/Camera.tsx
+++ b/packages/icon/src/generated/Camera.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 29e8feab0e20f78a47f4f950aac0a2e5
+* @checksum 4286c1a9c8f5aaeebcc17ce7999fa6b7
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Cap.tsx b/packages/icon/src/generated/Cap.tsx
index 7387960666..3f8f4e85d4 100644
--- a/packages/icon/src/generated/Cap.tsx
+++ b/packages/icon/src/generated/Cap.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e5e388e26ee943034846238c8348ce27
+* @checksum d0f956b4b5b73cbbc638163b1b96296c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CaretDown.tsx b/packages/icon/src/generated/CaretDown.tsx
index b1e0aa3f03..39ab3ab320 100644
--- a/packages/icon/src/generated/CaretDown.tsx
+++ b/packages/icon/src/generated/CaretDown.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d76a42b4bda3b14a89c2a331f1b18a1a
+* @checksum 0ee10e8620b33e7798815265798a7f7c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CaretLeft.tsx b/packages/icon/src/generated/CaretLeft.tsx
index ff7b29fe30..2940bb0cac 100644
--- a/packages/icon/src/generated/CaretLeft.tsx
+++ b/packages/icon/src/generated/CaretLeft.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum aa2cf9cc9aba76ef98aa3a7fc9027dbb
+* @checksum f435497e885cdb96397ef4c90c4f101c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CaretRight.tsx b/packages/icon/src/generated/CaretRight.tsx
index 46ef1ee4eb..abcbb77da4 100644
--- a/packages/icon/src/generated/CaretRight.tsx
+++ b/packages/icon/src/generated/CaretRight.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 17c0b289eda7b133019afc3f4ecd9aac
+* @checksum 7dbb54c99ecc190f26d23fd00e639410
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CaretUp.tsx b/packages/icon/src/generated/CaretUp.tsx
index 14d028b009..d66bed98e7 100644
--- a/packages/icon/src/generated/CaretUp.tsx
+++ b/packages/icon/src/generated/CaretUp.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a58b38a5f30c0ea17cd53ef325b11bfb
+* @checksum 9698ce5c46a96ac2899accdf99c69f47
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ChartFilled.tsx b/packages/icon/src/generated/ChartFilled.tsx
index f7bb14cd6e..5fe6b5dea5 100644
--- a/packages/icon/src/generated/ChartFilled.tsx
+++ b/packages/icon/src/generated/ChartFilled.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2072f115e3eee30d21a61c93e2852de0
+* @checksum e426db21a253cc832f29d7cd5a63ddd9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Charts.tsx b/packages/icon/src/generated/Charts.tsx
index d37b1a4139..61a10d00c3 100644
--- a/packages/icon/src/generated/Charts.tsx
+++ b/packages/icon/src/generated/Charts.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e461e1fe8e4917d6824b6bf3987372a3
+* @checksum 501579c48a92285378545648ee00e98c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Checkmark.tsx b/packages/icon/src/generated/Checkmark.tsx
index cc89c0b052..71b4a0deab 100644
--- a/packages/icon/src/generated/Checkmark.tsx
+++ b/packages/icon/src/generated/Checkmark.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 81750f71cde8eaedefead268c26a2ead
+* @checksum 15b013d7a68f92a6a6593efad5445c3a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CheckmarkWithCircle.tsx b/packages/icon/src/generated/CheckmarkWithCircle.tsx
index 77ecfdadc8..5612d49d49 100644
--- a/packages/icon/src/generated/CheckmarkWithCircle.tsx
+++ b/packages/icon/src/generated/CheckmarkWithCircle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6cf44df4218b587f40c79278019b1481
+* @checksum 7755997a62a7d62d2c11cfe12b3f03bb
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ChevronDown.tsx b/packages/icon/src/generated/ChevronDown.tsx
index 4a97202951..6f49dad9db 100644
--- a/packages/icon/src/generated/ChevronDown.tsx
+++ b/packages/icon/src/generated/ChevronDown.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum beb6b957e7648df0f85f7dedac0c3b6d
+* @checksum 91e3b568abfd98c174d87fcb18476187
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ChevronLeft.tsx b/packages/icon/src/generated/ChevronLeft.tsx
index a609e6a878..bcca96b086 100644
--- a/packages/icon/src/generated/ChevronLeft.tsx
+++ b/packages/icon/src/generated/ChevronLeft.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 07b56ed992e4a9003e8165edf8da37e3
+* @checksum 54f7e3a2d7e1800e09873c2edacbcc0b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ChevronRight.tsx b/packages/icon/src/generated/ChevronRight.tsx
index 10517d515a..9edbec206e 100644
--- a/packages/icon/src/generated/ChevronRight.tsx
+++ b/packages/icon/src/generated/ChevronRight.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a0c6ffafc84573887fa4d5d3481cd41a
+* @checksum 633ebae58ca5d8f55e21c16534e33a7d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ChevronUp.tsx b/packages/icon/src/generated/ChevronUp.tsx
index 4a5243611f..9f494fa763 100644
--- a/packages/icon/src/generated/ChevronUp.tsx
+++ b/packages/icon/src/generated/ChevronUp.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 84c45abb0ccb8941a760633a6bb67b36
+* @checksum 6c02f92090c932956565ba754a09a4f4
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Circle.tsx b/packages/icon/src/generated/Circle.tsx
index 39974de786..6f473ac7bf 100644
--- a/packages/icon/src/generated/Circle.tsx
+++ b/packages/icon/src/generated/Circle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum db9a774b0503f55260428a2ec81db14c
+* @checksum c6276a8c3b34facf3d0a81a76d694d5e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Clock.tsx b/packages/icon/src/generated/Clock.tsx
index bea04608bf..a252381d1f 100644
--- a/packages/icon/src/generated/Clock.tsx
+++ b/packages/icon/src/generated/Clock.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 642c56f82ffce9fa09ae0568dec0d726
+* @checksum b83855f2488c228ca7d18a7c23b50e3c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ClockWithArrow.tsx b/packages/icon/src/generated/ClockWithArrow.tsx
index bf39cc72c7..5d7dee8a2c 100644
--- a/packages/icon/src/generated/ClockWithArrow.tsx
+++ b/packages/icon/src/generated/ClockWithArrow.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b00c5cd4a22378150711205b5e1b3ff8
+* @checksum 5a1aab3286bb30e8f080c44e1807307b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Clone.tsx b/packages/icon/src/generated/Clone.tsx
index 16efb12c23..d97cdc4547 100644
--- a/packages/icon/src/generated/Clone.tsx
+++ b/packages/icon/src/generated/Clone.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 850dac53b0905f4e0f683179eda6fe4d
+* @checksum 8cbf2087d8eae67a6684aa8573eddadb
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Cloud.tsx b/packages/icon/src/generated/Cloud.tsx
index 4e04ca2913..e4f9fc5987 100644
--- a/packages/icon/src/generated/Cloud.tsx
+++ b/packages/icon/src/generated/Cloud.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 434c0c7540d613023b36bf0bdff6da78
+* @checksum a4fbcb2e5b6f76e5804517117ca8cbbf
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Code.tsx b/packages/icon/src/generated/Code.tsx
index 4827e18d93..7dc295a58f 100644
--- a/packages/icon/src/generated/Code.tsx
+++ b/packages/icon/src/generated/Code.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum be59bec38f0a49c5817704820003b084
+* @checksum 8d65892771d79950463655b1121532a3
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CodeBlock.tsx b/packages/icon/src/generated/CodeBlock.tsx
index d44bde9ab5..cd6df70068 100644
--- a/packages/icon/src/generated/CodeBlock.tsx
+++ b/packages/icon/src/generated/CodeBlock.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3ef832e185478dc8f01e61e1bfaa4df8
+* @checksum ab1d67d7ee69f182b1da745695d5446a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Coin.tsx b/packages/icon/src/generated/Coin.tsx
index 3b707aa154..9accaa3930 100644
--- a/packages/icon/src/generated/Coin.tsx
+++ b/packages/icon/src/generated/Coin.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cd5a4604cdbba480464f0aa6a6579974
+* @checksum b2aab030b843b7ff070280345da35954
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Colon.tsx b/packages/icon/src/generated/Colon.tsx
index ca5e909b66..a8597d085a 100644
--- a/packages/icon/src/generated/Colon.tsx
+++ b/packages/icon/src/generated/Colon.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0da19b04e372be9da1106a635cd2d45e
+* @checksum bde7a2f94341c869dc608021bf680108
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Config.tsx b/packages/icon/src/generated/Config.tsx
index 2c774e50b5..fe2cfda2a0 100644
--- a/packages/icon/src/generated/Config.tsx
+++ b/packages/icon/src/generated/Config.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9dd3318e8e32f8c41dd7e41665788cba
+* @checksum b2343ebd96eb676baf33f8a647dfc1a9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Connect.tsx b/packages/icon/src/generated/Connect.tsx
index 6f61a91f4c..b9270f3ca4 100644
--- a/packages/icon/src/generated/Connect.tsx
+++ b/packages/icon/src/generated/Connect.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ee44cbad088bf315d888bb72b4b42852
+* @checksum 3e41895139488b58d92ae22fbb6baaeb
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Copy.tsx b/packages/icon/src/generated/Copy.tsx
index 789fa2e8f8..e9d76cfdd0 100644
--- a/packages/icon/src/generated/Copy.tsx
+++ b/packages/icon/src/generated/Copy.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 05bc1b863da3c29cd86c4b92515d801e
+* @checksum 7ecdf832b916c06b9e7efa3914eb7189
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CreditCard.tsx b/packages/icon/src/generated/CreditCard.tsx
index 5da62f0fae..29572111b2 100644
--- a/packages/icon/src/generated/CreditCard.tsx
+++ b/packages/icon/src/generated/CreditCard.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 89831e72e3fc7ce0adb76d157a62bfe5
+* @checksum 95a44fce150cfd8b062496455122a251
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/CurlyBraces.tsx b/packages/icon/src/generated/CurlyBraces.tsx
index 0f95482542..bd73c550d3 100644
--- a/packages/icon/src/generated/CurlyBraces.tsx
+++ b/packages/icon/src/generated/CurlyBraces.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5cd76e271d1b186f17261ebc3cb22c16
+* @checksum 61aa80c59ef94acf365cfe6d4f3365a0
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Cursor.tsx b/packages/icon/src/generated/Cursor.tsx
index 8ed0b2a0e1..6dd56840ab 100644
--- a/packages/icon/src/generated/Cursor.tsx
+++ b/packages/icon/src/generated/Cursor.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a4914ab6b85f7b3a04c9eaeb81388c3d
+* @checksum c10ebdf9f426ef7bbb6e99839927f61b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Dashboard.tsx b/packages/icon/src/generated/Dashboard.tsx
index 3264b76713..2947261f06 100644
--- a/packages/icon/src/generated/Dashboard.tsx
+++ b/packages/icon/src/generated/Dashboard.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b57e16ee6552fb5ac8613fcfc5abd183
+* @checksum f17220fba0764e381224a31681b48043
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Database.tsx b/packages/icon/src/generated/Database.tsx
index 30524f5fa5..51efa306aa 100644
--- a/packages/icon/src/generated/Database.tsx
+++ b/packages/icon/src/generated/Database.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 97d636fb325ed66c2014825473b41cbe
+* @checksum e99ae882241935f63e7a3b85080fdde2
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Diagram.tsx b/packages/icon/src/generated/Diagram.tsx
index 8859f2521e..b2d8a88aad 100644
--- a/packages/icon/src/generated/Diagram.tsx
+++ b/packages/icon/src/generated/Diagram.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6d2227a5fce6c5b63afab25b9eee86be
+* @checksum fd41d6c28a4423f4b2105ee21a5f235f
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Diagram2.tsx b/packages/icon/src/generated/Diagram2.tsx
index 4cdb1e312c..a386c0ac57 100644
--- a/packages/icon/src/generated/Diagram2.tsx
+++ b/packages/icon/src/generated/Diagram2.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c7a1538f0229e2bb7e7db91f9f730a87
+* @checksum d20a9ff8980d98dd0b7883b61b9000a9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Diagram3.tsx b/packages/icon/src/generated/Diagram3.tsx
index 506874303f..6332eb5ef6 100644
--- a/packages/icon/src/generated/Diagram3.tsx
+++ b/packages/icon/src/generated/Diagram3.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4e59864826a26bef6f48f41eb551bf2e
+* @checksum 8ca32451ecdecae2cb5f34711aecd28f
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Disconnect.tsx b/packages/icon/src/generated/Disconnect.tsx
index 7ef70600d5..598e096f53 100644
--- a/packages/icon/src/generated/Disconnect.tsx
+++ b/packages/icon/src/generated/Disconnect.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b4881dbd1a37df3987969bf30d9550fc
+* @checksum 4c475fc1ac3017783fe922ab6c094f6e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Download.tsx b/packages/icon/src/generated/Download.tsx
index 3ae9b5627f..f8909ec3ab 100644
--- a/packages/icon/src/generated/Download.tsx
+++ b/packages/icon/src/generated/Download.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 15abd9cd2d76b7a08454f6a5664a03eb
+* @checksum 1e0d17b60923384c452d5521840b284f
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Drag.tsx b/packages/icon/src/generated/Drag.tsx
index 6c4e2843a3..a8e8545bc3 100644
--- a/packages/icon/src/generated/Drag.tsx
+++ b/packages/icon/src/generated/Drag.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f1b3653489d1a861ece13c11208d242b
+* @checksum 56873e900c6c0cff58d0853128f4b1a4
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Edit.tsx b/packages/icon/src/generated/Edit.tsx
index 18e5d977c2..28892b1d00 100644
--- a/packages/icon/src/generated/Edit.tsx
+++ b/packages/icon/src/generated/Edit.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9800ec8300fa1b929f132fdf4fe32cbe
+* @checksum a5f9c0bc58f720421a0ff7fe41d86f4d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Ellipsis.tsx b/packages/icon/src/generated/Ellipsis.tsx
index 3e6855c075..a600afa527 100644
--- a/packages/icon/src/generated/Ellipsis.tsx
+++ b/packages/icon/src/generated/Ellipsis.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9c4a3a05dd66f272132321ee5274ecf1
+* @checksum 859957dc8d45e13cad90e169bfbcc43c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Email.tsx b/packages/icon/src/generated/Email.tsx
index c88bad7350..aedcfb65ce 100644
--- a/packages/icon/src/generated/Email.tsx
+++ b/packages/icon/src/generated/Email.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 10618a5a29b58ab33dca9152fa8c430c
+* @checksum db97edd04bb548740cb82ecb71109d3e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/EmptyDatabase.tsx b/packages/icon/src/generated/EmptyDatabase.tsx
index 179310366b..ecb94e5110 100644
--- a/packages/icon/src/generated/EmptyDatabase.tsx
+++ b/packages/icon/src/generated/EmptyDatabase.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5fc98bf5c4985c91316dfeeca0d0b1a4
+* @checksum 8c54ad2d31b0cc506a8c94d0d5d8cb75
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/EmptyFolder.tsx b/packages/icon/src/generated/EmptyFolder.tsx
index 654eaf6fc0..3485d6482e 100644
--- a/packages/icon/src/generated/EmptyFolder.tsx
+++ b/packages/icon/src/generated/EmptyFolder.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum aec21676700ca7ba61ad7ff95f62929c
+* @checksum b039aaa1b4269c60216c428079bcb6f5
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Eraser.tsx b/packages/icon/src/generated/Eraser.tsx
index f6a3a92efc..f7550ea9f9 100644
--- a/packages/icon/src/generated/Eraser.tsx
+++ b/packages/icon/src/generated/Eraser.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cb354d8fbd33bfc38d5681e6d5c59e96
+* @checksum 34bad17994ff10be78ae3ebbd9238495
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Escalation.tsx b/packages/icon/src/generated/Escalation.tsx
index e6c8a7ee15..5dcfe26e3e 100644
--- a/packages/icon/src/generated/Escalation.tsx
+++ b/packages/icon/src/generated/Escalation.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ba20b2b995b4ee6d8def5918751ed0b9
+* @checksum 71682afdd3c96a10b5e26ca7e6c7c966
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Export.tsx b/packages/icon/src/generated/Export.tsx
index c4df8515a2..bafe65d1d6 100644
--- a/packages/icon/src/generated/Export.tsx
+++ b/packages/icon/src/generated/Export.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6e15f7d51898214ae82f63f4314e1daf
+* @checksum 4b2cbef62681838e27008914cf28f52b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Favorite.tsx b/packages/icon/src/generated/Favorite.tsx
index 6aa2e26385..c4b0e7f80e 100644
--- a/packages/icon/src/generated/Favorite.tsx
+++ b/packages/icon/src/generated/Favorite.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7ea20aa0e2d1e0a4bdb94d1ee83e1d9b
+* @checksum 9cabe1eceb74379b112e0d486259c350
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Federation.tsx b/packages/icon/src/generated/Federation.tsx
index 2a8409ea76..f6bf0b54d1 100644
--- a/packages/icon/src/generated/Federation.tsx
+++ b/packages/icon/src/generated/Federation.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum aab4618c8279f52edfe088aa78b3b02d
+* @checksum eb273b00a528f1967faed5b19cfae03a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/File.tsx b/packages/icon/src/generated/File.tsx
index 8d7f9e06d6..a73f09cd55 100644
--- a/packages/icon/src/generated/File.tsx
+++ b/packages/icon/src/generated/File.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 245338732cd9707d91e0e7e1e78b5dae
+* @checksum 0b792f04258a3ab6dbf316967122a998
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Filter.tsx b/packages/icon/src/generated/Filter.tsx
index 8f1e530b5f..b6a3281cec 100644
--- a/packages/icon/src/generated/Filter.tsx
+++ b/packages/icon/src/generated/Filter.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1cc18bf75b74f7da69313598c23cadfc
+* @checksum 317e92c99b5443db48b5ff26337fb5f6
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Folder.tsx b/packages/icon/src/generated/Folder.tsx
index e3099641db..85e3732fca 100644
--- a/packages/icon/src/generated/Folder.tsx
+++ b/packages/icon/src/generated/Folder.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6501d5acde9f811b76a7e39ff4bfd4d9
+* @checksum bf7f0d850e5e42b5fe06467fbec7bd4c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Format.tsx b/packages/icon/src/generated/Format.tsx
index 53e4d11bf3..6912c9c7b7 100644
--- a/packages/icon/src/generated/Format.tsx
+++ b/packages/icon/src/generated/Format.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 479a608c9e60aac8654e2ef50c0a8b50
+* @checksum 0271fe866ec7659a1bee154db8ff465d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/FullScreenEnter.tsx b/packages/icon/src/generated/FullScreenEnter.tsx
index eb3b86d16a..8c7f7a4fb6 100644
--- a/packages/icon/src/generated/FullScreenEnter.tsx
+++ b/packages/icon/src/generated/FullScreenEnter.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4cdf202af84d50946e3631fa550eb877
+* @checksum d1a9f384871c0d6c25479c6a2311b03b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/FullScreenExit.tsx b/packages/icon/src/generated/FullScreenExit.tsx
index 9f38f43e9f..91eba34965 100644
--- a/packages/icon/src/generated/FullScreenExit.tsx
+++ b/packages/icon/src/generated/FullScreenExit.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c73afd418de2b4edd25df4fa141cacc8
+* @checksum 694d5fa1ffdf4ff9acb51748252ca35f
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Function.tsx b/packages/icon/src/generated/Function.tsx
index 28ce86d50a..d6dd6e1b08 100644
--- a/packages/icon/src/generated/Function.tsx
+++ b/packages/icon/src/generated/Function.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 362c7b14efc762eb8ed5ad8f72263072
+* @checksum 541074158f5528dd6ac08ab6fb420882
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Gauge.tsx b/packages/icon/src/generated/Gauge.tsx
index 1ec51911d6..12f0233e1f 100644
--- a/packages/icon/src/generated/Gauge.tsx
+++ b/packages/icon/src/generated/Gauge.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a54e29cdbf75d525cc0fe959ee10e5a7
+* @checksum 9e2e088f8e7aee3c3e8ec3e8eedbf9aa
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/GlobeAmericas.tsx b/packages/icon/src/generated/GlobeAmericas.tsx
index 59312d625a..7bdd6a5fc0 100644
--- a/packages/icon/src/generated/GlobeAmericas.tsx
+++ b/packages/icon/src/generated/GlobeAmericas.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7843f7af52c35fd61aec10fad710431a
+* @checksum 6b0849e3805015e3eacaa22089f83238
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/GovernmentBuilding.tsx b/packages/icon/src/generated/GovernmentBuilding.tsx
index 8dc55730e5..827a9d7f2e 100644
--- a/packages/icon/src/generated/GovernmentBuilding.tsx
+++ b/packages/icon/src/generated/GovernmentBuilding.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3240d8ea9e88cfa999d0e2c45af97ccf
+* @checksum 79b89ff4b75ea5744c661fad39cb1e47
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Guide.tsx b/packages/icon/src/generated/Guide.tsx
index 384fc86a74..12b4aed1ff 100644
--- a/packages/icon/src/generated/Guide.tsx
+++ b/packages/icon/src/generated/Guide.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f096e57c87038f55bb8941280482cef8
+* @checksum ad29a2e29732d63db1cac64d3dcbe316
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Hash.tsx b/packages/icon/src/generated/Hash.tsx
index da70db3723..b0985d1fda 100644
--- a/packages/icon/src/generated/Hash.tsx
+++ b/packages/icon/src/generated/Hash.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1c43e830456f56af3f2ffcde1b9f92ba
+* @checksum 26a23e1147e9c49db004661b688165d0
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/HiddenSecondaryNode.tsx b/packages/icon/src/generated/HiddenSecondaryNode.tsx
index cc345b05c4..c4ecd561b9 100644
--- a/packages/icon/src/generated/HiddenSecondaryNode.tsx
+++ b/packages/icon/src/generated/HiddenSecondaryNode.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 637d660f59d85a28f869a5d36a2a5c33
+* @checksum f268a7619e02860b91c0055706800a4e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Highlight.tsx b/packages/icon/src/generated/Highlight.tsx
index 5b4c3d87f6..684e7282e3 100644
--- a/packages/icon/src/generated/Highlight.tsx
+++ b/packages/icon/src/generated/Highlight.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fa250ab7be1fa21da7944d51c541b9f7
+* @checksum 0bcd709620bc32f235cefa2608a98b06
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Home.tsx b/packages/icon/src/generated/Home.tsx
index 57924d694d..d18cd9750f 100644
--- a/packages/icon/src/generated/Home.tsx
+++ b/packages/icon/src/generated/Home.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum dfc85fb73ab2b916b40a4201071ce10d
+* @checksum 60b75def6f180dcb2c5f055a1ca51851
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/HorizontalDrag.tsx b/packages/icon/src/generated/HorizontalDrag.tsx
index 89dda888f7..231c38fc9a 100644
--- a/packages/icon/src/generated/HorizontalDrag.tsx
+++ b/packages/icon/src/generated/HorizontalDrag.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c84f75a98974e66062c821a933d9277a
+* @checksum 52898d904f271dd08abaf04b69b3a968
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Import.tsx b/packages/icon/src/generated/Import.tsx
index 5ef3eb6ed2..07709fc72e 100644
--- a/packages/icon/src/generated/Import.tsx
+++ b/packages/icon/src/generated/Import.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3a51a8564d34312914a81ad98dea20b1
+* @checksum 6fd191e6238e9efdba5a7420387b7239
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ImportantWithCircle.tsx b/packages/icon/src/generated/ImportantWithCircle.tsx
index b2e1a95a72..3686128c2f 100644
--- a/packages/icon/src/generated/ImportantWithCircle.tsx
+++ b/packages/icon/src/generated/ImportantWithCircle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3de6f832766faa639f152d9f7c0118d2
+* @checksum c41443bfb06844a8d7cd0e7451eb18dc
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/InfoWithCircle.tsx b/packages/icon/src/generated/InfoWithCircle.tsx
index 117e2956cc..e52f512273 100644
--- a/packages/icon/src/generated/InfoWithCircle.tsx
+++ b/packages/icon/src/generated/InfoWithCircle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 76c82549dbb99ec9f9d6fe2cb927be3a
+* @checksum c68efa25569c3dd0e86ef85459824096
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/InternalEmployee.tsx b/packages/icon/src/generated/InternalEmployee.tsx
index f75245ffd5..5dfff31482 100644
--- a/packages/icon/src/generated/InternalEmployee.tsx
+++ b/packages/icon/src/generated/InternalEmployee.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2238319a7963113cd83458b8658a18dc
+* @checksum f4299e6797bcb1282da3e7e66c8af156
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/InviteUser.tsx b/packages/icon/src/generated/InviteUser.tsx
index 64724dbe11..08494ea8c8 100644
--- a/packages/icon/src/generated/InviteUser.tsx
+++ b/packages/icon/src/generated/InviteUser.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 00984a133941c8bea1d796a623258461
+* @checksum b241dabfeffdff880913ea3b3f16cbf2
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Key.tsx b/packages/icon/src/generated/Key.tsx
index 1666c6b1d9..d01357baed 100644
--- a/packages/icon/src/generated/Key.tsx
+++ b/packages/icon/src/generated/Key.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d0539b47f82d21c0cad322c8e1ef348f
+* @checksum 2295e264b93c33b8ce7d8d6a7b31d029
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Laptop.tsx b/packages/icon/src/generated/Laptop.tsx
index 1dab80b44b..7c6209ec13 100644
--- a/packages/icon/src/generated/Laptop.tsx
+++ b/packages/icon/src/generated/Laptop.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2a1b662e7a76ba7fd6598263391878ba
+* @checksum 7f62b90760364927c577303085138bb9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/LightningBolt.tsx b/packages/icon/src/generated/LightningBolt.tsx
index 83ba7016d0..dcd052c49a 100644
--- a/packages/icon/src/generated/LightningBolt.tsx
+++ b/packages/icon/src/generated/LightningBolt.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e9acb14400d94009ae919c93d32a71aa
+* @checksum b07e942b161ddbbfbfbff05ba218b7ae
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Link.tsx b/packages/icon/src/generated/Link.tsx
index 4e58ddcb67..ce0cbd43be 100644
--- a/packages/icon/src/generated/Link.tsx
+++ b/packages/icon/src/generated/Link.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 64f1100bd5e6d502086b90222fc02f37
+* @checksum d398d0162237187b51ebc9b2b1a394a3
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/List.tsx b/packages/icon/src/generated/List.tsx
index 8083d85889..9a3999d216 100644
--- a/packages/icon/src/generated/List.tsx
+++ b/packages/icon/src/generated/List.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a73cfb1ca8759a6613fecd113af85c72
+* @checksum e199827bd7c2afe8d75b00e09f8c8a31
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Lock.tsx b/packages/icon/src/generated/Lock.tsx
index a1589e4ecf..712ff2bdd1 100644
--- a/packages/icon/src/generated/Lock.tsx
+++ b/packages/icon/src/generated/Lock.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2dd67a2ddfa31d99db10fdc75c8c687a
+* @checksum 860d222413a531ffbdb92528893a8972
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/LogIn.tsx b/packages/icon/src/generated/LogIn.tsx
index 98c521d270..90aa1f0c20 100644
--- a/packages/icon/src/generated/LogIn.tsx
+++ b/packages/icon/src/generated/LogIn.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b80cdfc6208e753838b316794bc4f9bd
+* @checksum 0e3bd08bc8df35a84eeb55a36a84e207
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/LogOut.tsx b/packages/icon/src/generated/LogOut.tsx
index ccd9ac2684..8d93f68662 100644
--- a/packages/icon/src/generated/LogOut.tsx
+++ b/packages/icon/src/generated/LogOut.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c017abb15a76d71c93f8a19a4723f19e
+* @checksum 06fdda2ff662559d9f4ef4d119d74ab9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/MagnifyingGlass.tsx b/packages/icon/src/generated/MagnifyingGlass.tsx
index e04f882e27..a56d614cea 100644
--- a/packages/icon/src/generated/MagnifyingGlass.tsx
+++ b/packages/icon/src/generated/MagnifyingGlass.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9fe12e764e73dba7752bb42008bdce13
+* @checksum 6d6905b73a2b0309c324a5359d4a2b3f
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Megaphone.tsx b/packages/icon/src/generated/Megaphone.tsx
index c3296a63cd..899af40db8 100644
--- a/packages/icon/src/generated/Megaphone.tsx
+++ b/packages/icon/src/generated/Megaphone.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d295916bd016e42fbcd1d1511d362250
+* @checksum f68d0b129fd0bd5d0c4220e1494726ca
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Menu.tsx b/packages/icon/src/generated/Menu.tsx
index 707c2b287d..b838fd161c 100644
--- a/packages/icon/src/generated/Menu.tsx
+++ b/packages/icon/src/generated/Menu.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 23a1d0e1565c8761e97fc6bd20ab968b
+* @checksum d9f6c687a2e82b6fc52d927ecd82ba62
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Minus.tsx b/packages/icon/src/generated/Minus.tsx
index 2f1f019439..76b7161a2e 100644
--- a/packages/icon/src/generated/Minus.tsx
+++ b/packages/icon/src/generated/Minus.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 045136e0c7436d7f4971c60515a6a866
+* @checksum 68db315fd321a9e6b8b1f9e8f59d3d5c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Mobile.tsx b/packages/icon/src/generated/Mobile.tsx
index 47b80ced9f..93c1369231 100644
--- a/packages/icon/src/generated/Mobile.tsx
+++ b/packages/icon/src/generated/Mobile.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d7bc3c5d766090ac44cd1ce535317746
+* @checksum d3398aaecc9841b16ebbcc4a0962e049
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Moon.tsx b/packages/icon/src/generated/Moon.tsx
index e3e753d3f3..a51469a6b1 100644
--- a/packages/icon/src/generated/Moon.tsx
+++ b/packages/icon/src/generated/Moon.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 8622ec0fd3c15186158212375fbc1e5b
+* @checksum 2266aa19260d58d17706c53780354f86
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/MultiDirectionArrow.tsx b/packages/icon/src/generated/MultiDirectionArrow.tsx
index 47d71d012f..43a6d495cc 100644
--- a/packages/icon/src/generated/MultiDirectionArrow.tsx
+++ b/packages/icon/src/generated/MultiDirectionArrow.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 360ede32ca7094f6c97ad65452f501c8
+* @checksum 3924c26902cb2f7408ea66d3a55b8e84
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/MultiLayers.tsx b/packages/icon/src/generated/MultiLayers.tsx
index d03ce0e137..872cf45a91 100644
--- a/packages/icon/src/generated/MultiLayers.tsx
+++ b/packages/icon/src/generated/MultiLayers.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2ca2b2894a5ade52d4a7e9254eb7fbfd
+* @checksum 4418a61487b21022b147e017eab34e4d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/NavCollapse.tsx b/packages/icon/src/generated/NavCollapse.tsx
index 583320be7e..32c70be0d5 100644
--- a/packages/icon/src/generated/NavCollapse.tsx
+++ b/packages/icon/src/generated/NavCollapse.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 89c6487c6f757f3a370e43f4d6f0d67f
+* @checksum d4a3ffeef3a67a423730efe1da3e89ef
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/NavExpand.tsx b/packages/icon/src/generated/NavExpand.tsx
index f6f04644c9..6fee7ebfbd 100644
--- a/packages/icon/src/generated/NavExpand.tsx
+++ b/packages/icon/src/generated/NavExpand.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9d62ee5fcab55c2ca552833d0fd65f03
+* @checksum e99c7e8a9b1d538250b23192bb69447a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/NoFilter.tsx b/packages/icon/src/generated/NoFilter.tsx
index f59b5cacad..4586dc1a6d 100644
--- a/packages/icon/src/generated/NoFilter.tsx
+++ b/packages/icon/src/generated/NoFilter.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1738881a6bd905d6e3a8c2cfe09b4a55
+* @checksum a639456f8e2089b92815486814891b4e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/NotAllowed.tsx b/packages/icon/src/generated/NotAllowed.tsx
index 812eb33af2..7a6dae40ba 100644
--- a/packages/icon/src/generated/NotAllowed.tsx
+++ b/packages/icon/src/generated/NotAllowed.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5a9f9dbf1618f1886cef05d4b9b53973
+* @checksum 91a0bc5c436e72c209042016a784603c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Note.tsx b/packages/icon/src/generated/Note.tsx
index b83f4a4213..86594f7cd1 100644
--- a/packages/icon/src/generated/Note.tsx
+++ b/packages/icon/src/generated/Note.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 03a906c9edb5242fd9907c4d31d62562
+* @checksum 94e69e5f5b35ba30c565bec2ea884ba9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/NumberedList.tsx b/packages/icon/src/generated/NumberedList.tsx
index af6f1631d5..b41993cc7f 100644
--- a/packages/icon/src/generated/NumberedList.tsx
+++ b/packages/icon/src/generated/NumberedList.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cce136c4768cdd44d5cfc2e908d1e2bd
+* @checksum 2da453e058cc200ccd37c015cb096304
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/OpenNewTab.tsx b/packages/icon/src/generated/OpenNewTab.tsx
index 8a2bb162cd..8cd23d5da3 100644
--- a/packages/icon/src/generated/OpenNewTab.tsx
+++ b/packages/icon/src/generated/OpenNewTab.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6be5ff635691e84fb92789fb9eeb188a
+* @checksum 90cd227bdb795b58518478bbfc3cb75a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/OutlineFavorite.tsx b/packages/icon/src/generated/OutlineFavorite.tsx
index 20ea78520e..99e2a16cbd 100644
--- a/packages/icon/src/generated/OutlineFavorite.tsx
+++ b/packages/icon/src/generated/OutlineFavorite.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 208883290a110c1c35d500e396038c6c
+* @checksum ab4a3bfbbfb86a77450f49b19c6e146b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Package.tsx b/packages/icon/src/generated/Package.tsx
index a5c4e5d883..ba7c34fea4 100644
--- a/packages/icon/src/generated/Package.tsx
+++ b/packages/icon/src/generated/Package.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d216fbe66a3ac12123612f3ab4a85875
+* @checksum 424ff6d2d6c8fbeebc6fa65f06b3e3eb
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Pause.tsx b/packages/icon/src/generated/Pause.tsx
index e32cb10c18..9f866d89d1 100644
--- a/packages/icon/src/generated/Pause.tsx
+++ b/packages/icon/src/generated/Pause.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7a5584a8db5b88f005880f749ca177d4
+* @checksum b4fe44eea74ada2f2576c89890f93ec7
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Pending.tsx b/packages/icon/src/generated/Pending.tsx
index e4285162aa..58ccbe64d9 100644
--- a/packages/icon/src/generated/Pending.tsx
+++ b/packages/icon/src/generated/Pending.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1420faf3123421e2ec72d8bdfb39e033
+* @checksum d15da55c53adc414bd15ed7de322180c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Person.tsx b/packages/icon/src/generated/Person.tsx
index 295bd459ff..a2163cd793 100644
--- a/packages/icon/src/generated/Person.tsx
+++ b/packages/icon/src/generated/Person.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b19a92bebbfc288c0fdb6ad27a99e828
+* @checksum e5a0d3de4722a6d8040d4d6a69ca9a5a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/PersonGroup.tsx b/packages/icon/src/generated/PersonGroup.tsx
index 98d20402ba..f902de5ff7 100644
--- a/packages/icon/src/generated/PersonGroup.tsx
+++ b/packages/icon/src/generated/PersonGroup.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum dfc56f118bad85b0732af97c1bdb6b68
+* @checksum 6c2bbf247f63568ba928067de9b03e5b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/PersonWithLock.tsx b/packages/icon/src/generated/PersonWithLock.tsx
index d7ead34bf1..bbdd6cf9cb 100644
--- a/packages/icon/src/generated/PersonWithLock.tsx
+++ b/packages/icon/src/generated/PersonWithLock.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4660ef6a407fb68888d9c2caddf63c9f
+* @checksum ee56a308df616358a7a679926e26dca2
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Pin.tsx b/packages/icon/src/generated/Pin.tsx
index 708c5c470d..c2fcf253e0 100644
--- a/packages/icon/src/generated/Pin.tsx
+++ b/packages/icon/src/generated/Pin.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a5b5fbaa27181e6157a2a58a0cca80b2
+* @checksum 6d7f5054724aab1565d1449008e26f1d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Play.tsx b/packages/icon/src/generated/Play.tsx
index 4f7e913668..592083d615 100644
--- a/packages/icon/src/generated/Play.tsx
+++ b/packages/icon/src/generated/Play.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 498a74f490187c194f8130eced491cba
+* @checksum f9f10b587957573d07b90a1960ec7766
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Plus.tsx b/packages/icon/src/generated/Plus.tsx
index 0908d1f389..eff77a0014 100644
--- a/packages/icon/src/generated/Plus.tsx
+++ b/packages/icon/src/generated/Plus.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9b6d47ad9ab993f38db8181f07b18eac
+* @checksum 2e2b8439e7991804a9fef5cec2d3b458
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/PlusWithCircle.tsx b/packages/icon/src/generated/PlusWithCircle.tsx
index 665d405864..b57b44929b 100644
--- a/packages/icon/src/generated/PlusWithCircle.tsx
+++ b/packages/icon/src/generated/PlusWithCircle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 48baedacefa9f6816ccb6e0c8bdb6f78
+* @checksum d17c48f801983d6aea352551565c6452
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Primary.tsx b/packages/icon/src/generated/Primary.tsx
index 336a652c62..43637a64f9 100644
--- a/packages/icon/src/generated/Primary.tsx
+++ b/packages/icon/src/generated/Primary.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5d4b5318c7eed8289f7a06728d8c409b
+* @checksum a055e1a3a91635a32c480924bb944faa
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Project.tsx b/packages/icon/src/generated/Project.tsx
index be2bb33d69..c4167b66f7 100644
--- a/packages/icon/src/generated/Project.tsx
+++ b/packages/icon/src/generated/Project.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f056b244df0d37d50de27e1a23487f40
+* @checksum 94cf4db64a6f425f9cb975b45cac8a14
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/QuestionMarkWithCircle.tsx b/packages/icon/src/generated/QuestionMarkWithCircle.tsx
index fda8f15102..7fb9384d88 100644
--- a/packages/icon/src/generated/QuestionMarkWithCircle.tsx
+++ b/packages/icon/src/generated/QuestionMarkWithCircle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cf27f0b9cb8f509d4ce23c0d0f04b880
+* @checksum c8fe0e8d2fd4eb917d1baa1983a137f1
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Read.tsx b/packages/icon/src/generated/Read.tsx
index 2669d1c1fa..e2eb4f47bd 100644
--- a/packages/icon/src/generated/Read.tsx
+++ b/packages/icon/src/generated/Read.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 653a836bd45bd9ee9f5bb7697ebf66bd
+* @checksum e68a17d7ed08583b8711f5aa0a12cab6
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Recommended.tsx b/packages/icon/src/generated/Recommended.tsx
index 11b75014ad..66f7efceb2 100644
--- a/packages/icon/src/generated/Recommended.tsx
+++ b/packages/icon/src/generated/Recommended.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c5f6e5b791662110f37bc077212fbb1a
+* @checksum 9de28bb9f91abf110a7689b652d7345a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Redo.tsx b/packages/icon/src/generated/Redo.tsx
index 638f60427d..eac28b5154 100644
--- a/packages/icon/src/generated/Redo.tsx
+++ b/packages/icon/src/generated/Redo.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum aecffb2f0e970799ad3c2bd7ddc11d25
+* @checksum 5c174b76a68806bc8c4fa2ffd57dd6d7
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Refresh.tsx b/packages/icon/src/generated/Refresh.tsx
index 7125f9c596..9d32085076 100644
--- a/packages/icon/src/generated/Refresh.tsx
+++ b/packages/icon/src/generated/Refresh.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2c4a4852ad7c4ab4babe8f7979bb9b21
+* @checksum 4694b60f5f38cadec9bc7022d8f636c1
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Relationship.tsx b/packages/icon/src/generated/Relationship.tsx
index cba6c16cac..e3295dce9d 100644
--- a/packages/icon/src/generated/Relationship.tsx
+++ b/packages/icon/src/generated/Relationship.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4973db5faf925a11cf942e0252b43201
+* @checksum caa88f070a3c4b51f71f607c5d4a706e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ReplicaSet.tsx b/packages/icon/src/generated/ReplicaSet.tsx
index b248c4ea33..0580b12dd3 100644
--- a/packages/icon/src/generated/ReplicaSet.tsx
+++ b/packages/icon/src/generated/ReplicaSet.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7dcc773a0bbca1712ac418198a607b31
+* @checksum 4b799e960450e2df74d7ad54fed8f22b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Resize.tsx b/packages/icon/src/generated/Resize.tsx
index 66778ed7b0..453ee4d06a 100644
--- a/packages/icon/src/generated/Resize.tsx
+++ b/packages/icon/src/generated/Resize.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f2b8fef4d0d9526e5950f2b63e5a9c7f
+* @checksum 32fdfef922bde063dc18916253502e46
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Resource.tsx b/packages/icon/src/generated/Resource.tsx
index 40e393ade6..8f0fd246d7 100644
--- a/packages/icon/src/generated/Resource.tsx
+++ b/packages/icon/src/generated/Resource.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ac15c121adc3fb2cd1aef50c8fe9d221
+* @checksum ac9aafa15004ada7986c574cd842bcb8
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Return.tsx b/packages/icon/src/generated/Return.tsx
index 1fe110360f..55f966bdd4 100644
--- a/packages/icon/src/generated/Return.tsx
+++ b/packages/icon/src/generated/Return.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0a6d5eea28b8b28795f5f95cf8b0ac4e
+* @checksum 5706193633679892a4fb9a0c92db86f3
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Revert.tsx b/packages/icon/src/generated/Revert.tsx
index b51004d831..87604c1a86 100644
--- a/packages/icon/src/generated/Revert.tsx
+++ b/packages/icon/src/generated/Revert.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ab2b366ba615915d4da3ef6f0d7c94dc
+* @checksum 5ddf2d02684e1b9cf7643b2168ae9a40
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Router.tsx b/packages/icon/src/generated/Router.tsx
index b4682755c4..1c4d2fc02a 100644
--- a/packages/icon/src/generated/Router.tsx
+++ b/packages/icon/src/generated/Router.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7ae1f7eddce6727bc906059b4e7d931f
+* @checksum 3a35e0ef854d61541a6d58500f955a72
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/SMS.tsx b/packages/icon/src/generated/SMS.tsx
index ee331d7878..005fbba829 100644
--- a/packages/icon/src/generated/SMS.tsx
+++ b/packages/icon/src/generated/SMS.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 8423889f6df038586a2f3ec7e33eeb45
+* @checksum 331de50bc11e6914a9d69867491d2e93
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Save.tsx b/packages/icon/src/generated/Save.tsx
index be000b9dea..db62af4285 100644
--- a/packages/icon/src/generated/Save.tsx
+++ b/packages/icon/src/generated/Save.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9411c2752a656a90086bac45690aea21
+* @checksum 97169083b74a1a72314a49561b2607a9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/SearchIndex.tsx b/packages/icon/src/generated/SearchIndex.tsx
index d5a21ef99d..3dc7e614c4 100644
--- a/packages/icon/src/generated/SearchIndex.tsx
+++ b/packages/icon/src/generated/SearchIndex.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 64bd94ea0fa76853657b2aba29733933
+* @checksum a1471861f88ea70ac370d0b804f2f884
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Secondary.tsx b/packages/icon/src/generated/Secondary.tsx
index 499ee531e6..b2b39bd40a 100644
--- a/packages/icon/src/generated/Secondary.tsx
+++ b/packages/icon/src/generated/Secondary.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9d4e9a9d137b881c1a1438ddaf39122f
+* @checksum 094b3d9b3f860d0fbf21f9cd86c2c79e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Serverless.tsx b/packages/icon/src/generated/Serverless.tsx
index 92503b1ef4..83101f86c6 100644
--- a/packages/icon/src/generated/Serverless.tsx
+++ b/packages/icon/src/generated/Serverless.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a14a3b0d2ba38e4e7e33653539280cc6
+* @checksum 24a612c216c6fbd0e8865559aa6fb82a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Settings.tsx b/packages/icon/src/generated/Settings.tsx
index a5f4994782..7bca37bdd1 100644
--- a/packages/icon/src/generated/Settings.tsx
+++ b/packages/icon/src/generated/Settings.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 491d0012ddde040519ba12c038553ac9
+* @checksum 410fbf5b0c4a0b48f0757eea50b152f5
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ShardedCluster.tsx b/packages/icon/src/generated/ShardedCluster.tsx
index 56ccb8678c..7ed22cf5ef 100644
--- a/packages/icon/src/generated/ShardedCluster.tsx
+++ b/packages/icon/src/generated/ShardedCluster.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c83bc43f12c1a7c88dce3f186ee8561b
+* @checksum 91a0aa20ab74a163c07e419c7e4e45c5
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Shell.tsx b/packages/icon/src/generated/Shell.tsx
index ec32ab3db2..97ce405170 100644
--- a/packages/icon/src/generated/Shell.tsx
+++ b/packages/icon/src/generated/Shell.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2952b655c4715659a46d72ae5ffca739
+* @checksum dfb92887ffa6116574e24fd2469bf2c4
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Shield.tsx b/packages/icon/src/generated/Shield.tsx
index 495b1703cf..a35e8a1f4b 100644
--- a/packages/icon/src/generated/Shield.tsx
+++ b/packages/icon/src/generated/Shield.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3a462a4cc139bb585787a62a74b28410
+* @checksum e037b1584a000fb31c972f29c0acfcf6
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Shirt.tsx b/packages/icon/src/generated/Shirt.tsx
index 51d43a80cd..b9953d3c36 100644
--- a/packages/icon/src/generated/Shirt.tsx
+++ b/packages/icon/src/generated/Shirt.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ad208ac2a0dcf4c053737af22770cd62
+* @checksum bb598c730e9aa4ccc0792b655db46c61
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Shortcut.tsx b/packages/icon/src/generated/Shortcut.tsx
index dd73114d59..9a2557727c 100644
--- a/packages/icon/src/generated/Shortcut.tsx
+++ b/packages/icon/src/generated/Shortcut.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ceca83e8f08a28f4a1f467a88f5700b3
+* @checksum 3703255eeededb78242ceee0a650f23e
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/SortAscending.tsx b/packages/icon/src/generated/SortAscending.tsx
index e4dfe92249..37435ac01b 100644
--- a/packages/icon/src/generated/SortAscending.tsx
+++ b/packages/icon/src/generated/SortAscending.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e29a9cd318c16f6f7f8d79a1d12a4ba3
+* @checksum 5704ff971b64fe7642b38c22ea31e9bb
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/SortDescending.tsx b/packages/icon/src/generated/SortDescending.tsx
index 3945807c93..417887a718 100644
--- a/packages/icon/src/generated/SortDescending.tsx
+++ b/packages/icon/src/generated/SortDescending.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bbdffa99d2b8a8f52fe9b48d488f407d
+* @checksum 20530ea466c203438701d2af7e697108
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Sparkle.tsx b/packages/icon/src/generated/Sparkle.tsx
index 34e6f19bbb..49aa37c9dc 100644
--- a/packages/icon/src/generated/Sparkle.tsx
+++ b/packages/icon/src/generated/Sparkle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 40c480abbb0303f323a355c3c7eca0b6
+* @checksum 51e3af7737262db13e92e034633b56a5
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/SplitHorizontal.tsx b/packages/icon/src/generated/SplitHorizontal.tsx
index 92febf4d7f..4003c08980 100644
--- a/packages/icon/src/generated/SplitHorizontal.tsx
+++ b/packages/icon/src/generated/SplitHorizontal.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c9945622c9783716fe99eb60f0a8fcad
+* @checksum 8c6d8cc848e0d77156c7ce816dd5f29a
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/SplitVertical.tsx b/packages/icon/src/generated/SplitVertical.tsx
index 1c34991a97..1f492e8136 100644
--- a/packages/icon/src/generated/SplitVertical.tsx
+++ b/packages/icon/src/generated/SplitVertical.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b765029b22fd724c194d4cd5909fb705
+* @checksum 0803e4b4af93a8905661332bd80f7ffa
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Stitch.tsx b/packages/icon/src/generated/Stitch.tsx
index 45e6c822ec..d870efa071 100644
--- a/packages/icon/src/generated/Stitch.tsx
+++ b/packages/icon/src/generated/Stitch.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0da8e953dba6cfb827a229b40513ec18
+* @checksum 4926fa37adf1de198fa7e1e2504aaf89
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Stop.tsx b/packages/icon/src/generated/Stop.tsx
index bf225c63a8..de43487e75 100644
--- a/packages/icon/src/generated/Stop.tsx
+++ b/packages/icon/src/generated/Stop.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 207f1116ab19327e434e024dc76546ff
+* @checksum 2ed516b54934c91e9bbc96ced8907df5
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Streaming.tsx b/packages/icon/src/generated/Streaming.tsx
index d0f1e7b6fc..e638c064f2 100644
--- a/packages/icon/src/generated/Streaming.tsx
+++ b/packages/icon/src/generated/Streaming.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 228d68eff48e031805f3e67bdadb0a28
+* @checksum 2fa535c0b73a189518d29477d14be420
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/String.tsx b/packages/icon/src/generated/String.tsx
index 9b00f86fcb..8104cf9900 100644
--- a/packages/icon/src/generated/String.tsx
+++ b/packages/icon/src/generated/String.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 59f803ce24c775cc778ab61167206e81
+* @checksum 97965947d3de6877e5b1e7356e8c3479
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Sun.tsx b/packages/icon/src/generated/Sun.tsx
index db5e22dbb7..d7b94bc831 100644
--- a/packages/icon/src/generated/Sun.tsx
+++ b/packages/icon/src/generated/Sun.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 34c4c8c0ac270660b7a2c13fbaa6b390
+* @checksum 4152d54b1fb1fc5c0381f6664e326bb3
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Support.tsx b/packages/icon/src/generated/Support.tsx
index 614b857d64..23c756de77 100644
--- a/packages/icon/src/generated/Support.tsx
+++ b/packages/icon/src/generated/Support.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c5af6115b646f1a83a4c8e53d7be2eaf
+* @checksum e4e4466ce49251008066fb6af95bae5c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Sweep.tsx b/packages/icon/src/generated/Sweep.tsx
index 6a3d5653f9..4ccb44459f 100644
--- a/packages/icon/src/generated/Sweep.tsx
+++ b/packages/icon/src/generated/Sweep.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 65bb7db7cc604f2c8d3978981ba04541
+* @checksum 1be192da645a9683cdee06f5abe4be95
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Table.tsx b/packages/icon/src/generated/Table.tsx
index 8ffab868ed..4de0996449 100644
--- a/packages/icon/src/generated/Table.tsx
+++ b/packages/icon/src/generated/Table.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0160de820c7c58f776c5047aa35a1d21
+* @checksum 89efaed5815b4acd89b37d5d34086168
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Tag.tsx b/packages/icon/src/generated/Tag.tsx
index 10959a1c1b..8d34b23fe0 100644
--- a/packages/icon/src/generated/Tag.tsx
+++ b/packages/icon/src/generated/Tag.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1c3d5527444a51d8e2b0c9b2a4218149
+* @checksum b883ee56c7e175eda45ef619e9be26c9
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/TemporaryTable.tsx b/packages/icon/src/generated/TemporaryTable.tsx
index 6b2b3983d9..4174ed0b24 100644
--- a/packages/icon/src/generated/TemporaryTable.tsx
+++ b/packages/icon/src/generated/TemporaryTable.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2ac6468188f8e3f96e5a0df76126f519
+* @checksum 6dfb9daacef8f38cb2052c0a0e9b46c2
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ThumbsDown.tsx b/packages/icon/src/generated/ThumbsDown.tsx
index b5a162814b..700ccb56cc 100644
--- a/packages/icon/src/generated/ThumbsDown.tsx
+++ b/packages/icon/src/generated/ThumbsDown.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ac56b0d448135214f43a036d4920ca31
+* @checksum e3103f59b86a18a931111f1cae4f5620
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/ThumbsUp.tsx b/packages/icon/src/generated/ThumbsUp.tsx
index 7ddf5a1181..42fb34ba54 100644
--- a/packages/icon/src/generated/ThumbsUp.tsx
+++ b/packages/icon/src/generated/ThumbsUp.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 83abf62f40f0b98a640136e8002ad402
+* @checksum 5ecbbe0e6fc786a11e7c8f7c565d5702
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/TimeSeries.tsx b/packages/icon/src/generated/TimeSeries.tsx
index 6ea92dfe2d..3b9bc80b34 100644
--- a/packages/icon/src/generated/TimeSeries.tsx
+++ b/packages/icon/src/generated/TimeSeries.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a7e0cd04102076735ce6e87691bd6d52
+* @checksum 4df4c885e5de4acc44fbd7e761b5a1f1
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/TimeSeriesCollection.tsx b/packages/icon/src/generated/TimeSeriesCollection.tsx
index f4afd8512d..c7a376fc26 100644
--- a/packages/icon/src/generated/TimeSeriesCollection.tsx
+++ b/packages/icon/src/generated/TimeSeriesCollection.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 09024a5b6da8c2a5e321877906c8ce3e
+* @checksum ba2c4bbcf976b72a5418269badc35350
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Trash.tsx b/packages/icon/src/generated/Trash.tsx
index 7bec2070e5..305a93aebf 100644
--- a/packages/icon/src/generated/Trash.tsx
+++ b/packages/icon/src/generated/Trash.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1f2e003df8e95d73a3158669803c155f
+* @checksum 1cf64ec769424352ec14abe7b699c225
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Undo.tsx b/packages/icon/src/generated/Undo.tsx
index af91de4953..8e737c2e5a 100644
--- a/packages/icon/src/generated/Undo.tsx
+++ b/packages/icon/src/generated/Undo.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c9ce7984b9d418397cd1636800cc7aff
+* @checksum 70ba53cf3b458240e71ad4f32ce25226
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/University.tsx b/packages/icon/src/generated/University.tsx
index 1362f89fae..03c681a068 100644
--- a/packages/icon/src/generated/University.tsx
+++ b/packages/icon/src/generated/University.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d411d5a0949b9cfdf24ad83ee0607487
+* @checksum c562d3b06c1934b2dc34a4652e221709
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Unlock.tsx b/packages/icon/src/generated/Unlock.tsx
index 4442ecad88..e605c8aa20 100644
--- a/packages/icon/src/generated/Unlock.tsx
+++ b/packages/icon/src/generated/Unlock.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7eea4e428747d77570f0eeee8ffb5964
+* @checksum 92345f695a4d6f9c7a9b20830c7d39c8
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Unsorted.tsx b/packages/icon/src/generated/Unsorted.tsx
index d4a701b30b..4f84864400 100644
--- a/packages/icon/src/generated/Unsorted.tsx
+++ b/packages/icon/src/generated/Unsorted.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 62efba6d722d157f522878adb9f96bb7
+* @checksum a9063860a117a109aa17ff151bb2fb1c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/UpDownCarets.tsx b/packages/icon/src/generated/UpDownCarets.tsx
index 94fa5e3f2d..e0117c53dc 100644
--- a/packages/icon/src/generated/UpDownCarets.tsx
+++ b/packages/icon/src/generated/UpDownCarets.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 70d78f9d81a058e7d91f837aa2ee7db4
+* @checksum 61085dd88236e2f6181a1b99429038de
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Upload.tsx b/packages/icon/src/generated/Upload.tsx
index da5e4f9a70..8c5e27d0e3 100644
--- a/packages/icon/src/generated/Upload.tsx
+++ b/packages/icon/src/generated/Upload.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum de82405d3ca42e8e30552e956ae06db1
+* @checksum 4c4193885fb4c37e9c7002e5cb46e931
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/VerticalEllipsis.tsx b/packages/icon/src/generated/VerticalEllipsis.tsx
index b69aff1d02..91f646bd70 100644
--- a/packages/icon/src/generated/VerticalEllipsis.tsx
+++ b/packages/icon/src/generated/VerticalEllipsis.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f0fb70789246b83617c31af61814aac8
+* @checksum c7cf23afc866350843a8a6ff8991794c
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/View.tsx b/packages/icon/src/generated/View.tsx
index e6ea83f57a..b5e84bb616 100644
--- a/packages/icon/src/generated/View.tsx
+++ b/packages/icon/src/generated/View.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fefca0e06862f7f44a554e490764fdef
+* @checksum d6c60250da030fc36df3080ba1986b4d
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Visibility.tsx b/packages/icon/src/generated/Visibility.tsx
index 6939db17e8..3155f55afc 100644
--- a/packages/icon/src/generated/Visibility.tsx
+++ b/packages/icon/src/generated/Visibility.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c73cddebbffaba11c8cdae8e7710d824
+* @checksum 3186caf86569d2792214ed8ebf3a21b3
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/VisibilityOff.tsx b/packages/icon/src/generated/VisibilityOff.tsx
index 44ac2a5797..1363272e0e 100644
--- a/packages/icon/src/generated/VisibilityOff.tsx
+++ b/packages/icon/src/generated/VisibilityOff.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a9e32393a08e37177e5f60daefffb393
+* @checksum b4eaa34f94777268171f9f3a0862a296
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Warning.tsx b/packages/icon/src/generated/Warning.tsx
index f04a511072..2ee2151290 100644
--- a/packages/icon/src/generated/Warning.tsx
+++ b/packages/icon/src/generated/Warning.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e82642fa3af30a8d6064226cd654828c
+* @checksum 6f445313b0a9bd9c1ac4e5c839f4643b
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Wizard.tsx b/packages/icon/src/generated/Wizard.tsx
index 9ca22937d9..babe2badc8 100644
--- a/packages/icon/src/generated/Wizard.tsx
+++ b/packages/icon/src/generated/Wizard.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e67a6b3e4118cbd6f4053a39f4fccce7
+* @checksum 51e9c3d322f6ddd390f894d6877cd344
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Wrench.tsx b/packages/icon/src/generated/Wrench.tsx
index c78bee6b7a..70412ee528 100644
--- a/packages/icon/src/generated/Wrench.tsx
+++ b/packages/icon/src/generated/Wrench.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 06d44ec8a7034fa828a4fcde0a2a022b
+* @checksum 4a0c02ab5f646fc98cf2f748b7a4ef32
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/Write.tsx b/packages/icon/src/generated/Write.tsx
index 9979d4a4aa..84a09c96d2 100644
--- a/packages/icon/src/generated/Write.tsx
+++ b/packages/icon/src/generated/Write.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 75604c122016aceee9a49fd4625b4f34
+* @checksum 0d0a4e4e911c64ab6b4b1d61d98c83b7
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/X.tsx b/packages/icon/src/generated/X.tsx
index f554e1b288..ffb4037f34 100644
--- a/packages/icon/src/generated/X.tsx
+++ b/packages/icon/src/generated/X.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 8151942a5dac836d8696a91c7a89ff25
+* @checksum 4c6e743fbb08040c833e34ee6fa77c51
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
diff --git a/packages/icon/src/generated/XWithCircle.tsx b/packages/icon/src/generated/XWithCircle.tsx
index a4b555d26a..212402cd28 100644
--- a/packages/icon/src/generated/XWithCircle.tsx
+++ b/packages/icon/src/generated/XWithCircle.tsx
@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 97f819475ebfa1177135f285ed983ba5
+* @checksum d9e4d768be28ada25e21392266249529
 */
 import * as React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';