@leafygreen-ui/icon 14.6.1-next.0 → 14.7.0

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;

package/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;