diff --git a/.changeset/many-plums-scream.md b/.changeset/many-plums-scream.md
new file mode 100644
index 0000000000..c090cc1a0a
--- /dev/null
+++ b/.changeset/many-plums-scream.md
@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/text-input': minor
+'@leafygreen-ui/select': minor
+---
+
+Updates testUtils files to accommodate changes to the Icon package
diff --git a/.changeset/puny-paws-yell.md b/.changeset/puny-paws-yell.md
new file mode 100644
index 0000000000..aa14c8fd3d
--- /dev/null
+++ b/.changeset/puny-paws-yell.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': minor
+---
+
+Updated Icon to include <title> element when title is added. Deprecated the `createGlyphComponent`, and the design system is instead using glyphs from the `generated` folder
diff --git a/packages/icon-button/src/IconButton/IconButton.spec.tsx b/packages/icon-button/src/IconButton/IconButton.spec.tsx
index 16288a5893..679eb07e1b 100644
--- a/packages/icon-button/src/IconButton/IconButton.spec.tsx
+++ b/packages/icon-button/src/IconButton/IconButton.spec.tsx
@@ -4,7 +4,7 @@ import { axe } from 'jest-axe';
 
 import EllipsisIcon from '@leafygreen-ui/icon/dist/Ellipsis';
 
-import IconButton from '..';
+import { IconButton } from '..';
 
 const onClick = jest.fn();
 const className = 'test-icon-button-class';
@@ -84,13 +84,14 @@ describe('packages/icon-button', () => {
     expect(iconButton.tagName.toLowerCase()).toBe('a');
   });
 
-  test(`when '${titleText}' is set directly as the title child icon, the rendered icon includes the title attribute, '${titleText}'`, () => {
+  test(`shows a title element with '${titleText}' when the title prop is set`, () => {
     const iconWithTitle = (
       <EllipsisIcon data-testid="icon-test-id" title={titleText} />
     );
     const { icon } = renderIconButton({ children: iconWithTitle });
-
-    expect(icon.getAttribute('title')).toBe(titleText);
+    expect(icon).toBeInTheDocument();
+    const title = icon.querySelector('title');
+    expect(title?.textContent).toBe(titleText);
   });
 
   /* eslint-disable jest/no-disabled-tests*/
diff --git a/packages/icon/package.json b/packages/icon/package.json
index 0da2c10947..5a7a85034d 100644
--- a/packages/icon/package.json
+++ b/packages/icon/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/hooks": "workspace:^",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
diff --git a/packages/icon/scripts/build/compare-checksum.ts b/packages/icon/scripts/build/compare-checksum.ts
index 76f616ebbb..1fefbb3edb 100644
--- a/packages/icon/scripts/build/compare-checksum.ts
+++ b/packages/icon/scripts/build/compare-checksum.ts
@@ -13,7 +13,8 @@ export function getAllIcons(): Array<string> {
   const iconNames = fsx
     .readdirSync(ICON_DIR)
     .filter(f => /\.tsx?$/.test(f))
-    .map(f => path.basename(f, path.extname(f)));
+    .map(f => path.basename(f, path.extname(f)))
+    .filter(name => name !== 'index'); // Exclude the index file
   return iconNames;
 }
 
diff --git a/packages/icon/scripts/prebuild/index.ts b/packages/icon/scripts/prebuild/index.ts
index 4de77989dd..c59523ba00 100644
--- a/packages/icon/scripts/prebuild/index.ts
+++ b/packages/icon/scripts/prebuild/index.ts
@@ -7,7 +7,7 @@ import fs from 'fs';
 import path from 'path';
 
 import { getChecksum } from './checksum';
-import { indexTemplate } from './indexTemplate';
+import { generatedIndexTemplate, indexTemplate } from './indexTemplate';
 import { FileObject, PrebuildOptions } from './prebuild.types';
 import { svgrTemplate } from './svgrTemplate';
 
@@ -28,6 +28,7 @@ async function buildSvgFiles(options: PrebuildOptions): Promise<void> {
   options?.verbose && console.log('Processing SVG files...\n');
   await Promise.all(svgFiles.map(processFile));
   await createIndexFile(svgFiles, options);
+  await createGeneratedIndexFile(svgFiles, outputDir, options);
 }
 
 /**
@@ -91,6 +92,21 @@ async function createIndexFile(
   fs.writeFileSync(indexPath, formattedIndexContent, { encoding: 'utf8' });
 }
 
+/**
+ * Create the index file for the generated component exports
+ */
+async function createGeneratedIndexFile(
+  svgFiles: Array<FileObject>,
+  outputDir: string,
+  options?: PrebuildOptions,
+) {
+  const indexPath = path.resolve(outputDir, 'index.ts');
+  options?.verbose && console.log('Writing generated index file...', indexPath);
+  const indexContent = await generatedIndexTemplate(svgFiles);
+  const formattedIndexContent = await formatLG(indexContent, indexPath);
+  fs.writeFileSync(indexPath, formattedIndexContent, { encoding: 'utf8' });
+}
+
 /**
  * Annotate the generated file with script and checksum information
  */
diff --git a/packages/icon/scripts/prebuild/indexTemplate.ts b/packages/icon/scripts/prebuild/indexTemplate.ts
index 595719d05c..73fd58a17e 100644
--- a/packages/icon/scripts/prebuild/indexTemplate.ts
+++ b/packages/icon/scripts/prebuild/indexTemplate.ts
@@ -5,27 +5,31 @@ export async function indexTemplate(svgFiles: Array<FileObject>) {
     .map(({ name }) => `import ${name} from './${name}.svg';`)
     .join('\n');
 
-  const _glyphs = `{
-    ${svgFiles.map(({ name }) => `${name}`).join(',\n')}
-  }`;
+  const glyphsList = svgFiles.map(({ name }) => `${name}`).join(',\n    ');
 
   return `
-    import { createGlyphComponent } from '../createGlyphComponent';
-    import { LGGlyph } from '../types';
-
     // Glyphs
     ${imports}
 
-    const _glyphs = ${_glyphs} as const;
-
-    export type GlyphName = keyof typeof _glyphs;
-    
-    const glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;
-    
-    export const glyphs = glyphKeys.reduce((acc, name) => {
-      acc[name] = createGlyphComponent(name, _glyphs[name]);
-    
-      return acc;
-    }, {} as Record<GlyphName, LGGlyph.Component>);
+    export const glyphs = {
+      ${glyphsList}
+    } as const;
+
+    export type GlyphName = keyof typeof glyphs;
   `;
 }
+
+export async function generatedIndexTemplate(svgFiles: Array<FileObject>) {
+  const exports = svgFiles
+    .map(({ name }) => `export { default as ${name} } from './${name}';`)
+    .join('\n');
+
+  return `/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script packages/icon/scripts/prebuild/index.ts
+ */
+
+${exports}
+`;
+}
diff --git a/packages/icon/scripts/prebuild/svgrTemplate.ts b/packages/icon/scripts/prebuild/svgrTemplate.ts
index a3d2381883..dc5167e379 100644
--- a/packages/icon/scripts/prebuild/svgrTemplate.ts
+++ b/packages/icon/scripts/prebuild/svgrTemplate.ts
@@ -20,10 +20,12 @@ interface ASTParts extends Record<string, any> {
 }
 
 export function svgrTemplate(
-  { template }: BabelAPI,
-  { state: { componentName } }: SVGROptions,
+  api: BabelAPI,
+  opts: SVGROptions,
   { imports, jsx, exports }: ASTParts,
 ) {
+  const { template, types: t } = api;
+  const { componentName } = opts.state;
   const typeScriptTpl = template.smart({ plugins: ['jsx', 'typescript'] });
 
   const jsxAttributes = typeScriptTpl.ast`
@@ -48,9 +50,40 @@ export function svgrTemplate(
       jsx.openingElement.attributes[2],
     );
 
+  // Convert self-closing svg to have children
+  jsx.openingElement.selfClosing = false;
+
+  // Create closing element using Babel types
+  jsx.closingElement = t.jsxClosingElement(
+    t.jsxIdentifier(jsx.openingElement.name.name),
+  );
+
+  // Create the title element JSX manually using Babel types
+  // {title && <title id={titleId}>{title}</title>}
+  const titleJSXElement = t.jsxElement(
+    t.jsxOpeningElement(t.jsxIdentifier('title'), [
+      t.jsxAttribute(
+        t.jsxIdentifier('id'),
+        t.jsxExpressionContainer(t.identifier('titleId')),
+      ),
+    ]),
+    t.jsxClosingElement(t.jsxIdentifier('title')),
+    [t.jsxExpressionContainer(t.identifier('title'))],
+    false,
+  );
+
+  // Wrap title in conditional expression: {title && <title>...</title>}
+  const conditionalTitleExpression = t.jsxExpressionContainer(
+    t.logicalExpression('&&', t.identifier('title'), titleJSXElement),
+  );
+
+  // Add the conditional title as a child, followed by the original children
+  jsx.children = [conditionalTitleExpression, ...jsx.children];
+
   return typeScriptTpl(`
     %%imports%%
     import { css, cx } from '@leafygreen-ui/emotion';
+    import { useIdAllocator } from '@leafygreen-ui/hooks';
     import { generateAccessibleProps, sizeMap } from '../glyphCommon';
     import { LGGlyph } from '../types';
   
@@ -66,6 +99,7 @@ export function svgrTemplate(
       role = 'img',
       ...props
     }: ${componentName}Props) => {
+      const titleId = useIdAllocator({ prefix: 'icon-title' });
       const fillStyle = css\`
         color: \${fill};
       \`;
@@ -74,7 +108,7 @@ export function svgrTemplate(
         flex-shrink: 0;
       \`;
 
-      const accessibleProps = generateAccessibleProps(role, '${componentName}', { title, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledby })
+      const accessibleProps = generateAccessibleProps(role, '${componentName}', { title, titleId, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledby })
 
       return %%jsx%%;
     }
diff --git a/packages/icon/src/Icon.spec.tsx b/packages/icon/src/Icon.spec.tsx
index cf6b302cb8..37b776237b 100644
--- a/packages/icon/src/Icon.spec.tsx
+++ b/packages/icon/src/Icon.spec.tsx
@@ -29,9 +29,11 @@ const glyphPaths = fs
 const generatedFilesDirectory = path.resolve(__dirname, './generated');
 const baseNameToGeneratedFilePath: Record<string, string> = {};
 
-fs.readdirSync(generatedFilesDirectory).forEach(filePath => {
-  baseNameToGeneratedFilePath[getBaseName(filePath)] = filePath;
-});
+fs.readdirSync(generatedFilesDirectory)
+  .filter(filePath => /.*\.tsx$/.test(filePath))
+  .forEach(filePath => {
+    baseNameToGeneratedFilePath[getBaseName(filePath)] = filePath;
+  });
 
 const MyTestSVGRGlyph: SVGR.Component = props => (
   <svg data-testid="my-glyph" {...props}></svg>
@@ -276,7 +278,7 @@ describe('Generated glyphs', () => {
   });
 
   describe('accessible props handled correctly', () => {
-    test('when no prop is supplied, aria-label is genereated', () => {
+    test('when no prop is supplied, aria-label is generated', () => {
       render(<EditIcon />);
       const editIcon = screen.getByRole('img');
       expect(editIcon.getAttribute('aria-label')).toBe('Edit Icon');
@@ -295,11 +297,32 @@ describe('Generated glyphs', () => {
       expect(editIcon.getAttribute('aria-labelledby')).toBe('Test label');
     });
 
-    test('when title is supplied it overrides default label', () => {
+    test('when title is supplied it renders a title element and aria-labelledby', () => {
       render(<EditIcon title="Test title" />);
       const editIcon = screen.getByRole('img');
       expect(editIcon.getAttribute('aria-label')).toBe(null);
-      expect(editIcon.getAttribute('title')).toBe('Test title');
+      // Should have aria-labelledby instead of title attribute
+      const ariaLabelledBy = editIcon.getAttribute('aria-labelledby');
+      expect(ariaLabelledBy).not.toBe(null);
+      // Should find a title element with matching ID containing the text
+      const titleElement = editIcon.querySelector('title');
+      expect(titleElement).not.toBe(null);
+      expect(titleElement?.textContent).toBe('Test title');
+      expect(titleElement?.id).toBe(ariaLabelledBy);
+    });
+
+    test('when both title and aria-labelledby are supplied they are combined', () => {
+      render(<EditIcon title="Test title" aria-labelledby="external-label" />);
+      const editIcon = screen.getByRole('img');
+      expect(editIcon.getAttribute('aria-label')).toBe(null);
+      const ariaLabelledBy = editIcon.getAttribute('aria-labelledby');
+      // Should contain both the title ID and the external label
+      expect(ariaLabelledBy).toContain('external-label');
+      const titleElement = editIcon.querySelector('title');
+      expect(titleElement).not.toBe(null);
+      expect(titleElement?.textContent).toBe('Test title');
+      // The aria-labelledby should reference both
+      expect(ariaLabelledBy).toBe(`${titleElement?.id} external-label`);
     });
 
     test('when role="presentation", aria-hidden is true', () => {
diff --git a/packages/icon/src/Icon.stories.tsx b/packages/icon/src/Icon.stories.tsx
index c61600d32a..aebdfbbd6e 100644
--- a/packages/icon/src/Icon.stories.tsx
+++ b/packages/icon/src/Icon.stories.tsx
@@ -17,7 +17,7 @@ const meta: StoryMetaType<typeof Icon> = {
   parameters: {
     default: 'LiveExample',
     controls: {
-      exclude: [...storybookExcludedControlParams, 'title', 'data-testid'],
+      exclude: [...storybookExcludedControlParams, 'data-testid'],
     },
   },
   args: {
@@ -33,6 +33,11 @@ const meta: StoryMetaType<typeof Icon> = {
     fill: {
       control: 'color',
     },
+    title: {
+      control: 'text',
+      description: 'The title of the icon for accessibility',
+      defaultValue: undefined,
+    },
   },
 };
 
diff --git a/packages/icon/src/Icon.tsx b/packages/icon/src/Icon.tsx
index 376d7bb8b2..28a11a5a0f 100644
--- a/packages/icon/src/Icon.tsx
+++ b/packages/icon/src/Icon.tsx
@@ -1,5 +1,5 @@
 import { createIconComponent } from './createIconComponent';
-import { glyphs } from './glyphs';
+import * as glyphs from './generated';
 
 /**
  * The LeafyGreen system icons are a clear and concise set of glyphs designed to be minimal in form and express a variety of use-cases for all digital products.
diff --git a/packages/icon/src/createGlyphComponent.tsx b/packages/icon/src/createGlyphComponent.tsx
index cad914ef41..8910c75b59 100644
--- a/packages/icon/src/createGlyphComponent.tsx
+++ b/packages/icon/src/createGlyphComponent.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 
 import { generateAccessibleProps, Size, sizeMap } from './glyphCommon';
 import { LGGlyph, SVGR } from './types';
 
+// This function will be updated and potentially deprecated in https://jira.mongodb.org/browse/LG-5680
 /**
  * Returns a single glyph component.
  * Process custom glyphs to ensure consistent behavior between custom and built-in icons
+ * This function is different from the `createIconComponent` function in that it returns a single glyph component instead of an icon component.
  * @param glyphName: string - the display name of the icon
  * @param Glyph: SVGR.Component - the SVG icon component
  * @returns LGGlyph.Component
@@ -26,6 +29,7 @@ export function createGlyphComponent(
     role = 'img',
     ...rest
   }: LGGlyph.ComponentProps) => {
+    const titleId = useIdAllocator({ prefix: 'icon-title' });
     const fillStyle = css`
       color: ${fill};
     `;
@@ -51,6 +55,7 @@ export function createGlyphComponent(
         role={role}
         {...generateAccessibleProps(role, glyphName, {
           title,
+          titleId,
           ['aria-label']: ariaLabel,
           ['aria-labelledby']: ariaLabelledby,
         })}
diff --git a/packages/icon/src/generated/AIModel.tsx b/packages/icon/src/generated/AIModel.tsx
index bbd7c217e7..56c883044c 100644
--- a/packages/icon/src/generated/AIModel.tsx
+++ b/packages/icon/src/generated/AIModel.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1b3d40728665f27a2c0b6039f0387bf8
+* @checksum 6618e7834f98f848d25dff98c9e6585f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AIModelProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AIModel = ({
   role = 'img',
   ...props
 }: AIModelProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AIModel = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AIModel', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M6.5 0C7.4665 0 8.25 0.783502 8.25 1.75C8.25 1.8343 8.24199 1.91693 8.23047 1.99805L9.85938 2.93848C10.1792 2.52019 10.6828 2.25 11.25 2.25C12.2165 2.25 13 3.0335 13 4C13 4.81198 12.4462 5.49188 11.6963 5.68945V8.05957C12.4463 8.25706 13 8.93793 13 9.75C13 10.7165 12.2165 11.5 11.25 11.5C10.7615 11.5 10.3204 11.2993 10.0029 10.9766L8.23047 12C8.24217 12.0817 8.25 12.165 8.25 12.25C8.25 13.2165 7.4665 14 6.5 14C5.5335 14 4.75 13.2165 4.75 12.25C4.75 12.1651 4.75686 12.0817 4.76855 12L2.99609 10.9766C2.67867 11.299 2.23822 11.5 1.75 11.5C0.783502 11.5 0 10.7165 0 9.75C0 8.93793 0.553657 8.25706 1.30371 8.05957V5.68945C0.553779 5.49188 0 4.81198 0 4C0 3.0335 0.783502 2.25 1.75 2.25C2.31696 2.25 2.81985 2.52046 3.13965 2.93848L4.76855 1.99805C4.75704 1.91697 4.75 1.83426 4.75 1.75C4.75 0.783502 5.5335 0 6.5 0ZM3.36914 9.08789C3.4528 9.29225 3.5 9.51552 3.5 9.75C3.5 9.86702 3.48773 9.98121 3.46582 10.0918L5.19238 11.0889C5.46062 10.787 5.83101 10.5795 6.25 10.5195V8.72949C5.78109 8.66231 5.37343 8.41073 5.10156 8.04883L3.36914 9.08789ZM7.80957 8.15723C7.54115 8.46075 7.17039 8.66926 6.75 8.72949V10.5195C7.16876 10.5795 7.53844 10.7873 7.80664 11.0889L9.5332 10.0918C9.51132 9.98126 9.5 9.86696 9.5 9.75C9.5 9.56512 9.5289 9.38701 9.58203 9.21973L7.80957 8.15723ZM8.08301 6.25879C8.1887 6.48413 8.25 6.73464 8.25 7C8.25 7.26458 8.1891 7.51442 8.08398 7.73926L9.7998 8.76855C10.0134 8.45352 10.3282 8.21359 10.6963 8.09082V5.6582C10.3976 5.5585 10.1352 5.38146 9.93262 5.14941L8.08301 6.25879ZM2.96973 5.25293C2.78312 5.43462 2.55638 5.57387 2.30371 5.6582V8.09082C2.62655 8.19851 2.9069 8.39729 3.11523 8.65723L4.86133 7.60938C4.79065 7.4194 4.75 7.21459 4.75 7C4.75 6.78476 4.79025 6.57912 4.86133 6.38867L2.96973 5.25293ZM3.49414 3.88867C3.49646 3.92553 3.5 3.96255 3.5 4C3.5 4.31053 3.41821 4.60166 3.27637 4.85449L5.10156 5.94922C5.37346 5.58794 5.78157 5.3366 6.25 5.26953V3.47949C5.83011 3.41934 5.45878 3.21212 5.19043 2.90918L3.49414 3.88867ZM7.80762 2.90918C7.53934 3.21159 7.16944 3.4194 6.75 3.47949V5.26953C7.16972 5.32963 7.54025 5.53811 7.80859 5.84082L9.66016 4.72949C9.55804 4.5073 9.5 4.26055 9.5 4C9.5 3.96258 9.50257 3.92551 9.50488 3.88867L7.80762 2.90918Z" fill={'currentColor'} /></svg>;
 };
 AIModel.displayName = 'AIModel';
 AIModel.isGlyph = true;
diff --git a/packages/icon/src/generated/ActivityFeed.tsx b/packages/icon/src/generated/ActivityFeed.tsx
index 2d129c5dba..09b7473bd3 100644
--- a/packages/icon/src/generated/ActivityFeed.tsx
+++ b/packages/icon/src/generated/ActivityFeed.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 260808bc7119d3af4c161e80ea57a6c5
+* @checksum 77e7639d3019eed3006460e66ce660d8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ActivityFeedProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ActivityFeed = ({
   role = 'img',
   ...props
 }: ActivityFeedProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ActivityFeed = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ActivityFeed', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/AddFile.tsx b/packages/icon/src/generated/AddFile.tsx
index 78008accee..54eae80e49 100644
--- a/packages/icon/src/generated/AddFile.tsx
+++ b/packages/icon/src/generated/AddFile.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cc1e1cbb6d61f3388205f4e843e3e712
+* @checksum 9d241bdb9a9755e69b14c65c5ada7b83
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AddFileProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AddFile = ({
   role = 'img',
   ...props
 }: AddFileProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AddFile = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AddFile', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/AllProducts.tsx b/packages/icon/src/generated/AllProducts.tsx
index 8a47f63a7f..bc1617ab13 100644
--- a/packages/icon/src/generated/AllProducts.tsx
+++ b/packages/icon/src/generated/AllProducts.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5c37a6bef3cb4644287c2c3f068f875a
+* @checksum 6e02f67e866a650b89700f27b7d227a8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AllProductsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AllProducts = ({
   role = 'img',
   ...props
 }: AllProductsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AllProducts = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AllProducts', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/AnalyticsNode.tsx b/packages/icon/src/generated/AnalyticsNode.tsx
index 0dfc35791f..00014accda 100644
--- a/packages/icon/src/generated/AnalyticsNode.tsx
+++ b/packages/icon/src/generated/AnalyticsNode.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9805552df6dff2c768c44ca81aa213c4
+* @checksum 265c75036a8bcdb40d1268c94fe4769f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AnalyticsNodeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const AnalyticsNode = ({
   role = 'img',
   ...props
 }: AnalyticsNodeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const AnalyticsNode = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'AnalyticsNode', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Apps.tsx b/packages/icon/src/generated/Apps.tsx
index 71b47db97c..e657b8790a 100644
--- a/packages/icon/src/generated/Apps.tsx
+++ b/packages/icon/src/generated/Apps.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 425e40d61dd5d93e2cee0b03900ae595
+* @checksum fd4b5e6ffb82c2ae671db1db31d737fc
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AppsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Apps = ({
   role = 'img',
   ...props
 }: AppsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Apps = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Apps', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<path fillRule="evenodd" clipRule="evenodd" d="M7 3H3V7H7V3ZM7 9H3V13H7V9ZM9 3H13V7H9V3ZM13 9H9V13H13V9Z" fill={'currentColor'} /></svg>;
 };
 Apps.displayName = 'Apps';
 Apps.isGlyph = true;
diff --git a/packages/icon/src/generated/Array.tsx b/packages/icon/src/generated/Array.tsx
index 78c6b1b423..4cf0acc9d9 100644
--- a/packages/icon/src/generated/Array.tsx
+++ b/packages/icon/src/generated/Array.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3bf0a50a840b53f371336851204c2a5
+* @checksum c6b9e3f17644ba370dbfbed5e69eaf1c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ArrayProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Array = ({
   role = 'img',
   ...props
 }: ArrayProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Array = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Array', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ArrowDown.tsx b/packages/icon/src/generated/ArrowDown.tsx
index e3ee37d12b..828a77be37 100644
--- a/packages/icon/src/generated/ArrowDown.tsx
+++ b/packages/icon/src/generated/ArrowDown.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 80388a72ab7b330b3a6580b0c297fddf
+* @checksum 9437f68d12bf7a9a78296d9c9f946a47
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ArrowDownProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowDown = ({
   role = 'img',
   ...props
 }: ArrowDownProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowDown = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowDown', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ArrowLeft.tsx b/packages/icon/src/generated/ArrowLeft.tsx
index a93f71ef36..69c47d30ad 100644
--- a/packages/icon/src/generated/ArrowLeft.tsx
+++ b/packages/icon/src/generated/ArrowLeft.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b616058bc8611a0f41a0b72ef9007615
+* @checksum b8f0afcac7be2bbf00ce7e4eeb60dd18
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ArrowLeftProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowLeft = ({
   role = 'img',
   ...props
 }: ArrowLeftProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowLeft = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowLeft', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ArrowRight.tsx b/packages/icon/src/generated/ArrowRight.tsx
index e520a7fbd0..6927a5426a 100644
--- a/packages/icon/src/generated/ArrowRight.tsx
+++ b/packages/icon/src/generated/ArrowRight.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 23de185adab4900108b14253a1e923ae
+* @checksum 26a58ea4031a88c43e834c9b18d201f9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ArrowRightProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowRight = ({
   role = 'img',
   ...props
 }: ArrowRightProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowRight = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowRight', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ArrowUp.tsx b/packages/icon/src/generated/ArrowUp.tsx
index e599f19f22..4521219b00 100644
--- a/packages/icon/src/generated/ArrowUp.tsx
+++ b/packages/icon/src/generated/ArrowUp.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 49ee0cf73d7b62b81389b9ff02da9762
+* @checksum 4d9da39771da1e36ac5d8227b2cc44c1
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ArrowUpProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ArrowUp = ({
   role = 'img',
   ...props
 }: ArrowUpProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ArrowUp = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowUp', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Award.tsx b/packages/icon/src/generated/Award.tsx
index 4b5f8a12c5..3f934973e5 100644
--- a/packages/icon/src/generated/Award.tsx
+++ b/packages/icon/src/generated/Award.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3b9e32a25f51f7150b52bafd3268e9e7
+* @checksum f31d0f9bba287d5bf4a46e0c1bae3dcb
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AwardProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Award = ({
   role = 'img',
   ...props
 }: AwardProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Award = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Award', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Beaker.tsx b/packages/icon/src/generated/Beaker.tsx
index 11d0ee9095..aa2c140b5f 100644
--- a/packages/icon/src/generated/Beaker.tsx
+++ b/packages/icon/src/generated/Beaker.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 672dda640a4f6847536982968cfb0a72
+* @checksum 50f0566b44be1897710a3b16b07575dc
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface BeakerProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Beaker = ({
   role = 'img',
   ...props
 }: BeakerProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Beaker = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Beaker', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Bell.tsx b/packages/icon/src/generated/Bell.tsx
index 232b92e7d7..c403d52feb 100644
--- a/packages/icon/src/generated/Bell.tsx
+++ b/packages/icon/src/generated/Bell.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c63a1d36f26f487d4e09ec57d2e07e96
+* @checksum 74750d7efa8657bf2279254580dad0e8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface BellProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Bell = ({
   role = 'img',
   ...props
 }: BellProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Bell = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Bell', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Biometric.tsx b/packages/icon/src/generated/Biometric.tsx
index 957643de7b..b29ce63b6d 100644
--- a/packages/icon/src/generated/Biometric.tsx
+++ b/packages/icon/src/generated/Biometric.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b38fe171af2489e14639cf28ce6f82a9
+* @checksum cdc56ff7da42d8345c636fffba370395
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface BiometricProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Biometric = ({
   role = 'img',
   ...props
 }: BiometricProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Biometric = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Biometric', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Boolean.tsx b/packages/icon/src/generated/Boolean.tsx
index 3a6d040086..1949cbaa44 100644
--- a/packages/icon/src/generated/Boolean.tsx
+++ b/packages/icon/src/generated/Boolean.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 224d52aa04474618343045cb91eb024b
+* @checksum 307fea66f968bdaa9d730c72c09867c6
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface BooleanProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Boolean = ({
   role = 'img',
   ...props
 }: BooleanProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Boolean = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Boolean', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Building.tsx b/packages/icon/src/generated/Building.tsx
index 0db5ed0386..91d99e7426 100644
--- a/packages/icon/src/generated/Building.tsx
+++ b/packages/icon/src/generated/Building.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cd0cc93f287eb3cfa85f6b4f23f219ea
+* @checksum c34ec414130942b0a18e0047619a8110
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface BuildingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Building = ({
   role = 'img',
   ...props
 }: BuildingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Building = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Building', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Bulb.tsx b/packages/icon/src/generated/Bulb.tsx
index 1c1ee511c7..ed366abddd 100644
--- a/packages/icon/src/generated/Bulb.tsx
+++ b/packages/icon/src/generated/Bulb.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a01c0e6b2545e3d46df479877be7691a
+* @checksum 8c69a6795e940dcfd317faad38eb0801
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface BulbProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Bulb = ({
   role = 'img',
   ...props
 }: BulbProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Bulb = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Bulb', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Calendar.tsx b/packages/icon/src/generated/Calendar.tsx
index 25f8664acf..bb27432fd5 100644
--- a/packages/icon/src/generated/Calendar.tsx
+++ b/packages/icon/src/generated/Calendar.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7112ff5b67ee7b683204ef6c2ef8f4bc
+* @checksum 3f4399743b8d60fb6c36de3b8256456c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CalendarProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Calendar = ({
   role = 'img',
   ...props
 }: CalendarProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Calendar = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Calendar', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Camera.tsx b/packages/icon/src/generated/Camera.tsx
index 6106ea1236..68dac61984 100644
--- a/packages/icon/src/generated/Camera.tsx
+++ b/packages/icon/src/generated/Camera.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 47b24752cf1f046d783a987dcb3c42dd
+* @checksum 8aff628acbfb7f2ca52670475c85bf3e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CameraProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Camera = ({
   role = 'img',
   ...props
 }: CameraProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Camera = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Camera', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Cap.tsx b/packages/icon/src/generated/Cap.tsx
index 1337230605..cf10ad1b90 100644
--- a/packages/icon/src/generated/Cap.tsx
+++ b/packages/icon/src/generated/Cap.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4e96db1fcbbe1eaff9f36dcc67cde9f2
+* @checksum e34fc73647e110da1848d92ab1f69a7f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CapProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Cap = ({
   role = 'img',
   ...props
 }: CapProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Cap = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Cap', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CaretDown.tsx b/packages/icon/src/generated/CaretDown.tsx
index 653b7202b9..f55bd21020 100644
--- a/packages/icon/src/generated/CaretDown.tsx
+++ b/packages/icon/src/generated/CaretDown.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b7cc7a9061c98a368fd005b771e1f18d
+* @checksum faea53a69296283876240c2f52c4d535
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CaretDownProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CaretDown = ({
   role = 'img',
   ...props
 }: CaretDownProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CaretDown = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CaretDown', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CaretLeft.tsx b/packages/icon/src/generated/CaretLeft.tsx
index e02f7e30eb..0a69c8a569 100644
--- a/packages/icon/src/generated/CaretLeft.tsx
+++ b/packages/icon/src/generated/CaretLeft.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0bc57fb243bd763d1297c5e8acd52d96
+* @checksum 5ccea9324f8a2ef8474355b44ea3834d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CaretLeftProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CaretLeft = ({
   role = 'img',
   ...props
 }: CaretLeftProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CaretLeft = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CaretLeft', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CaretRight.tsx b/packages/icon/src/generated/CaretRight.tsx
index d75f1eee06..68631c20a1 100644
--- a/packages/icon/src/generated/CaretRight.tsx
+++ b/packages/icon/src/generated/CaretRight.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 47bdb54fcab8aca96858ae2be419aa77
+* @checksum b267d20161f902d535b7860d1fbfb7e6
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CaretRightProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CaretRight = ({
   role = 'img',
   ...props
 }: CaretRightProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CaretRight = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CaretRight', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CaretUp.tsx b/packages/icon/src/generated/CaretUp.tsx
index 1b34d42904..e358efda9f 100644
--- a/packages/icon/src/generated/CaretUp.tsx
+++ b/packages/icon/src/generated/CaretUp.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 467de2169295f5b5a3166cda3118c90f
+* @checksum 20cd9893bb8962d333afa7d8b53b0272
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CaretUpProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CaretUp = ({
   role = 'img',
   ...props
 }: CaretUpProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CaretUp = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CaretUp', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ChartFilled.tsx b/packages/icon/src/generated/ChartFilled.tsx
index 4cf46ecb3a..44d310d272 100644
--- a/packages/icon/src/generated/ChartFilled.tsx
+++ b/packages/icon/src/generated/ChartFilled.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 52a2e2fd93d3181057afc417ae9a2118
+* @checksum ec29acc313c57cb762030195b99f1284
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ChartFilledProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ChartFilled = ({
   role = 'img',
   ...props
 }: ChartFilledProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ChartFilled = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ChartFilled', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Charts.tsx b/packages/icon/src/generated/Charts.tsx
index 1a2ad662a7..cf8ef36ff6 100644
--- a/packages/icon/src/generated/Charts.tsx
+++ b/packages/icon/src/generated/Charts.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eb9e11c27066d151ace30e0570051ecc
+* @checksum 9a970971e28f512d48606ec8433963b9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ChartsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Charts = ({
   role = 'img',
   ...props
 }: ChartsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Charts = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Charts', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Checkmark.tsx b/packages/icon/src/generated/Checkmark.tsx
index 9de89d5ac6..54275c3a52 100644
--- a/packages/icon/src/generated/Checkmark.tsx
+++ b/packages/icon/src/generated/Checkmark.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5c8f29787a59e9aa2cb10f982fb0e34e
+* @checksum ec066b42edd61151fa77028c59e1cd38
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CheckmarkProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Checkmark = ({
   role = 'img',
   ...props
 }: CheckmarkProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Checkmark = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Checkmark', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CheckmarkWithCircle.tsx b/packages/icon/src/generated/CheckmarkWithCircle.tsx
index 68543dac2b..0c40e62a03 100644
--- a/packages/icon/src/generated/CheckmarkWithCircle.tsx
+++ b/packages/icon/src/generated/CheckmarkWithCircle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 01e3301b68ab1c0849499c3fd52b9c64
+* @checksum 00077ebf794be9aacfcbad2265921574
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CheckmarkWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CheckmarkWithCircle = ({
   role = 'img',
   ...props
 }: CheckmarkWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CheckmarkWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CheckmarkWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ChevronDown.tsx b/packages/icon/src/generated/ChevronDown.tsx
index a07bdfd8e4..8c53f5d970 100644
--- a/packages/icon/src/generated/ChevronDown.tsx
+++ b/packages/icon/src/generated/ChevronDown.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1b70552302dc5f33ef29f45169b61722
+* @checksum e275fb3bb5b89ba8e7921f8057d97b61
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ChevronDownProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ChevronDown = ({
   role = 'img',
   ...props
 }: ChevronDownProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ChevronDown = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ChevronDown', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ChevronLeft.tsx b/packages/icon/src/generated/ChevronLeft.tsx
index f75e5d69c9..45fa24ead3 100644
--- a/packages/icon/src/generated/ChevronLeft.tsx
+++ b/packages/icon/src/generated/ChevronLeft.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b256a3ede62cb851b7e7e09ceb3fe12c
+* @checksum 6fc3eec869d8fdac398779319ff111e5
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ChevronLeftProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ChevronLeft = ({
   role = 'img',
   ...props
 }: ChevronLeftProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ChevronLeft = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ChevronLeft', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ChevronRight.tsx b/packages/icon/src/generated/ChevronRight.tsx
index 1fc2ad7886..d02378dfb0 100644
--- a/packages/icon/src/generated/ChevronRight.tsx
+++ b/packages/icon/src/generated/ChevronRight.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 61deb1cc5f8aaabad3c9303f7ffdfd45
+* @checksum 60bb62c5594c1e3ad5fa32afdd700306
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ChevronRightProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ChevronRight = ({
   role = 'img',
   ...props
 }: ChevronRightProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ChevronRight = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ChevronRight', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ChevronUp.tsx b/packages/icon/src/generated/ChevronUp.tsx
index 0dfd213cfd..d8f2fe2979 100644
--- a/packages/icon/src/generated/ChevronUp.tsx
+++ b/packages/icon/src/generated/ChevronUp.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c2e9544b35690bffab1838d83caa496d
+* @checksum 5b3ceb89db986b5027dc2afc7a9f6e4c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ChevronUpProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ChevronUp = ({
   role = 'img',
   ...props
 }: ChevronUpProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ChevronUp = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ChevronUp', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Circle.tsx b/packages/icon/src/generated/Circle.tsx
index 470f504696..7d01261f47 100644
--- a/packages/icon/src/generated/Circle.tsx
+++ b/packages/icon/src/generated/Circle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 58c735cc8fda3c43338ae2f01473a0cf
+* @checksum e829167c1953740dcb6125ad8cd3c702
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Circle = ({
   role = 'img',
   ...props
 }: CircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Circle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Circle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<circle cx={8} cy={8} r={7} fill={'currentColor'} /></svg>;
 };
 Circle.displayName = 'Circle';
 Circle.isGlyph = true;
diff --git a/packages/icon/src/generated/Clock.tsx b/packages/icon/src/generated/Clock.tsx
index 984ef11aeb..84d93a5c20 100644
--- a/packages/icon/src/generated/Clock.tsx
+++ b/packages/icon/src/generated/Clock.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0c4caec1c47768a8921a638fb73034dc
+* @checksum 9a02c8d2237e34d328ae06498762c516
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ClockProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Clock = ({
   role = 'img',
   ...props
 }: ClockProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Clock = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Clock', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ClockWithArrow.tsx b/packages/icon/src/generated/ClockWithArrow.tsx
index 562e846d21..2d2b95496c 100644
--- a/packages/icon/src/generated/ClockWithArrow.tsx
+++ b/packages/icon/src/generated/ClockWithArrow.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c10e62ba77cbd413359726526d086577
+* @checksum 801ec811d8cadd01a92629fba5496494
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ClockWithArrowProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ClockWithArrow = ({
   role = 'img',
   ...props
 }: ClockWithArrowProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ClockWithArrow = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ClockWithArrow', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Clone.tsx b/packages/icon/src/generated/Clone.tsx
index 3b0a8f5e52..d89d3a322f 100644
--- a/packages/icon/src/generated/Clone.tsx
+++ b/packages/icon/src/generated/Clone.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c49bb6f86ac38132c73ffe2cd13d6343
+* @checksum 5272702ad682dc0cd2673580405c6eae
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CloneProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Clone = ({
   role = 'img',
   ...props
 }: CloneProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Clone = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Clone', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Cloud.tsx b/packages/icon/src/generated/Cloud.tsx
index 3bd89316dd..c54756e8fa 100644
--- a/packages/icon/src/generated/Cloud.tsx
+++ b/packages/icon/src/generated/Cloud.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b794844aa742da6b09e629854e0d0342
+* @checksum 419912cc8359239dde4ae49ac42ce174
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CloudProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Cloud = ({
   role = 'img',
   ...props
 }: CloudProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Cloud = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Cloud', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Code.tsx b/packages/icon/src/generated/Code.tsx
index f0fed72cee..ed0f27a980 100644
--- a/packages/icon/src/generated/Code.tsx
+++ b/packages/icon/src/generated/Code.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 30e648aaf8cce9b86c913f565c132d42
+* @checksum d1646228a06071051ef13676e6a11303
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CodeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Code = ({
   role = 'img',
   ...props
 }: CodeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Code = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Code', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CodeBlock.tsx b/packages/icon/src/generated/CodeBlock.tsx
index eb28ea3d80..64d70f2603 100644
--- a/packages/icon/src/generated/CodeBlock.tsx
+++ b/packages/icon/src/generated/CodeBlock.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5386522dad3a43ade4466bb31a7c5bc6
+* @checksum fe7d7e62b2cd7fdbaf37e4bcd3a4c6fe
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CodeBlockProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CodeBlock = ({
   role = 'img',
   ...props
 }: CodeBlockProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CodeBlock = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CodeBlock', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Coin.tsx b/packages/icon/src/generated/Coin.tsx
index 671429b0b0..d99239dfec 100644
--- a/packages/icon/src/generated/Coin.tsx
+++ b/packages/icon/src/generated/Coin.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum acc25b6acacb32da914ddd0746bfce3f
+* @checksum 5ad701f313c4e655eac0938f2d7f3fb8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CoinProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Coin = ({
   role = 'img',
   ...props
 }: CoinProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Coin = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Coin', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Colon.tsx b/packages/icon/src/generated/Colon.tsx
index c29db41b6b..34e175d783 100644
--- a/packages/icon/src/generated/Colon.tsx
+++ b/packages/icon/src/generated/Colon.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7edf17e577c84d506317f7a87288b5aa
+* @checksum aa11cb66b8291a087fe11fbe4616292c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ColonProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Colon = ({
   role = 'img',
   ...props
 }: ColonProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Colon = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Colon', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Config.tsx b/packages/icon/src/generated/Config.tsx
index 0d5ec1768b..92408a6610 100644
--- a/packages/icon/src/generated/Config.tsx
+++ b/packages/icon/src/generated/Config.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9fadfbc8315f706fab1639b48cefccfe
+* @checksum 3e43b9a64baef9e6a2e1b0bad4c0d4e7
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ConfigProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Config = ({
   role = 'img',
   ...props
 }: ConfigProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Config = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Config', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Connect.tsx b/packages/icon/src/generated/Connect.tsx
index c6de807e15..7a9beafb47 100644
--- a/packages/icon/src/generated/Connect.tsx
+++ b/packages/icon/src/generated/Connect.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0184ac81eca23f9e9fa3a02d1572db34
+* @checksum cacc5f021481d402053e2d0be9bd7edb
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ConnectProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Connect = ({
   role = 'img',
   ...props
 }: ConnectProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Connect = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Connect', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Copy.tsx b/packages/icon/src/generated/Copy.tsx
index 6a236e05e1..4ee18715ac 100644
--- a/packages/icon/src/generated/Copy.tsx
+++ b/packages/icon/src/generated/Copy.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 757446df7bed5d8ee0b4515c2a908b82
+* @checksum 5d913433fd02bb0ed57bf74446645eb2
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CopyProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Copy = ({
   role = 'img',
   ...props
 }: CopyProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Copy = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Copy', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CreditCard.tsx b/packages/icon/src/generated/CreditCard.tsx
index 96be9052d0..da16d6d9de 100644
--- a/packages/icon/src/generated/CreditCard.tsx
+++ b/packages/icon/src/generated/CreditCard.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 50cfcb04ce79f8c7f4b7ab5c8594ccfc
+* @checksum bc2752783815d54113564fcb4b09858d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CreditCardProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CreditCard = ({
   role = 'img',
   ...props
 }: CreditCardProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CreditCard = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CreditCard', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/CurlyBraces.tsx b/packages/icon/src/generated/CurlyBraces.tsx
index b7c5b82b54..df48299158 100644
--- a/packages/icon/src/generated/CurlyBraces.tsx
+++ b/packages/icon/src/generated/CurlyBraces.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 76897dc0cfe4ff71bcce816038e398a7
+* @checksum 2493a4e08371585756eed503e8cded3e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CurlyBracesProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const CurlyBraces = ({
   role = 'img',
   ...props
 }: CurlyBracesProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const CurlyBraces = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'CurlyBraces', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Cursor.tsx b/packages/icon/src/generated/Cursor.tsx
index 499f52e37a..e6f9c736e7 100644
--- a/packages/icon/src/generated/Cursor.tsx
+++ b/packages/icon/src/generated/Cursor.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d503f7f7b2910c436fc8350192119667
+* @checksum 7e2f46ea0cd42230970ecba889744916
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface CursorProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Cursor = ({
   role = 'img',
   ...props
 }: CursorProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Cursor = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Cursor', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Dashboard.tsx b/packages/icon/src/generated/Dashboard.tsx
index 1ff6b0d04d..52065807f3 100644
--- a/packages/icon/src/generated/Dashboard.tsx
+++ b/packages/icon/src/generated/Dashboard.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 20ca1d9aa8b48ee77c0b1e1036622ed1
+* @checksum 12343b3c630ed3481d18d47fac2e2191
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface DashboardProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Dashboard = ({
   role = 'img',
   ...props
 }: DashboardProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Dashboard = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Dashboard', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Database.tsx b/packages/icon/src/generated/Database.tsx
index 1f35795758..c8f3636a9d 100644
--- a/packages/icon/src/generated/Database.tsx
+++ b/packages/icon/src/generated/Database.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eb1573d4ef4842ea3d9a2e83b80bbb57
+* @checksum 10fc51684f1060f611bfbe1719c8a862
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface DatabaseProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Database = ({
   role = 'img',
   ...props
 }: DatabaseProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Database = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Database', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Diagram.tsx b/packages/icon/src/generated/Diagram.tsx
index 089dc15034..06e455a2a5 100644
--- a/packages/icon/src/generated/Diagram.tsx
+++ b/packages/icon/src/generated/Diagram.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f5cb72651982fab52d9f3b57f86d7334
+* @checksum 1d18686942e620277e4b035a7f3d44f9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface DiagramProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Diagram = ({
   role = 'img',
   ...props
 }: DiagramProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Diagram = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Diagram', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Diagram2.tsx b/packages/icon/src/generated/Diagram2.tsx
index 1b5b9a316a..9976d5ab48 100644
--- a/packages/icon/src/generated/Diagram2.tsx
+++ b/packages/icon/src/generated/Diagram2.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 61dfaebf66fe6da158506f2714d16330
+* @checksum 7c13c43955b830bed25c266f26606406
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface Diagram2Props extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Diagram2 = ({
   role = 'img',
   ...props
 }: Diagram2Props) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Diagram2 = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Diagram2', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Diagram3.tsx b/packages/icon/src/generated/Diagram3.tsx
index 5740c45ebf..cd85031b6a 100644
--- a/packages/icon/src/generated/Diagram3.tsx
+++ b/packages/icon/src/generated/Diagram3.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 703675a1797ecdf19ce09182c94e05c4
+* @checksum 383bbfa70722f01eb8c7e1e6bed91194
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface Diagram3Props extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Diagram3 = ({
   role = 'img',
   ...props
 }: Diagram3Props) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Diagram3 = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Diagram3', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Disconnect.tsx b/packages/icon/src/generated/Disconnect.tsx
index 1f17855588..78dde89407 100644
--- a/packages/icon/src/generated/Disconnect.tsx
+++ b/packages/icon/src/generated/Disconnect.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2c0de1f29e6f85707ac47516d174ff52
+* @checksum 9fc9990a94ba151cbac6ba7938afa23d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface DisconnectProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Disconnect = ({
   role = 'img',
   ...props
 }: DisconnectProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Disconnect = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Disconnect', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Download.tsx b/packages/icon/src/generated/Download.tsx
index 108e94a324..8ee44ce8b2 100644
--- a/packages/icon/src/generated/Download.tsx
+++ b/packages/icon/src/generated/Download.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e3557fcbfdcc2f05665dab6cb7c73753
+* @checksum ecd0dc351a44588f395b93c39d47fe01
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface DownloadProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Download = ({
   role = 'img',
   ...props
 }: DownloadProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Download = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Download', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Drag.tsx b/packages/icon/src/generated/Drag.tsx
index 80b382b94f..423b2d10f5 100644
--- a/packages/icon/src/generated/Drag.tsx
+++ b/packages/icon/src/generated/Drag.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 315987e344984b22a0951bc7bec2ac20
+* @checksum c6d5c97459805c76728763d0049b1755
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface DragProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Drag = ({
   role = 'img',
   ...props
 }: DragProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Drag = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Drag', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Edit.tsx b/packages/icon/src/generated/Edit.tsx
index 3cce815c20..0edd06a4bd 100644
--- a/packages/icon/src/generated/Edit.tsx
+++ b/packages/icon/src/generated/Edit.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b7cab0d99453146719f7da2929c44003
+* @checksum 7e5327d531eb7c4ab9f74f0f8d5168d0
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface EditProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Edit = ({
   role = 'img',
   ...props
 }: EditProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Edit = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Edit', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Ellipsis.tsx b/packages/icon/src/generated/Ellipsis.tsx
index 0d24c8f242..2ad24ce602 100644
--- a/packages/icon/src/generated/Ellipsis.tsx
+++ b/packages/icon/src/generated/Ellipsis.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7660d6fb3d24577cfced3bb912ead720
+* @checksum 7279f3d19ae1847bdeb83bf6d4c6f6eb
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface EllipsisProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Ellipsis = ({
   role = 'img',
   ...props
 }: EllipsisProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Ellipsis = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Ellipsis', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Email.tsx b/packages/icon/src/generated/Email.tsx
index 5f567b96bc..cd8cdb8d1a 100644
--- a/packages/icon/src/generated/Email.tsx
+++ b/packages/icon/src/generated/Email.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0f01463681c2106e89d98ca898c9a2a0
+* @checksum 4ccf39e2832b7958413f5dcf1e8b92d9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface EmailProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Email = ({
   role = 'img',
   ...props
 }: EmailProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Email = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Email', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/EmptyDatabase.tsx b/packages/icon/src/generated/EmptyDatabase.tsx
index 7a5cc25e38..563d2dcce4 100644
--- a/packages/icon/src/generated/EmptyDatabase.tsx
+++ b/packages/icon/src/generated/EmptyDatabase.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 191affe38345c5ac4e8dade5731ed200
+* @checksum 10a062116ea680566514b7bbd6a23543
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface EmptyDatabaseProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const EmptyDatabase = ({
   role = 'img',
   ...props
 }: EmptyDatabaseProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const EmptyDatabase = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'EmptyDatabase', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/EmptyFolder.tsx b/packages/icon/src/generated/EmptyFolder.tsx
index fc8e3cd83f..5eb13e9e88 100644
--- a/packages/icon/src/generated/EmptyFolder.tsx
+++ b/packages/icon/src/generated/EmptyFolder.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 27e4808c89a2df3b3b4222901edb8ad0
+* @checksum e643d2b2219d2af0c9f7019a024cf5fd
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface EmptyFolderProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const EmptyFolder = ({
   role = 'img',
   ...props
 }: EmptyFolderProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const EmptyFolder = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'EmptyFolder', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Eraser.tsx b/packages/icon/src/generated/Eraser.tsx
index 7f2e592665..94b790448c 100644
--- a/packages/icon/src/generated/Eraser.tsx
+++ b/packages/icon/src/generated/Eraser.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 543c08fb00bf1c1d2c2b4f041d804f59
+* @checksum f3dc3704cab47b6e170449b95ce7941e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface EraserProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Eraser = ({
   role = 'img',
   ...props
 }: EraserProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Eraser = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Eraser', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Escalation.tsx b/packages/icon/src/generated/Escalation.tsx
index e07bc0ce0d..2d4c0dec86 100644
--- a/packages/icon/src/generated/Escalation.tsx
+++ b/packages/icon/src/generated/Escalation.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2cb3bf9191d63dec9f01a2c35a440bb2
+* @checksum cc58f19c520502262c789fb80932b8e7
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface EscalationProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Escalation = ({
   role = 'img',
   ...props
 }: EscalationProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Escalation = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Escalation', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Export.tsx b/packages/icon/src/generated/Export.tsx
index d55b10dfef..477a02be12 100644
--- a/packages/icon/src/generated/Export.tsx
+++ b/packages/icon/src/generated/Export.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9bbfaead3792ee03dcb656e8926b60ba
+* @checksum a270d72889172f9ce9df760e21081433
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ExportProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Export = ({
   role = 'img',
   ...props
 }: ExportProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Export = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Export', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Favorite.tsx b/packages/icon/src/generated/Favorite.tsx
index 631528563c..d70279562c 100644
--- a/packages/icon/src/generated/Favorite.tsx
+++ b/packages/icon/src/generated/Favorite.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9105c932e585d948b3be9537b45867ba
+* @checksum 7244d39bbd8e05a17d3f20d10b6125d5
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FavoriteProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Favorite = ({
   role = 'img',
   ...props
 }: FavoriteProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Favorite = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Favorite', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Federation.tsx b/packages/icon/src/generated/Federation.tsx
index a24217983a..f848f0d42c 100644
--- a/packages/icon/src/generated/Federation.tsx
+++ b/packages/icon/src/generated/Federation.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 30ad3a76c1480a237c9aa289c33049ba
+* @checksum a0ccfa81ae5643665b2623d2a09961d3
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FederationProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Federation = ({
   role = 'img',
   ...props
 }: FederationProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Federation = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Federation', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/File.tsx b/packages/icon/src/generated/File.tsx
index 0edfc2216b..d0a2c70a07 100644
--- a/packages/icon/src/generated/File.tsx
+++ b/packages/icon/src/generated/File.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a638451083c2d992bcceca9c9a011ad5
+* @checksum 2a5b7807c3eac2280501e585d8020a1d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FileProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const File = ({
   role = 'img',
   ...props
 }: FileProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const File = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'File', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Filter.tsx b/packages/icon/src/generated/Filter.tsx
index 5ed6607ef7..02ab7cffd8 100644
--- a/packages/icon/src/generated/Filter.tsx
+++ b/packages/icon/src/generated/Filter.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a700d27f7ce1179149146df351bc239f
+* @checksum 7ce08aa7006737f22f4f5cda55faa565
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FilterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Filter = ({
   role = 'img',
   ...props
 }: FilterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Filter = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Filter', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Folder.tsx b/packages/icon/src/generated/Folder.tsx
index 6907b5b773..5332aa6d10 100644
--- a/packages/icon/src/generated/Folder.tsx
+++ b/packages/icon/src/generated/Folder.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 56c2bfa5ef7bbe055848858525fc9511
+* @checksum 83819ade6db7efb018768b25da779ccc
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FolderProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Folder = ({
   role = 'img',
   ...props
 }: FolderProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Folder = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Folder', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Format.tsx b/packages/icon/src/generated/Format.tsx
index b369a07264..247babbd9d 100644
--- a/packages/icon/src/generated/Format.tsx
+++ b/packages/icon/src/generated/Format.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5449b4343d7881f7455f49c709a7ea95
+* @checksum a97bd266efe1fdbd69c4d4589dd96061
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FormatProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Format = ({
   role = 'img',
   ...props
 }: FormatProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Format = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Format', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/FullScreenEnter.tsx b/packages/icon/src/generated/FullScreenEnter.tsx
index a55f866c8e..05251d0176 100644
--- a/packages/icon/src/generated/FullScreenEnter.tsx
+++ b/packages/icon/src/generated/FullScreenEnter.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 795d59ef8fca2a4eefe2b1721a9a8a13
+* @checksum 94127249c923c2c8519be62c940f5c49
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FullScreenEnterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const FullScreenEnter = ({
   role = 'img',
   ...props
 }: FullScreenEnterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const FullScreenEnter = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'FullScreenEnter', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/FullScreenExit.tsx b/packages/icon/src/generated/FullScreenExit.tsx
index a3a1e8559f..024beaef79 100644
--- a/packages/icon/src/generated/FullScreenExit.tsx
+++ b/packages/icon/src/generated/FullScreenExit.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f484aadc94c0e228875b2f1c8b628a14
+* @checksum 6163e258a084f2b74ae1e9f96b8bdb1d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FullScreenExitProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const FullScreenExit = ({
   role = 'img',
   ...props
 }: FullScreenExitProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const FullScreenExit = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'FullScreenExit', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Function.tsx b/packages/icon/src/generated/Function.tsx
index f9a615c21c..3e8acb706d 100644
--- a/packages/icon/src/generated/Function.tsx
+++ b/packages/icon/src/generated/Function.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0766fa669545a73f1261d2950d77510d
+* @checksum 8ad02ffaf712d2a311ba6b6b06e18a43
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface FunctionProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Function = ({
   role = 'img',
   ...props
 }: FunctionProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Function = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Function', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Gauge.tsx b/packages/icon/src/generated/Gauge.tsx
index 773ecb03ea..debe560141 100644
--- a/packages/icon/src/generated/Gauge.tsx
+++ b/packages/icon/src/generated/Gauge.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fae4d3bd54d52655f04beb481a121b0d
+* @checksum 5e19d95946c683d99e402894574a71d3
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface GaugeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Gauge = ({
   role = 'img',
   ...props
 }: GaugeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Gauge = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Gauge', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/GlobeAmericas.tsx b/packages/icon/src/generated/GlobeAmericas.tsx
index 148c4f489f..34b7ccce85 100644
--- a/packages/icon/src/generated/GlobeAmericas.tsx
+++ b/packages/icon/src/generated/GlobeAmericas.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4aa7ede9e76acfe503c91a5cbbcc360e
+* @checksum cf44fec8ebe5cfca13fb9d8a140a4bde
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface GlobeAmericasProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const GlobeAmericas = ({
   role = 'img',
   ...props
 }: GlobeAmericasProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const GlobeAmericas = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'GlobeAmericas', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/GovernmentBuilding.tsx b/packages/icon/src/generated/GovernmentBuilding.tsx
index 164ef6d0af..2a3bd215ca 100644
--- a/packages/icon/src/generated/GovernmentBuilding.tsx
+++ b/packages/icon/src/generated/GovernmentBuilding.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 93d857dc5276aea15c4def863d4e770c
+* @checksum 26d79d1c4b746dda7fbdca11f434e964
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface GovernmentBuildingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const GovernmentBuilding = ({
   role = 'img',
   ...props
 }: GovernmentBuildingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const GovernmentBuilding = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'GovernmentBuilding', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Guide.tsx b/packages/icon/src/generated/Guide.tsx
index 997aa05ee5..f7d314a9cc 100644
--- a/packages/icon/src/generated/Guide.tsx
+++ b/packages/icon/src/generated/Guide.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6197d4dc1126bf4eda03370327452548
+* @checksum 8c573105eb9ab4f831127e8033b67ff7
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface GuideProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Guide = ({
   role = 'img',
   ...props
 }: GuideProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Guide = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Guide', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Hash.tsx b/packages/icon/src/generated/Hash.tsx
index 53093c2e75..eee3bcea22 100644
--- a/packages/icon/src/generated/Hash.tsx
+++ b/packages/icon/src/generated/Hash.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 732cbb137f14f311c82c7f60ee1f9242
+* @checksum 76a3e439b7df5616f7d4257fdc57c953
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface HashProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Hash = ({
   role = 'img',
   ...props
 }: HashProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Hash = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Hash', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/HiddenSecondaryNode.tsx b/packages/icon/src/generated/HiddenSecondaryNode.tsx
index 8234c6f1ac..ac0df57b40 100644
--- a/packages/icon/src/generated/HiddenSecondaryNode.tsx
+++ b/packages/icon/src/generated/HiddenSecondaryNode.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2aff31aae26b5e933ae67e64e2995aaf
+* @checksum 6137eaf937720aabbb68834d9f14380e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface HiddenSecondaryNodeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const HiddenSecondaryNode = ({
   role = 'img',
   ...props
 }: HiddenSecondaryNodeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const HiddenSecondaryNode = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'HiddenSecondaryNode', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Highlight.tsx b/packages/icon/src/generated/Highlight.tsx
index ed5a584210..7a6b4f318f 100644
--- a/packages/icon/src/generated/Highlight.tsx
+++ b/packages/icon/src/generated/Highlight.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b33d967dc6dbcdacb2e862060c0d4f22
+* @checksum b3a9bd31f4b79083d37db104181dda62
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface HighlightProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Highlight = ({
   role = 'img',
   ...props
 }: HighlightProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Highlight = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Highlight', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Home.tsx b/packages/icon/src/generated/Home.tsx
index 9908a97d20..63be5f3ba6 100644
--- a/packages/icon/src/generated/Home.tsx
+++ b/packages/icon/src/generated/Home.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 21d3e165dc18b87a3ddc2a7c2dd6ea02
+* @checksum 51c6c2c7bf89cf8895fae4247eb37b68
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface HomeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Home = ({
   role = 'img',
   ...props
 }: HomeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Home = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Home', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/HorizontalDrag.tsx b/packages/icon/src/generated/HorizontalDrag.tsx
index 59f3c965d4..d543eadfbe 100644
--- a/packages/icon/src/generated/HorizontalDrag.tsx
+++ b/packages/icon/src/generated/HorizontalDrag.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bb43a70c64a4cd58d135bcafa70ad44e
+* @checksum 35c8aff2b2d1b0e88c79c16c7f71a6ae
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface HorizontalDragProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const HorizontalDrag = ({
   role = 'img',
   ...props
 }: HorizontalDragProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const HorizontalDrag = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'HorizontalDrag', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Import.tsx b/packages/icon/src/generated/Import.tsx
index 969fc39597..689cee594a 100644
--- a/packages/icon/src/generated/Import.tsx
+++ b/packages/icon/src/generated/Import.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d38dfc5fac49cb72eb2a046379199bc5
+* @checksum d054f5e2ed30cd080294e130401d351d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ImportProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Import = ({
   role = 'img',
   ...props
 }: ImportProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Import = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Import', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ImportantWithCircle.tsx b/packages/icon/src/generated/ImportantWithCircle.tsx
index 3f8126e2ef..8037a21d3c 100644
--- a/packages/icon/src/generated/ImportantWithCircle.tsx
+++ b/packages/icon/src/generated/ImportantWithCircle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1e24056f238ac6b1ac52e61f4f79ee09
+* @checksum 8b9fb3a1ddd64878c8fe9ea0e22486e3
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ImportantWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ImportantWithCircle = ({
   role = 'img',
   ...props
 }: ImportantWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ImportantWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ImportantWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/InfoWithCircle.tsx b/packages/icon/src/generated/InfoWithCircle.tsx
index 6acccab35d..7bbac5c00f 100644
--- a/packages/icon/src/generated/InfoWithCircle.tsx
+++ b/packages/icon/src/generated/InfoWithCircle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 42b8ee1317157261ded4a3babc011e9d
+* @checksum a405ff7306f629d976dd60b1b450d14d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface InfoWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const InfoWithCircle = ({
   role = 'img',
   ...props
 }: InfoWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const InfoWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'InfoWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/InternalEmployee.tsx b/packages/icon/src/generated/InternalEmployee.tsx
index ad19954e67..38028ea917 100644
--- a/packages/icon/src/generated/InternalEmployee.tsx
+++ b/packages/icon/src/generated/InternalEmployee.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3a743ff35bb8246fb61e0821ae8f3cf7
+* @checksum f72bc5656389983ffd413c51fcdeae4e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface InternalEmployeeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const InternalEmployee = ({
   role = 'img',
   ...props
 }: InternalEmployeeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const InternalEmployee = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'InternalEmployee', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/InviteUser.tsx b/packages/icon/src/generated/InviteUser.tsx
index cc00069668..58d37a1d1f 100644
--- a/packages/icon/src/generated/InviteUser.tsx
+++ b/packages/icon/src/generated/InviteUser.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 04e22a7a87f2d3a9f361d9e97c72c3dd
+* @checksum 4ba94ee41c12971733bfe7f0a19c81e8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface InviteUserProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const InviteUser = ({
   role = 'img',
   ...props
 }: InviteUserProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const InviteUser = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'InviteUser', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Key.tsx b/packages/icon/src/generated/Key.tsx
index 0cf1ceb0a6..2065f6d5af 100644
--- a/packages/icon/src/generated/Key.tsx
+++ b/packages/icon/src/generated/Key.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a2934806347014c30e081f35f8b9d529
+* @checksum 55ba2fb46a0157b47d250416d7cee1da
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface KeyProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Key = ({
   role = 'img',
   ...props
 }: KeyProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Key = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Key', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Laptop.tsx b/packages/icon/src/generated/Laptop.tsx
index 0f8a9d461a..d7c1685ab4 100644
--- a/packages/icon/src/generated/Laptop.tsx
+++ b/packages/icon/src/generated/Laptop.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5315fbdd2a356385eae20cbedf98e9d1
+* @checksum ea53aed13dcb370149598289eca4dce8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface LaptopProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Laptop = ({
   role = 'img',
   ...props
 }: LaptopProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Laptop = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Laptop', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/LightningBolt.tsx b/packages/icon/src/generated/LightningBolt.tsx
index 3b732ed39a..9511faac06 100644
--- a/packages/icon/src/generated/LightningBolt.tsx
+++ b/packages/icon/src/generated/LightningBolt.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a10c975ffb48562637f9e402998205cb
+* @checksum f1b58eae365521a904046c519752b7ad
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface LightningBoltProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const LightningBolt = ({
   role = 'img',
   ...props
 }: LightningBoltProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const LightningBolt = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'LightningBolt', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Link.tsx b/packages/icon/src/generated/Link.tsx
index e3cff4d629..2fdc77ed2d 100644
--- a/packages/icon/src/generated/Link.tsx
+++ b/packages/icon/src/generated/Link.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5d87561d3f971173e87897338a2a5b8f
+* @checksum 53329c505e033f138485355a04be4f1e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface LinkProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Link = ({
   role = 'img',
   ...props
 }: LinkProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Link = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Link', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/List.tsx b/packages/icon/src/generated/List.tsx
index 6520edf46b..a1576ccfd1 100644
--- a/packages/icon/src/generated/List.tsx
+++ b/packages/icon/src/generated/List.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7b3c59c5c1f8183c33c10b130225e3d6
+* @checksum 68c07145089c9d2652b8857d95312f57
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ListProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const List = ({
   role = 'img',
   ...props
 }: ListProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const List = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'List', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Lock.tsx b/packages/icon/src/generated/Lock.tsx
index c5df97be87..413e68583d 100644
--- a/packages/icon/src/generated/Lock.tsx
+++ b/packages/icon/src/generated/Lock.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum db2944b5ea90810bd2054f7f98e32b30
+* @checksum f34dc805f2c98965ec89569e03a30966
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface LockProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Lock = ({
   role = 'img',
   ...props
 }: LockProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Lock = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Lock', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/LogIn.tsx b/packages/icon/src/generated/LogIn.tsx
index 69d5325646..ce8491a405 100644
--- a/packages/icon/src/generated/LogIn.tsx
+++ b/packages/icon/src/generated/LogIn.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3d056d9e5165a7723128a420b4ad15ec
+* @checksum d47828cec6f7c6028be6c54e95c9ed91
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface LogInProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const LogIn = ({
   role = 'img',
   ...props
 }: LogInProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const LogIn = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'LogIn', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/LogOut.tsx b/packages/icon/src/generated/LogOut.tsx
index 31d4ccc9ee..57a67380e5 100644
--- a/packages/icon/src/generated/LogOut.tsx
+++ b/packages/icon/src/generated/LogOut.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 00b937d8d2060846b56a44d9edf553ce
+* @checksum bd8c6c4bacb26cb7564b13c09155650b
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface LogOutProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const LogOut = ({
   role = 'img',
   ...props
 }: LogOutProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const LogOut = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'LogOut', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/MagnifyingGlass.tsx b/packages/icon/src/generated/MagnifyingGlass.tsx
index 38d7236592..784c203b1b 100644
--- a/packages/icon/src/generated/MagnifyingGlass.tsx
+++ b/packages/icon/src/generated/MagnifyingGlass.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 60b361f5d943c43ba4d2a55de4f99347
+* @checksum fcadccd495552292e9bfca5d6a1ea246
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MagnifyingGlassProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const MagnifyingGlass = ({
   role = 'img',
   ...props
 }: MagnifyingGlassProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const MagnifyingGlass = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'MagnifyingGlass', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Megaphone.tsx b/packages/icon/src/generated/Megaphone.tsx
index 2f1dad0219..2dea7ec26d 100644
--- a/packages/icon/src/generated/Megaphone.tsx
+++ b/packages/icon/src/generated/Megaphone.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 90dad46833764f8613e8b83f3c00a376
+* @checksum b061bbdd34e4523872295de410d3989a
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MegaphoneProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Megaphone = ({
   role = 'img',
   ...props
 }: MegaphoneProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Megaphone = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Megaphone', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Menu.tsx b/packages/icon/src/generated/Menu.tsx
index 117888e45b..1613f154f8 100644
--- a/packages/icon/src/generated/Menu.tsx
+++ b/packages/icon/src/generated/Menu.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1302681cd46d65becd40e8e91b091765
+* @checksum 57dace6012b1bb15e0bef37d13618007
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MenuProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Menu = ({
   role = 'img',
   ...props
 }: MenuProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Menu = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Menu', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Minus.tsx b/packages/icon/src/generated/Minus.tsx
index e1b522f6ab..a7c62a95f2 100644
--- a/packages/icon/src/generated/Minus.tsx
+++ b/packages/icon/src/generated/Minus.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9c244c1119801dc22acac1be9bc51d04
+* @checksum e1f0b478e23e2eac011f4e6c01c1c588
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MinusProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Minus = ({
   role = 'img',
   ...props
 }: MinusProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Minus = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Minus', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Mobile.tsx b/packages/icon/src/generated/Mobile.tsx
index dce6451424..4113746282 100644
--- a/packages/icon/src/generated/Mobile.tsx
+++ b/packages/icon/src/generated/Mobile.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1d9da6a1ce4eeeb3e0c6cac6a588ea9a
+* @checksum 590cde11eb372ef3e1626758d8edd3be
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MobileProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Mobile = ({
   role = 'img',
   ...props
 }: MobileProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Mobile = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Mobile', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Moon.tsx b/packages/icon/src/generated/Moon.tsx
index 654563bfe6..6edac388d7 100644
--- a/packages/icon/src/generated/Moon.tsx
+++ b/packages/icon/src/generated/Moon.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d7a3f24b41ad4f62c488d74dbcbbf9fa
+* @checksum b663f91fa185d7fac22cfa0b0bc83753
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MoonProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Moon = ({
   role = 'img',
   ...props
 }: MoonProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Moon = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Moon', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/MultiDirectionArrow.tsx b/packages/icon/src/generated/MultiDirectionArrow.tsx
index 07aaacc146..22576baf03 100644
--- a/packages/icon/src/generated/MultiDirectionArrow.tsx
+++ b/packages/icon/src/generated/MultiDirectionArrow.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c7cc7e4f42011f561655f1bd43f40695
+* @checksum 23e8a8859dc4696ef87adaead7594d12
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MultiDirectionArrowProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const MultiDirectionArrow = ({
   role = 'img',
   ...props
 }: MultiDirectionArrowProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const MultiDirectionArrow = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'MultiDirectionArrow', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/MultiLayers.tsx b/packages/icon/src/generated/MultiLayers.tsx
index 921d442353..098231ab65 100644
--- a/packages/icon/src/generated/MultiLayers.tsx
+++ b/packages/icon/src/generated/MultiLayers.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 54a552a4db8de48df83aad856752f1d6
+* @checksum 138c8977690ae049e37a450575468ccb
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface MultiLayersProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const MultiLayers = ({
   role = 'img',
   ...props
 }: MultiLayersProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const MultiLayers = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'MultiLayers', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/NavCollapse.tsx b/packages/icon/src/generated/NavCollapse.tsx
index 466fdc1df2..a05ac0bcc5 100644
--- a/packages/icon/src/generated/NavCollapse.tsx
+++ b/packages/icon/src/generated/NavCollapse.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7e1173827864fd0acaf7131938be6c0a
+* @checksum a468e130ebd08f00aed43cd499959b89
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface NavCollapseProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NavCollapse = ({
   role = 'img',
   ...props
 }: NavCollapseProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NavCollapse = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NavCollapse', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/NavExpand.tsx b/packages/icon/src/generated/NavExpand.tsx
index 1e9e506d71..08f3e24c51 100644
--- a/packages/icon/src/generated/NavExpand.tsx
+++ b/packages/icon/src/generated/NavExpand.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bfe28d9a31cde7325ff344b05af73ff8
+* @checksum 9839b61bd5a9ead488763f7a2446abe7
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface NavExpandProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NavExpand = ({
   role = 'img',
   ...props
 }: NavExpandProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NavExpand = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NavExpand', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/NoFilter.tsx b/packages/icon/src/generated/NoFilter.tsx
index 5c9ed69f33..47974dab19 100644
--- a/packages/icon/src/generated/NoFilter.tsx
+++ b/packages/icon/src/generated/NoFilter.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e9eab9c247dbec275fe6d580566d61dc
+* @checksum 6454cb046f256c5df44b6666c498a003
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface NoFilterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NoFilter = ({
   role = 'img',
   ...props
 }: NoFilterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NoFilter = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NoFilter', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/NotAllowed.tsx b/packages/icon/src/generated/NotAllowed.tsx
index e391cde356..e67bd282a6 100644
--- a/packages/icon/src/generated/NotAllowed.tsx
+++ b/packages/icon/src/generated/NotAllowed.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 032177bb1c049b718edfcb232351db03
+* @checksum 04194aa4c07cac1778b7630760754009
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface NotAllowedProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NotAllowed = ({
   role = 'img',
   ...props
 }: NotAllowedProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NotAllowed = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NotAllowed', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Note.tsx b/packages/icon/src/generated/Note.tsx
index 19e20202a5..f92ef9f26c 100644
--- a/packages/icon/src/generated/Note.tsx
+++ b/packages/icon/src/generated/Note.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 92571b38141a3b76af9af70766e8984f
+* @checksum da17fde6b187b1f7f2e05081c64026f8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface NoteProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Note = ({
   role = 'img',
   ...props
 }: NoteProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Note = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Note', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/NumberedList.tsx b/packages/icon/src/generated/NumberedList.tsx
index 51e8a28c50..ee7385a030 100644
--- a/packages/icon/src/generated/NumberedList.tsx
+++ b/packages/icon/src/generated/NumberedList.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 78d5ea655c25d7d086fb19cccabdd527
+* @checksum 7eba0ef41afe30759b27cc28c078d9f8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface NumberedListProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const NumberedList = ({
   role = 'img',
   ...props
 }: NumberedListProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const NumberedList = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'NumberedList', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/OpenNewTab.tsx b/packages/icon/src/generated/OpenNewTab.tsx
index 06937e94c2..89c4d2fcaf 100644
--- a/packages/icon/src/generated/OpenNewTab.tsx
+++ b/packages/icon/src/generated/OpenNewTab.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0550f2c3df7e2061ea801aecc3f4c8bd
+* @checksum d4005c46811f3c637e4b82937003bf3e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface OpenNewTabProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const OpenNewTab = ({
   role = 'img',
   ...props
 }: OpenNewTabProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const OpenNewTab = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'OpenNewTab', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/OutlineFavorite.tsx b/packages/icon/src/generated/OutlineFavorite.tsx
index 1d1db68e41..b55e20d724 100644
--- a/packages/icon/src/generated/OutlineFavorite.tsx
+++ b/packages/icon/src/generated/OutlineFavorite.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum a0947f6a8bc4f0aa42a0db795f6439f6
+* @checksum 083eed322a2beb8496f2c97039c3e6d4
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface OutlineFavoriteProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const OutlineFavorite = ({
   role = 'img',
   ...props
 }: OutlineFavoriteProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const OutlineFavorite = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'OutlineFavorite', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Package.tsx b/packages/icon/src/generated/Package.tsx
index da86c17fb7..4615f9eeb2 100644
--- a/packages/icon/src/generated/Package.tsx
+++ b/packages/icon/src/generated/Package.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6e59261cf982bdfcdfdce185d5ad6a28
+* @checksum 80ef69108a03312295187bd343f0835a
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PackageProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Package = ({
   role = 'img',
   ...props
 }: PackageProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Package = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Package', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Pause.tsx b/packages/icon/src/generated/Pause.tsx
index f6e5f92836..472ecd7ca2 100644
--- a/packages/icon/src/generated/Pause.tsx
+++ b/packages/icon/src/generated/Pause.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ee75535a9d92a7747f49a72adef467a2
+* @checksum 32498b21a72a9ac79ad0f49862796caf
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PauseProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Pause = ({
   role = 'img',
   ...props
 }: PauseProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Pause = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Pause', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Pending.tsx b/packages/icon/src/generated/Pending.tsx
index 77a0bec13b..b87a13038f 100644
--- a/packages/icon/src/generated/Pending.tsx
+++ b/packages/icon/src/generated/Pending.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2990101e09c44c0d8cfafeabe85560fa
+* @checksum fe84beb7e01f087e26cb0e1d62e38a96
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PendingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Pending = ({
   role = 'img',
   ...props
 }: PendingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Pending = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Pending', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Person.tsx b/packages/icon/src/generated/Person.tsx
index 5306c60d3a..6dd146b3ff 100644
--- a/packages/icon/src/generated/Person.tsx
+++ b/packages/icon/src/generated/Person.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 31cf947007014102c24311d4253dbc79
+* @checksum 5b759e05777425b9385a72c39e349284
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PersonProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Person = ({
   role = 'img',
   ...props
 }: PersonProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Person = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Person', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/PersonGroup.tsx b/packages/icon/src/generated/PersonGroup.tsx
index 0b6d2e064f..6b71c91755 100644
--- a/packages/icon/src/generated/PersonGroup.tsx
+++ b/packages/icon/src/generated/PersonGroup.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3bba5f39fa2c4a59ec027bce5e35d45
+* @checksum 601e6ecb1c75062c883f6a0b71dcea16
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PersonGroupProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const PersonGroup = ({
   role = 'img',
   ...props
 }: PersonGroupProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const PersonGroup = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'PersonGroup', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/PersonWithLock.tsx b/packages/icon/src/generated/PersonWithLock.tsx
index c86f641ffb..d80cc4ac1e 100644
--- a/packages/icon/src/generated/PersonWithLock.tsx
+++ b/packages/icon/src/generated/PersonWithLock.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c9ac63659fb3944c090d94f1824ce291
+* @checksum fd61868248373ec9a8906e59814e6799
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PersonWithLockProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const PersonWithLock = ({
   role = 'img',
   ...props
 }: PersonWithLockProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const PersonWithLock = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'PersonWithLock', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Pin.tsx b/packages/icon/src/generated/Pin.tsx
index 6bcf39d347..e31155877a 100644
--- a/packages/icon/src/generated/Pin.tsx
+++ b/packages/icon/src/generated/Pin.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0f84209bef2f8c074241c48b4730e561
+* @checksum 58e7153beda5946ddc4f29eb31ddb2f2
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PinProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Pin = ({
   role = 'img',
   ...props
 }: PinProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Pin = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Pin', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Play.tsx b/packages/icon/src/generated/Play.tsx
index 885e2bc0d2..27b369e6f6 100644
--- a/packages/icon/src/generated/Play.tsx
+++ b/packages/icon/src/generated/Play.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum eeea36a12d7e0c78bf3aad12c14a8a5d
+* @checksum dd63d3e1a63feb369c7793579dc03cb4
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PlayProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Play = ({
   role = 'img',
   ...props
 }: PlayProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Play = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Play', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Plus.tsx b/packages/icon/src/generated/Plus.tsx
index 4dc6c22033..c536378aa3 100644
--- a/packages/icon/src/generated/Plus.tsx
+++ b/packages/icon/src/generated/Plus.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0b56c268ab06407a7c924db85ad2a16b
+* @checksum 2985e7c22cafc8aee7499ec3e9e99d3c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PlusProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Plus = ({
   role = 'img',
   ...props
 }: PlusProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Plus = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Plus', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/PlusWithCircle.tsx b/packages/icon/src/generated/PlusWithCircle.tsx
index f46079df90..1dd957cfdb 100644
--- a/packages/icon/src/generated/PlusWithCircle.tsx
+++ b/packages/icon/src/generated/PlusWithCircle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4a198f81b67f4fff8bfad90b83e5a50e
+* @checksum cb5f557bdb5928b1aabe5ec34bcb72b3
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PlusWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const PlusWithCircle = ({
   role = 'img',
   ...props
 }: PlusWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const PlusWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'PlusWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Primary.tsx b/packages/icon/src/generated/Primary.tsx
index 0aa258ad74..00862abf61 100644
--- a/packages/icon/src/generated/Primary.tsx
+++ b/packages/icon/src/generated/Primary.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2e1672e47a094394bb69d18d34d07c47
+* @checksum 3c53c2e96af3e55e88847edc1492781c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface PrimaryProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Primary = ({
   role = 'img',
   ...props
 }: PrimaryProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Primary = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Primary', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Project.tsx b/packages/icon/src/generated/Project.tsx
index fa6c6ca853..4e8e1f9b36 100644
--- a/packages/icon/src/generated/Project.tsx
+++ b/packages/icon/src/generated/Project.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d3fcc0dee5e5431858994a79e3d5b9b3
+* @checksum 0b63e5d3545a1caffcf310659518e8e9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ProjectProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Project = ({
   role = 'img',
   ...props
 }: ProjectProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Project = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Project', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/QuestionMarkWithCircle.tsx b/packages/icon/src/generated/QuestionMarkWithCircle.tsx
index 6cb21a0390..809dd3708a 100644
--- a/packages/icon/src/generated/QuestionMarkWithCircle.tsx
+++ b/packages/icon/src/generated/QuestionMarkWithCircle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e3c77fdc2bdcc5a2511a78ec3a8058b1
+* @checksum e8d911b6712a20a06b08622aa024bcb8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface QuestionMarkWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const QuestionMarkWithCircle = ({
   role = 'img',
   ...props
 }: QuestionMarkWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const QuestionMarkWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'QuestionMarkWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Read.tsx b/packages/icon/src/generated/Read.tsx
index c97f600fb3..f43006bebe 100644
--- a/packages/icon/src/generated/Read.tsx
+++ b/packages/icon/src/generated/Read.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2048eecd64e1b11d7b3e08314290329a
+* @checksum c8ba5b394dffb71ce28c3e47de497f15
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ReadProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Read = ({
   role = 'img',
   ...props
 }: ReadProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Read = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Read', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Recommended.tsx b/packages/icon/src/generated/Recommended.tsx
index 9eb962b96a..86db8e35a4 100644
--- a/packages/icon/src/generated/Recommended.tsx
+++ b/packages/icon/src/generated/Recommended.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 39c5c559a039bfdc941799fa127eacb8
+* @checksum a1beb9ee097f05d95e06fc05789c00bd
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface RecommendedProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Recommended = ({
   role = 'img',
   ...props
 }: RecommendedProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Recommended = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Recommended', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Redo.tsx b/packages/icon/src/generated/Redo.tsx
index 837842d137..f4a364e4f2 100644
--- a/packages/icon/src/generated/Redo.tsx
+++ b/packages/icon/src/generated/Redo.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 94bb886a2e3c4fbccf7f51d22f460fb6
+* @checksum f483fbf2370aef61ac33412fde3e377f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface RedoProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Redo = ({
   role = 'img',
   ...props
 }: RedoProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Redo = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Redo', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Refresh.tsx b/packages/icon/src/generated/Refresh.tsx
index fa72d21de0..c1e16ec92b 100644
--- a/packages/icon/src/generated/Refresh.tsx
+++ b/packages/icon/src/generated/Refresh.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f1c3390781c6f99bf6f88aa6faa5a31d
+* @checksum 3224c594f852483d1da0b28852435dc3
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface RefreshProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Refresh = ({
   role = 'img',
   ...props
 }: RefreshProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Refresh = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Refresh', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Relationship.tsx b/packages/icon/src/generated/Relationship.tsx
index 89ddcf34e9..c738683064 100644
--- a/packages/icon/src/generated/Relationship.tsx
+++ b/packages/icon/src/generated/Relationship.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f1b6e767453a9635bee72cf897775edb
+* @checksum 581e14df157dd41acbe56d87377f3a45
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface RelationshipProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Relationship = ({
   role = 'img',
   ...props
 }: RelationshipProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Relationship = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Relationship', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ReplicaSet.tsx b/packages/icon/src/generated/ReplicaSet.tsx
index 71d148858f..6073313fbe 100644
--- a/packages/icon/src/generated/ReplicaSet.tsx
+++ b/packages/icon/src/generated/ReplicaSet.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 2bea089178e1fab0526b7fa4268d176b
+* @checksum be0fb6f7dabb7d6c40470727be5f32d9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ReplicaSetProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ReplicaSet = ({
   role = 'img',
   ...props
 }: ReplicaSetProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ReplicaSet = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ReplicaSet', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Resize.tsx b/packages/icon/src/generated/Resize.tsx
index 92a30ee3db..656f017aef 100644
--- a/packages/icon/src/generated/Resize.tsx
+++ b/packages/icon/src/generated/Resize.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fee3256c80da5096170156f59e09e087
+* @checksum 2f9e78aed457fa72a1e5d13cae45df6e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ResizeProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Resize = ({
   role = 'img',
   ...props
 }: ResizeProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Resize = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Resize', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Resource.tsx b/packages/icon/src/generated/Resource.tsx
index 32f8ffb533..a94f618740 100644
--- a/packages/icon/src/generated/Resource.tsx
+++ b/packages/icon/src/generated/Resource.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 9ec4992f3837f7bd0837fb90a4d9ed89
+* @checksum 9fe72420fd1bc7e6ca78c980da3e8cbb
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ResourceProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Resource = ({
   role = 'img',
   ...props
 }: ResourceProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Resource = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Resource', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Return.tsx b/packages/icon/src/generated/Return.tsx
index 7ef3bec91f..87631d1fe1 100644
--- a/packages/icon/src/generated/Return.tsx
+++ b/packages/icon/src/generated/Return.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f2504ef6bb18fa9ef178d7936f437bd6
+* @checksum cb455ae81426632a7fde296ac3ee93e4
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ReturnProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Return = ({
   role = 'img',
   ...props
 }: ReturnProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Return = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Return', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Revert.tsx b/packages/icon/src/generated/Revert.tsx
index 5e7c58c0c8..495a471ec6 100644
--- a/packages/icon/src/generated/Revert.tsx
+++ b/packages/icon/src/generated/Revert.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ceebe674c72b8db63286c07567793217
+* @checksum c482456b583c7bc64b059e7d0bd7dfb7
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface RevertProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Revert = ({
   role = 'img',
   ...props
 }: RevertProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Revert = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Revert', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Router.tsx b/packages/icon/src/generated/Router.tsx
index 92fcc56ba0..d400c15907 100644
--- a/packages/icon/src/generated/Router.tsx
+++ b/packages/icon/src/generated/Router.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 26b268485a87705e369fef3cee115d85
+* @checksum 87bf274c98c4286ce21666e17bf6d0cf
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface RouterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Router = ({
   role = 'img',
   ...props
 }: RouterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Router = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Router', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/SMS.tsx b/packages/icon/src/generated/SMS.tsx
index 12dc9d6ef3..01e5c849dc 100644
--- a/packages/icon/src/generated/SMS.tsx
+++ b/packages/icon/src/generated/SMS.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ce13ff18d80b041de18dc658f749a828
+* @checksum 02c507e0e0b5e19eb993a161b570c272
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SMSProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SMS = ({
   role = 'img',
   ...props
 }: SMSProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SMS = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SMS', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Save.tsx b/packages/icon/src/generated/Save.tsx
index b2b04624d9..0603410f02 100644
--- a/packages/icon/src/generated/Save.tsx
+++ b/packages/icon/src/generated/Save.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 904983e53706275facd1f094d926a4cf
+* @checksum fc3c31e83aa13d4942bf63257c1b1e74
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SaveProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Save = ({
   role = 'img',
   ...props
 }: SaveProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Save = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Save', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/SearchIndex.tsx b/packages/icon/src/generated/SearchIndex.tsx
index 654264e3a7..12b71131e4 100644
--- a/packages/icon/src/generated/SearchIndex.tsx
+++ b/packages/icon/src/generated/SearchIndex.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 84fafe19c477c2660e835a752627ee27
+* @checksum ba804a294af513ead63d9ee1fa8387ec
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SearchIndexProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SearchIndex = ({
   role = 'img',
   ...props
 }: SearchIndexProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SearchIndex = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SearchIndex', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Secondary.tsx b/packages/icon/src/generated/Secondary.tsx
index 32fb68f9c3..0cf19ba43f 100644
--- a/packages/icon/src/generated/Secondary.tsx
+++ b/packages/icon/src/generated/Secondary.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 88240cf63eabdb680196493723db69de
+* @checksum 07a18998556ab8687deff6e047d975d6
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SecondaryProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Secondary = ({
   role = 'img',
   ...props
 }: SecondaryProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Secondary = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Secondary', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Serverless.tsx b/packages/icon/src/generated/Serverless.tsx
index 65e067b5ac..fa8a178fe8 100644
--- a/packages/icon/src/generated/Serverless.tsx
+++ b/packages/icon/src/generated/Serverless.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 6236dd59a36b30b56a85d2551a5ecb37
+* @checksum 8669a9fce8f62ddde57601c0fea559d8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ServerlessProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Serverless = ({
   role = 'img',
   ...props
 }: ServerlessProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Serverless = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Serverless', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Settings.tsx b/packages/icon/src/generated/Settings.tsx
index 9a22f53723..98516dbc62 100644
--- a/packages/icon/src/generated/Settings.tsx
+++ b/packages/icon/src/generated/Settings.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 8dd130a799c0e750237f9d7e9bf1973b
+* @checksum 34b559a3c2f751afd2269bd8ba585287
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SettingsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Settings = ({
   role = 'img',
   ...props
 }: SettingsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Settings = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Settings', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ShardedCluster.tsx b/packages/icon/src/generated/ShardedCluster.tsx
index ad179067df..3cfbdc90be 100644
--- a/packages/icon/src/generated/ShardedCluster.tsx
+++ b/packages/icon/src/generated/ShardedCluster.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum bce97cf1d21ec506245a6e1311775b42
+* @checksum 24886fe418011a9a47791830f528a4d1
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ShardedClusterProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ShardedCluster = ({
   role = 'img',
   ...props
 }: ShardedClusterProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ShardedCluster = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ShardedCluster', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Shell.tsx b/packages/icon/src/generated/Shell.tsx
index 4462d94775..5569b07ba2 100644
--- a/packages/icon/src/generated/Shell.tsx
+++ b/packages/icon/src/generated/Shell.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4b16b5ec09706e8eff27700d81d1b23b
+* @checksum f9a5da06d04b48e2d9ae5d23741a1130
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ShellProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shell = ({
   role = 'img',
   ...props
 }: ShellProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shell = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shell', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Shield.tsx b/packages/icon/src/generated/Shield.tsx
index 8068d3c051..c8b2349f63 100644
--- a/packages/icon/src/generated/Shield.tsx
+++ b/packages/icon/src/generated/Shield.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 70cc6170af301b7a5ccc2e39f2ae8d34
+* @checksum abb8c5f609486e99e73950f9028c134c
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ShieldProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shield = ({
   role = 'img',
   ...props
 }: ShieldProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shield = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shield', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Shirt.tsx b/packages/icon/src/generated/Shirt.tsx
index 009876fe7c..e274661d5b 100644
--- a/packages/icon/src/generated/Shirt.tsx
+++ b/packages/icon/src/generated/Shirt.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 98b2f66e19898c84f1dce726e066deb6
+* @checksum f1a02e2a9e336b8a9b7c520208704edd
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ShirtProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shirt = ({
   role = 'img',
   ...props
 }: ShirtProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shirt = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shirt', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Shortcut.tsx b/packages/icon/src/generated/Shortcut.tsx
index afba63caa3..70b49e4310 100644
--- a/packages/icon/src/generated/Shortcut.tsx
+++ b/packages/icon/src/generated/Shortcut.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 54866582b4ce0e776960df3186a39b95
+* @checksum e798fbed73ad163471fcfaa4b76d57d5
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ShortcutProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Shortcut = ({
   role = 'img',
   ...props
 }: ShortcutProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Shortcut = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Shortcut', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/SortAscending.tsx b/packages/icon/src/generated/SortAscending.tsx
index 35d8e3b2e5..0808e4a70d 100644
--- a/packages/icon/src/generated/SortAscending.tsx
+++ b/packages/icon/src/generated/SortAscending.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d467fb89729cd88f35c539371faf8b14
+* @checksum 62f0dd9b51d6c713617e489b2a83c227
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SortAscendingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SortAscending = ({
   role = 'img',
   ...props
 }: SortAscendingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SortAscending = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SortAscending', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/SortDescending.tsx b/packages/icon/src/generated/SortDescending.tsx
index 8acc89e286..2058607b08 100644
--- a/packages/icon/src/generated/SortDescending.tsx
+++ b/packages/icon/src/generated/SortDescending.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 77ca38381a8dfb3d248f686f85aae34c
+* @checksum 4e69ec9ddc0c6d6ed69247ae247032ca
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SortDescendingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SortDescending = ({
   role = 'img',
   ...props
 }: SortDescendingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SortDescending = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SortDescending', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Sparkle.tsx b/packages/icon/src/generated/Sparkle.tsx
index 82f7d99f1e..789c47e902 100644
--- a/packages/icon/src/generated/Sparkle.tsx
+++ b/packages/icon/src/generated/Sparkle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum dcb075c6ece22142352c3c8ccae791a9
+* @checksum 75b9f89083a70770e5a05835b62e9be9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SparkleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Sparkle = ({
   role = 'img',
   ...props
 }: SparkleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Sparkle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Sparkle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/SplitHorizontal.tsx b/packages/icon/src/generated/SplitHorizontal.tsx
index f535f6a96e..5c6dfbb88a 100644
--- a/packages/icon/src/generated/SplitHorizontal.tsx
+++ b/packages/icon/src/generated/SplitHorizontal.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 79804e11ff1c22567752e7be4c9d5f7b
+* @checksum e15e4da45251df6b440e7bb5f7f4878f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SplitHorizontalProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SplitHorizontal = ({
   role = 'img',
   ...props
 }: SplitHorizontalProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SplitHorizontal = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SplitHorizontal', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/SplitVertical.tsx b/packages/icon/src/generated/SplitVertical.tsx
index 160dbe8760..8b80053e07 100644
--- a/packages/icon/src/generated/SplitVertical.tsx
+++ b/packages/icon/src/generated/SplitVertical.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 23a43817b3ef9eeb03f289536ea833c4
+* @checksum dec658baa8100a5e2d4c11fc8c1aff2b
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SplitVerticalProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const SplitVertical = ({
   role = 'img',
   ...props
 }: SplitVerticalProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const SplitVertical = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'SplitVertical', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Stitch.tsx b/packages/icon/src/generated/Stitch.tsx
index 73dddd80c5..aa30daef15 100644
--- a/packages/icon/src/generated/Stitch.tsx
+++ b/packages/icon/src/generated/Stitch.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4f795369a06c595141210f603e63a331
+* @checksum d493a0d435d280bf2e91e7d81c824d53
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface StitchProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Stitch = ({
   role = 'img',
   ...props
 }: StitchProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Stitch = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Stitch', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Stop.tsx b/packages/icon/src/generated/Stop.tsx
index 53d3b96293..ddae5a88c5 100644
--- a/packages/icon/src/generated/Stop.tsx
+++ b/packages/icon/src/generated/Stop.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 02824b2c1413b47ba291fb039342b16e
+* @checksum fc58d0b6198352ae94326cf8565e5aa1
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface StopProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Stop = ({
   role = 'img',
   ...props
 }: StopProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Stop = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Stop', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<rect x={3} y={3} width={10} height={10} rx={1} fill={'currentColor'} /></svg>;
 };
 Stop.displayName = 'Stop';
 Stop.isGlyph = true;
diff --git a/packages/icon/src/generated/Streaming.tsx b/packages/icon/src/generated/Streaming.tsx
index 843b6adf11..8f7584d278 100644
--- a/packages/icon/src/generated/Streaming.tsx
+++ b/packages/icon/src/generated/Streaming.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum cecb0b1fef059ae78d0925fc0d134682
+* @checksum 98fc2e99b703a2989b258cc1aa497d53
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface StreamingProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Streaming = ({
   role = 'img',
   ...props
 }: StreamingProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Streaming = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Streaming', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/String.tsx b/packages/icon/src/generated/String.tsx
index 7266117f52..f8f24243f5 100644
--- a/packages/icon/src/generated/String.tsx
+++ b/packages/icon/src/generated/String.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3c8da6506796ce168a23d28f387d8764
+* @checksum 5b5f5b87ce7dff980f6138dd597651c6
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface StringProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const String = ({
   role = 'img',
   ...props
 }: StringProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const String = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'String', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Sun.tsx b/packages/icon/src/generated/Sun.tsx
index a98335ac1b..6183907772 100644
--- a/packages/icon/src/generated/Sun.tsx
+++ b/packages/icon/src/generated/Sun.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 3b93aec0df1efae499d954276194c9ff
+* @checksum c305bc7f339564a51cd2d44fbd686c00
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SunProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Sun = ({
   role = 'img',
   ...props
 }: SunProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Sun = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Sun', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Support.tsx b/packages/icon/src/generated/Support.tsx
index 4be9bb180c..a0fd077f1c 100644
--- a/packages/icon/src/generated/Support.tsx
+++ b/packages/icon/src/generated/Support.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 48724d477e4bdb442f5157382ad8ccf2
+* @checksum 60a656fec2bd367fd3a1b1a313f78703
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SupportProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Support = ({
   role = 'img',
   ...props
 }: SupportProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Support = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Support', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Sweep.tsx b/packages/icon/src/generated/Sweep.tsx
index f17068f86c..d3f9baccc5 100644
--- a/packages/icon/src/generated/Sweep.tsx
+++ b/packages/icon/src/generated/Sweep.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5b174776545eac61bde7b82bae7118e3
+* @checksum 6cb2e98030782fa21d2b4ded9bb26092
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SweepProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Sweep = ({
   role = 'img',
   ...props
 }: SweepProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Sweep = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Sweep', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Table.tsx b/packages/icon/src/generated/Table.tsx
index 649ed31d5f..3aca87ddae 100644
--- a/packages/icon/src/generated/Table.tsx
+++ b/packages/icon/src/generated/Table.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b4b9384b49c89a815def3b92cb3cb073
+* @checksum 4f4cbffa0e538ec66121527af5f28ace
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface TableProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Table = ({
   role = 'img',
   ...props
 }: TableProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Table = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Table', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Tag.tsx b/packages/icon/src/generated/Tag.tsx
index d77626b386..eeabe41d64 100644
--- a/packages/icon/src/generated/Tag.tsx
+++ b/packages/icon/src/generated/Tag.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5cd33c32bd2b3617c7f6ec870e968975
+* @checksum e31ff5fe7d3baa05179910bc0facaf86
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface TagProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Tag = ({
   role = 'img',
   ...props
 }: TagProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Tag = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Tag', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/TemporaryTable.tsx b/packages/icon/src/generated/TemporaryTable.tsx
index 4d67c22819..b9557e6880 100644
--- a/packages/icon/src/generated/TemporaryTable.tsx
+++ b/packages/icon/src/generated/TemporaryTable.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 165f652d98c2d6a4c0b7bdbadf0a7e1e
+* @checksum 5ac113f484ea339e9a44c5e9837ee54a
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface TemporaryTableProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const TemporaryTable = ({
   role = 'img',
   ...props
 }: TemporaryTableProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const TemporaryTable = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'TemporaryTable', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ThumbsDown.tsx b/packages/icon/src/generated/ThumbsDown.tsx
index febf441e43..234a522161 100644
--- a/packages/icon/src/generated/ThumbsDown.tsx
+++ b/packages/icon/src/generated/ThumbsDown.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 71f3824af79a2a53ea638b2feb5c61e7
+* @checksum 443d526420d745af73b018ec81b38f80
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ThumbsDownProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ThumbsDown = ({
   role = 'img',
   ...props
 }: ThumbsDownProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ThumbsDown = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ThumbsDown', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/ThumbsUp.tsx b/packages/icon/src/generated/ThumbsUp.tsx
index c9649a52ac..e01a49e177 100644
--- a/packages/icon/src/generated/ThumbsUp.tsx
+++ b/packages/icon/src/generated/ThumbsUp.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4143793eb7004a29fdeef4eaa9a3018a
+* @checksum 0ac755d88a0fdbb41f8d2f14e1cc86bb
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ThumbsUpProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const ThumbsUp = ({
   role = 'img',
   ...props
 }: ThumbsUpProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const ThumbsUp = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'ThumbsUp', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/TimeSeries.tsx b/packages/icon/src/generated/TimeSeries.tsx
index e45f831b2a..54f8c12d37 100644
--- a/packages/icon/src/generated/TimeSeries.tsx
+++ b/packages/icon/src/generated/TimeSeries.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e6fc7034b28a94dc36bff3b57bdebbcd
+* @checksum bb13b5e7b3836ec2b808bcae700a4584
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface TimeSeriesProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const TimeSeries = ({
   role = 'img',
   ...props
 }: TimeSeriesProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const TimeSeries = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'TimeSeries', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/TimeSeriesCollection.tsx b/packages/icon/src/generated/TimeSeriesCollection.tsx
index 169f975e52..b7b632a453 100644
--- a/packages/icon/src/generated/TimeSeriesCollection.tsx
+++ b/packages/icon/src/generated/TimeSeriesCollection.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum badaa5f7f2f1e04267653028daf9a5d4
+* @checksum ff34b63a3b354a28d71e15f1510e4611
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface TimeSeriesCollectionProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const TimeSeriesCollection = ({
   role = 'img',
   ...props
 }: TimeSeriesCollectionProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const TimeSeriesCollection = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'TimeSeriesCollection', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Trash.tsx b/packages/icon/src/generated/Trash.tsx
index e24dccbc28..aa09d15e9f 100644
--- a/packages/icon/src/generated/Trash.tsx
+++ b/packages/icon/src/generated/Trash.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 4ec6190fcaa732d59f9b62a914dd5748
+* @checksum e9e429247764fbcf7c2387a22520a2a5
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface TrashProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Trash = ({
   role = 'img',
   ...props
 }: TrashProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Trash = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Trash', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Undo.tsx b/packages/icon/src/generated/Undo.tsx
index baa3ae30b1..ac9514e3c8 100644
--- a/packages/icon/src/generated/Undo.tsx
+++ b/packages/icon/src/generated/Undo.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f252343c842bb7d7db324ecc18b5b8ed
+* @checksum 43e92e1a2c6352037d6aadf06ad8650e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface UndoProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Undo = ({
   role = 'img',
   ...props
 }: UndoProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Undo = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Undo', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/University.tsx b/packages/icon/src/generated/University.tsx
index fc1438ff36..80c28f00ee 100644
--- a/packages/icon/src/generated/University.tsx
+++ b/packages/icon/src/generated/University.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 58486ad5c0edb233fb2565d2a2cfbbcf
+* @checksum 6243c8188f23f3526141618b40aa83f0
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface UniversityProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const University = ({
   role = 'img',
   ...props
 }: UniversityProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const University = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'University', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Unlock.tsx b/packages/icon/src/generated/Unlock.tsx
index c40df500cc..a282675170 100644
--- a/packages/icon/src/generated/Unlock.tsx
+++ b/packages/icon/src/generated/Unlock.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1398661254afbd25f082d3802da4e54d
+* @checksum 5561ad9b70a705f5b3869d75d89ebecf
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface UnlockProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Unlock = ({
   role = 'img',
   ...props
 }: UnlockProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Unlock = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Unlock', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Unsorted.tsx b/packages/icon/src/generated/Unsorted.tsx
index 522c7c7fa3..c452baf4d2 100644
--- a/packages/icon/src/generated/Unsorted.tsx
+++ b/packages/icon/src/generated/Unsorted.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b478bddb140a3412f644139063f5fca3
+* @checksum 03d8fb5bfa3dcf38855991adeea054a4
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface UnsortedProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Unsorted = ({
   role = 'img',
   ...props
 }: UnsortedProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Unsorted = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Unsorted', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/UpDownCarets.tsx b/packages/icon/src/generated/UpDownCarets.tsx
index 272feed9bd..6b53d0d1b7 100644
--- a/packages/icon/src/generated/UpDownCarets.tsx
+++ b/packages/icon/src/generated/UpDownCarets.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 0d09fd5ba0e292136e7d8c6dae74fcc8
+* @checksum 56f314b91e16d9b293472635828925fe
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface UpDownCaretsProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const UpDownCarets = ({
   role = 'img',
   ...props
 }: UpDownCaretsProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const UpDownCarets = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'UpDownCarets', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Upload.tsx b/packages/icon/src/generated/Upload.tsx
index 9908d65449..870ae39e81 100644
--- a/packages/icon/src/generated/Upload.tsx
+++ b/packages/icon/src/generated/Upload.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 5a585242d556b5b40d7dc32e59be15aa
+* @checksum b45b46954ead2faa612a6b42fba434d9
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface UploadProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Upload = ({
   role = 'img',
   ...props
 }: UploadProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Upload = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Upload', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/VerticalEllipsis.tsx b/packages/icon/src/generated/VerticalEllipsis.tsx
index 6b4cf85507..d6b4601cc1 100644
--- a/packages/icon/src/generated/VerticalEllipsis.tsx
+++ b/packages/icon/src/generated/VerticalEllipsis.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum fccdd3758844d746064dd4942777cacd
+* @checksum 97606a0994feab2e88f69f108d1a5f3e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface VerticalEllipsisProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const VerticalEllipsis = ({
   role = 'img',
   ...props
 }: VerticalEllipsisProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const VerticalEllipsis = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'VerticalEllipsis', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/View.tsx b/packages/icon/src/generated/View.tsx
index 82beedda8e..41092844d7 100644
--- a/packages/icon/src/generated/View.tsx
+++ b/packages/icon/src/generated/View.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 30dc1f6a39c2d65b6fcb241025159b77
+* @checksum cbd721211421954cd313dfb469531874
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ViewProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const View = ({
   role = 'img',
   ...props
 }: ViewProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const View = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'View', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Visibility.tsx b/packages/icon/src/generated/Visibility.tsx
index 2e0617e276..8de2c0ad26 100644
--- a/packages/icon/src/generated/Visibility.tsx
+++ b/packages/icon/src/generated/Visibility.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum b3ee5e82a13af887c9ab15bda1c229fa
+* @checksum f0e6dd74aee5ad2ce83e44f083e87714
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface VisibilityProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Visibility = ({
   role = 'img',
   ...props
 }: VisibilityProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Visibility = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Visibility', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/VisibilityOff.tsx b/packages/icon/src/generated/VisibilityOff.tsx
index 03e8d51bf8..4cdecf954d 100644
--- a/packages/icon/src/generated/VisibilityOff.tsx
+++ b/packages/icon/src/generated/VisibilityOff.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e01caf6dcdfaae2f04cfcc60f165ea12
+* @checksum 129319f889503fc65f3a32a3f599950e
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface VisibilityOffProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const VisibilityOff = ({
   role = 'img',
   ...props
 }: VisibilityOffProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const VisibilityOff = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'VisibilityOff', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Warning.tsx b/packages/icon/src/generated/Warning.tsx
index b2e4228521..a1dbf87fdd 100644
--- a/packages/icon/src/generated/Warning.tsx
+++ b/packages/icon/src/generated/Warning.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 035040f166e113ed89f47afdcd0e6ba9
+* @checksum 0c70b15126c8ec6b8db47542e99ca8a1
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface WarningProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Warning = ({
   role = 'img',
   ...props
 }: WarningProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Warning = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Warning', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Wizard.tsx b/packages/icon/src/generated/Wizard.tsx
index 062403188d..3561885eea 100644
--- a/packages/icon/src/generated/Wizard.tsx
+++ b/packages/icon/src/generated/Wizard.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1a58301da72bb805197080c3015df426
+* @checksum fa20d3b6fe28c0c5813895bcb2f89f34
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface WizardProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Wizard = ({
   role = 'img',
   ...props
 }: WizardProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Wizard = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Wizard', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Wrench.tsx b/packages/icon/src/generated/Wrench.tsx
index 1c2a05e656..e6ff31c239 100644
--- a/packages/icon/src/generated/Wrench.tsx
+++ b/packages/icon/src/generated/Wrench.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7e1030317445aa257afea5afd5508d8a
+* @checksum 38055181bb9a97d91f3fddf9c72ec6a6
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface WrenchProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Wrench = ({
   role = 'img',
   ...props
 }: WrenchProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Wrench = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Wrench', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/Write.tsx b/packages/icon/src/generated/Write.tsx
index 6789169458..8d743ae37e 100644
--- a/packages/icon/src/generated/Write.tsx
+++ b/packages/icon/src/generated/Write.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 88f5725fa3ea564f5ae7a38c459c4202
+* @checksum e5274ac8e945b7065abfc6e2469a8f56
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface WriteProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const Write = ({
   role = 'img',
   ...props
 }: WriteProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const Write = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'Write', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/X.tsx b/packages/icon/src/generated/X.tsx
index cf2bc5ccaa..326adcca30 100644
--- a/packages/icon/src/generated/X.tsx
+++ b/packages/icon/src/generated/X.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum c4c4dba0474e43edea5bc9c3132850bb
+* @checksum 40801001b61f74e5e9538d77c29e4ded
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface XProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const X = ({
   role = 'img',
   ...props
 }: XProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const X = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'X', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/XWithCircle.tsx b/packages/icon/src/generated/XWithCircle.tsx
index da225f3998..d6a806292a 100644
--- a/packages/icon/src/generated/XWithCircle.tsx
+++ b/packages/icon/src/generated/XWithCircle.tsx
@@ -2,10 +2,11 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum be4d5840abf953589ffc2965feeb2bba
+* @checksum f2808706ac66b2c1d7d2582bc38986ff
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface XWithCircleProps extends LGGlyph.ComponentProps {}
@@ -19,6 +20,9 @@ const XWithCircle = ({
   role = 'img',
   ...props
 }: XWithCircleProps) => {
+  const titleId = useIdAllocator({
+    prefix: 'icon-title'
+  });
   const fillStyle = css`
         color: ${fill};
       `;
@@ -27,12 +31,13 @@ const XWithCircle = ({
       `;
   const accessibleProps = generateAccessibleProps(role, 'XWithCircle', {
     title,
+    titleId,
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby
   });
   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>;
+  }, 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">{title && <title id={titleId}>{title}</title>}<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;
diff --git a/packages/icon/src/generated/index.ts b/packages/icon/src/generated/index.ts
new file mode 100644
index 0000000000..79d47bc919
--- /dev/null
+++ b/packages/icon/src/generated/index.ts
@@ -0,0 +1,188 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script packages/icon/scripts/prebuild/index.ts
+ */
+
+export { default as ActivityFeed } from './ActivityFeed';
+export { default as AddFile } from './AddFile';
+export { default as AIModel } from './AIModel';
+export { default as AllProducts } from './AllProducts';
+export { default as AnalyticsNode } from './AnalyticsNode';
+export { default as Apps } from './Apps';
+export { default as Array } from './Array';
+export { default as ArrowDown } from './ArrowDown';
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowRight } from './ArrowRight';
+export { default as ArrowUp } from './ArrowUp';
+export { default as Award } from './Award';
+export { default as Beaker } from './Beaker';
+export { default as Bell } from './Bell';
+export { default as Biometric } from './Biometric';
+export { default as Boolean } from './Boolean';
+export { default as Building } from './Building';
+export { default as Bulb } from './Bulb';
+export { default as Calendar } from './Calendar';
+export { default as Camera } from './Camera';
+export { default as Cap } from './Cap';
+export { default as CaretDown } from './CaretDown';
+export { default as CaretLeft } from './CaretLeft';
+export { default as CaretRight } from './CaretRight';
+export { default as CaretUp } from './CaretUp';
+export { default as ChartFilled } from './ChartFilled';
+export { default as Charts } from './Charts';
+export { default as Checkmark } from './Checkmark';
+export { default as CheckmarkWithCircle } from './CheckmarkWithCircle';
+export { default as ChevronDown } from './ChevronDown';
+export { default as ChevronLeft } from './ChevronLeft';
+export { default as ChevronRight } from './ChevronRight';
+export { default as ChevronUp } from './ChevronUp';
+export { default as Circle } from './Circle';
+export { default as Clock } from './Clock';
+export { default as ClockWithArrow } from './ClockWithArrow';
+export { default as Clone } from './Clone';
+export { default as Cloud } from './Cloud';
+export { default as Code } from './Code';
+export { default as CodeBlock } from './CodeBlock';
+export { default as Coin } from './Coin';
+export { default as Colon } from './Colon';
+export { default as Config } from './Config';
+export { default as Connect } from './Connect';
+export { default as Copy } from './Copy';
+export { default as CreditCard } from './CreditCard';
+export { default as CurlyBraces } from './CurlyBraces';
+export { default as Cursor } from './Cursor';
+export { default as Dashboard } from './Dashboard';
+export { default as Database } from './Database';
+export { default as Diagram } from './Diagram';
+export { default as Diagram2 } from './Diagram2';
+export { default as Diagram3 } from './Diagram3';
+export { default as Disconnect } from './Disconnect';
+export { default as Download } from './Download';
+export { default as Drag } from './Drag';
+export { default as Edit } from './Edit';
+export { default as Ellipsis } from './Ellipsis';
+export { default as Email } from './Email';
+export { default as EmptyDatabase } from './EmptyDatabase';
+export { default as EmptyFolder } from './EmptyFolder';
+export { default as Eraser } from './Eraser';
+export { default as Escalation } from './Escalation';
+export { default as Export } from './Export';
+export { default as Favorite } from './Favorite';
+export { default as Federation } from './Federation';
+export { default as File } from './File';
+export { default as Filter } from './Filter';
+export { default as Folder } from './Folder';
+export { default as Format } from './Format';
+export { default as FullScreenEnter } from './FullScreenEnter';
+export { default as FullScreenExit } from './FullScreenExit';
+export { default as Function } from './Function';
+export { default as Gauge } from './Gauge';
+export { default as GlobeAmericas } from './GlobeAmericas';
+export { default as GovernmentBuilding } from './GovernmentBuilding';
+export { default as Guide } from './Guide';
+export { default as Hash } from './Hash';
+export { default as HiddenSecondaryNode } from './HiddenSecondaryNode';
+export { default as Highlight } from './Highlight';
+export { default as Home } from './Home';
+export { default as HorizontalDrag } from './HorizontalDrag';
+export { default as Import } from './Import';
+export { default as ImportantWithCircle } from './ImportantWithCircle';
+export { default as InfoWithCircle } from './InfoWithCircle';
+export { default as InternalEmployee } from './InternalEmployee';
+export { default as InviteUser } from './InviteUser';
+export { default as Key } from './Key';
+export { default as Laptop } from './Laptop';
+export { default as LightningBolt } from './LightningBolt';
+export { default as Link } from './Link';
+export { default as List } from './List';
+export { default as Lock } from './Lock';
+export { default as LogIn } from './LogIn';
+export { default as LogOut } from './LogOut';
+export { default as MagnifyingGlass } from './MagnifyingGlass';
+export { default as Megaphone } from './Megaphone';
+export { default as Menu } from './Menu';
+export { default as Minus } from './Minus';
+export { default as Mobile } from './Mobile';
+export { default as Moon } from './Moon';
+export { default as MultiDirectionArrow } from './MultiDirectionArrow';
+export { default as MultiLayers } from './MultiLayers';
+export { default as NavCollapse } from './NavCollapse';
+export { default as NavExpand } from './NavExpand';
+export { default as NoFilter } from './NoFilter';
+export { default as NotAllowed } from './NotAllowed';
+export { default as Note } from './Note';
+export { default as NumberedList } from './NumberedList';
+export { default as OpenNewTab } from './OpenNewTab';
+export { default as OutlineFavorite } from './OutlineFavorite';
+export { default as Package } from './Package';
+export { default as Pause } from './Pause';
+export { default as Pending } from './Pending';
+export { default as Person } from './Person';
+export { default as PersonGroup } from './PersonGroup';
+export { default as PersonWithLock } from './PersonWithLock';
+export { default as Pin } from './Pin';
+export { default as Play } from './Play';
+export { default as Plus } from './Plus';
+export { default as PlusWithCircle } from './PlusWithCircle';
+export { default as Primary } from './Primary';
+export { default as Project } from './Project';
+export { default as QuestionMarkWithCircle } from './QuestionMarkWithCircle';
+export { default as Read } from './Read';
+export { default as Recommended } from './Recommended';
+export { default as Redo } from './Redo';
+export { default as Refresh } from './Refresh';
+export { default as Relationship } from './Relationship';
+export { default as ReplicaSet } from './ReplicaSet';
+export { default as Resize } from './Resize';
+export { default as Resource } from './Resource';
+export { default as Return } from './Return';
+export { default as Revert } from './Revert';
+export { default as Router } from './Router';
+export { default as Save } from './Save';
+export { default as SearchIndex } from './SearchIndex';
+export { default as Secondary } from './Secondary';
+export { default as Serverless } from './Serverless';
+export { default as Settings } from './Settings';
+export { default as ShardedCluster } from './ShardedCluster';
+export { default as Shell } from './Shell';
+export { default as Shield } from './Shield';
+export { default as Shirt } from './Shirt';
+export { default as Shortcut } from './Shortcut';
+export { default as SMS } from './SMS';
+export { default as SortAscending } from './SortAscending';
+export { default as SortDescending } from './SortDescending';
+export { default as Sparkle } from './Sparkle';
+export { default as SplitHorizontal } from './SplitHorizontal';
+export { default as SplitVertical } from './SplitVertical';
+export { default as Stitch } from './Stitch';
+export { default as Stop } from './Stop';
+export { default as Streaming } from './Streaming';
+export { default as String } from './String';
+export { default as Sun } from './Sun';
+export { default as Support } from './Support';
+export { default as Sweep } from './Sweep';
+export { default as Table } from './Table';
+export { default as Tag } from './Tag';
+export { default as TemporaryTable } from './TemporaryTable';
+export { default as ThumbsDown } from './ThumbsDown';
+export { default as ThumbsUp } from './ThumbsUp';
+export { default as TimeSeries } from './TimeSeries';
+export { default as TimeSeriesCollection } from './TimeSeriesCollection';
+export { default as Trash } from './Trash';
+export { default as Undo } from './Undo';
+export { default as University } from './University';
+export { default as Unlock } from './Unlock';
+export { default as Unsorted } from './Unsorted';
+export { default as UpDownCarets } from './UpDownCarets';
+export { default as Upload } from './Upload';
+export { default as VerticalEllipsis } from './VerticalEllipsis';
+export { default as View } from './View';
+export { default as Visibility } from './Visibility';
+export { default as VisibilityOff } from './VisibilityOff';
+export { default as Warning } from './Warning';
+export { default as Wizard } from './Wizard';
+export { default as Wrench } from './Wrench';
+export { default as Write } from './Write';
+export { default as X } from './X';
+export { default as XWithCircle } from './XWithCircle';
diff --git a/packages/icon/src/glyphCommon.ts b/packages/icon/src/glyphCommon.ts
index 3f16c0535a..9bba5df595 100644
--- a/packages/icon/src/glyphCommon.ts
+++ b/packages/icon/src/glyphCommon.ts
@@ -18,10 +18,11 @@ interface AccessibleFunctionParams {
   'aria-labelledby'?: string;
   'aria-label'?: string;
   title?: string | null;
+  titleId?: string;
 }
 
 type AccessibleFunctionReturnType =
-  | AccessibleFunctionParams
+  | { 'aria-labelledby'?: string; 'aria-label'?: string }
   | { 'aria-hidden': true; alt: '' };
 
 export function generateAccessibleProps(
@@ -31,19 +32,34 @@ export function generateAccessibleProps(
     ['aria-label']: ariaLabel,
     ['aria-labelledby']: ariaLabelledby,
     title,
+    titleId,
   }: AccessibleFunctionParams,
 ): AccessibleFunctionReturnType {
   switch (role) {
-    case 'img':
+    case 'img': {
       if (!ariaLabel && !ariaLabelledby && !title) {
         return { 'aria-label': getGlyphLabel(glyphName) };
       }
 
+      // If there's a title, use the titleId for aria-labelledby
+      // If there's already an aria-labelledby, combine them
+      let labelledBy: string | undefined;
+
+      if (title) {
+        if (ariaLabelledby) {
+          labelledBy = `${titleId} ${ariaLabelledby}`;
+        } else {
+          labelledBy = titleId;
+        }
+      } else {
+        labelledBy = ariaLabelledby;
+      }
+
       return {
-        ['aria-labelledby']: ariaLabelledby,
+        ['aria-labelledby']: labelledBy,
         ['aria-label']: ariaLabel,
-        title,
       };
+    }
 
     case 'presentation':
       return { 'aria-hidden': true, alt: '' };
diff --git a/packages/icon/src/glyphs/AIModel.svg b/packages/icon/src/glyphs/AIModel.svg
index fda047b2fe..924351f902 100644
--- a/packages/icon/src/glyphs/AIModel.svg
+++ b/packages/icon/src/glyphs/AIModel.svg
@@ -1,20 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5625 5.30957V10.6895L8 13.4414L2.4375 10.6895V5.30957L8 2.55762L13.5625 5.30957Z" stroke="#000"/>
-<path d="M8 2L8 14" stroke="#000" stroke-width="0.5"/>
-<path d="M3.09998 10.8594L12.5324 5.19998" stroke="#000" stroke-width="0.5" stroke-linecap="round"/>
-<path d="M3.19995 5.20001L12.6324 10.8595" stroke="#000" stroke-width="0.5" stroke-linecap="round"/>
-<circle cx="8" cy="2.75" r="1.75" fill="#000"/>
-<circle cx="8" cy="2.75" r="1.75" stroke="#000"/>
-<circle cx="8" cy="13.25" r="1.75" fill="#000"/>
-<circle cx="8" cy="13.25" r="1.75" stroke="#000"/>
-<circle cx="8" cy="8" r="1.75" fill="#000"/>
-<circle cx="8" cy="8" r="1.75" stroke="#000"/>
-<circle cx="13.25" cy="5" r="1.75" fill="#000"/>
-<circle cx="13.25" cy="5" r="1.75" stroke="#000"/>
-<circle cx="13.25" cy="10.75" r="1.75" fill="#000"/>
-<circle cx="13.25" cy="10.75" r="1.75" stroke="#000"/>
-<circle cx="2.75" cy="10.75" r="1.75" fill="#000"/>
-<circle cx="2.75" cy="10.75" r="1.75" stroke="#000"/>
-<circle cx="2.75" cy="5" r="1.75" fill="#000"/>
-<circle cx="2.75" cy="5" r="1.75" stroke="#000"/>
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 0C7.4665 0 8.25 0.783502 8.25 1.75C8.25 1.8343 8.24199 1.91693 8.23047 1.99805L9.85938 2.93848C10.1792 2.52019 10.6828 2.25 11.25 2.25C12.2165 2.25 13 3.0335 13 4C13 4.81198 12.4462 5.49188 11.6963 5.68945V8.05957C12.4463 8.25706 13 8.93793 13 9.75C13 10.7165 12.2165 11.5 11.25 11.5C10.7615 11.5 10.3204 11.2993 10.0029 10.9766L8.23047 12C8.24217 12.0817 8.25 12.165 8.25 12.25C8.25 13.2165 7.4665 14 6.5 14C5.5335 14 4.75 13.2165 4.75 12.25C4.75 12.1651 4.75686 12.0817 4.76855 12L2.99609 10.9766C2.67867 11.299 2.23822 11.5 1.75 11.5C0.783502 11.5 0 10.7165 0 9.75C0 8.93793 0.553657 8.25706 1.30371 8.05957V5.68945C0.553779 5.49188 0 4.81198 0 4C0 3.0335 0.783502 2.25 1.75 2.25C2.31696 2.25 2.81985 2.52046 3.13965 2.93848L4.76855 1.99805C4.75704 1.91697 4.75 1.83426 4.75 1.75C4.75 0.783502 5.5335 0 6.5 0ZM3.36914 9.08789C3.4528 9.29225 3.5 9.51552 3.5 9.75C3.5 9.86702 3.48773 9.98121 3.46582 10.0918L5.19238 11.0889C5.46062 10.787 5.83101 10.5795 6.25 10.5195V8.72949C5.78109 8.66231 5.37343 8.41073 5.10156 8.04883L3.36914 9.08789ZM7.80957 8.15723C7.54115 8.46075 7.17039 8.66926 6.75 8.72949V10.5195C7.16876 10.5795 7.53844 10.7873 7.80664 11.0889L9.5332 10.0918C9.51132 9.98126 9.5 9.86696 9.5 9.75C9.5 9.56512 9.5289 9.38701 9.58203 9.21973L7.80957 8.15723ZM8.08301 6.25879C8.1887 6.48413 8.25 6.73464 8.25 7C8.25 7.26458 8.1891 7.51442 8.08398 7.73926L9.7998 8.76855C10.0134 8.45352 10.3282 8.21359 10.6963 8.09082V5.6582C10.3976 5.5585 10.1352 5.38146 9.93262 5.14941L8.08301 6.25879ZM2.96973 5.25293C2.78312 5.43462 2.55638 5.57387 2.30371 5.6582V8.09082C2.62655 8.19851 2.9069 8.39729 3.11523 8.65723L4.86133 7.60938C4.79065 7.4194 4.75 7.21459 4.75 7C4.75 6.78476 4.79025 6.57912 4.86133 6.38867L2.96973 5.25293ZM3.49414 3.88867C3.49646 3.92553 3.5 3.96255 3.5 4C3.5 4.31053 3.41821 4.60166 3.27637 4.85449L5.10156 5.94922C5.37346 5.58794 5.78157 5.3366 6.25 5.26953V3.47949C5.83011 3.41934 5.45878 3.21212 5.19043 2.90918L3.49414 3.88867ZM7.80762 2.90918C7.53934 3.21159 7.16944 3.4194 6.75 3.47949V5.26953C7.16972 5.32963 7.54025 5.53811 7.80859 5.84082L9.66016 4.72949C9.55804 4.5073 9.5 4.26055 9.5 4C9.5 3.96258 9.50257 3.92551 9.50488 3.88867L7.80762 2.90918Z" fill="#000"/>
 </svg>
diff --git a/packages/icon/src/glyphs/index.ts b/packages/icon/src/glyphs/index.ts
index a358e83dac..cfcc554a7e 100644
--- a/packages/icon/src/glyphs/index.ts
+++ b/packages/icon/src/glyphs/index.ts
@@ -1,9 +1,6 @@
-import { createGlyphComponent } from '../createGlyphComponent';
-import { LGGlyph } from '../types';
-
+// Glyphs
 import ActivityFeed from './ActivityFeed.svg';
 import AddFile from './AddFile.svg';
-// Glyphs
 import AIModel from './AIModel.svg';
 import AllProducts from './AllProducts.svg';
 import AnalyticsNode from './AnalyticsNode.svg';
@@ -185,7 +182,7 @@ import Write from './Write.svg';
 import X from './X.svg';
 import XWithCircle from './XWithCircle.svg';
 
-const _glyphs = {
+export const glyphs = {
   AIModel,
   ActivityFeed,
   AddFile,
@@ -370,12 +367,4 @@ const _glyphs = {
   XWithCircle,
 } as const;
 
-export type GlyphName = keyof typeof _glyphs;
-
-const glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;
-
-export const glyphs = glyphKeys.reduce((acc, name) => {
-  acc[name] = createGlyphComponent(name, _glyphs[name]);
-
-  return acc;
-}, {} as Record<GlyphName, LGGlyph.Component>);
+export type GlyphName = keyof typeof glyphs;
diff --git a/packages/icon/tsconfig.json b/packages/icon/tsconfig.json
index 5371ed80f8..9691e37d2f 100644
--- a/packages/icon/tsconfig.json
+++ b/packages/icon/tsconfig.json
@@ -17,6 +17,9 @@
     {
       "path": "../emotion"
     },
+    {
+      "path": "../hooks"
+    },
     {
       "path": "../lib"
     },
diff --git a/packages/select/src/testing/utils/getTestUtils.ts b/packages/select/src/testing/utils/getTestUtils.ts
index 4a2dc65502..2211c547f1 100644
--- a/packages/select/src/testing/utils/getTestUtils.ts
+++ b/packages/select/src/testing/utils/getTestUtils.ts
@@ -87,12 +87,20 @@ export const getTestUtils = (
    * Queries the `element` for the warning Icon.
    */
   const isError = () => {
-    const warningIcon = queryBySelector<SVGElement>(
+    // Query for the feedback container first, then find the SVG within it
+    const feedbackContainer = queryBySelector<HTMLDivElement>(
       element,
-      'svg[title="Error"]',
+      `[data-lgid=${lgFormFieldIds.feedback}]`,
     );
 
-    return !!warningIcon;
+    if (!feedbackContainer) return false;
+
+    const warningIcon = queryBySelector<SVGElement>(feedbackContainer, 'svg');
+
+    if (!warningIcon) return false;
+
+    const titleElement = warningIcon.querySelector('title');
+    return titleElement?.textContent === 'Error';
   };
 
   // We cannot query within the select element because if the popover is using a portal, the element will render outside the select element
diff --git a/packages/text-input/src/testing/getTestUtils.ts b/packages/text-input/src/testing/getTestUtils.ts
index 32800a1dbe..ac4def7656 100644
--- a/packages/text-input/src/testing/getTestUtils.ts
+++ b/packages/text-input/src/testing/getTestUtils.ts
@@ -76,24 +76,24 @@ export const getTestUtils = (
    * Queries the `element` for the checkmark Icon.
    */
   const isValid = () => {
-    const checkmarkIcon = queryBySelector<SVGElement>(
-      element,
-      'svg[title="Valid"]',
-    );
+    const checkmarkIcon = queryBySelector<SVGElement>(element, 'svg');
+
+    if (!checkmarkIcon) return false;
 
-    return !!checkmarkIcon;
+    const titleElement = checkmarkIcon.querySelector('title');
+    return titleElement?.textContent === 'Valid';
   };
 
   /**
    * Queries the `element` for the warning Icon.
    */
   const isError = () => {
-    const warningIcon = queryBySelector<SVGElement>(
-      element,
-      'svg[title="Error"]',
-    );
+    const warningIcon = queryBySelector<SVGElement>(element, 'svg');
+
+    if (!warningIcon) return false;
 
-    return !!warningIcon;
+    const titleElement = warningIcon.querySelector('title');
+    return titleElement?.textContent === 'Error';
   };
 
   /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 14ac445c17..85708ac61f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2097,6 +2097,9 @@ importers:
       '@leafygreen-ui/emotion':
         specifier: workspace:^
         version: link:../emotion
+      '@leafygreen-ui/hooks':
+        specifier: workspace:^
+        version: link:../hooks
       lodash:
         specifier: ^4.17.21
         version: 4.17.21