@leafygreen-ui/icon 14.6.1 → 14.7.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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