iconiq
—Open GitHub

Typography

One component for the full type system. Use a single `variant` prop to keep headings, labels, paragraphs, subheadings, and doc copy aligned with the same source of truth.

Installation

npx shadcn@latest add @iconiq/typography

Scale

Title

Title / H1 Title

Talent without working hard is nothing.

Weight
Medium / 500
Font size
56px
Line height
64px
Letter spacing
-1%

<Typography variant="h1">

Title / H2 Title

Talent without working hard is nothing.

Weight
Medium / 500
Font size
48px
Line height
56px
Letter spacing
-1%

<Typography variant="h2">

Title / H3 Title

Talent without working hard is nothing.

Weight
Medium / 500
Font size
40px
Line height
48px
Letter spacing
-1%

<Typography variant="h3">

Title / H4 Title

Talent without working hard is nothing.

Weight
Medium / 500
Font size
32px
Line height
40px
Letter spacing
-0.5%

<Typography variant="h4">

Title / H5 Title

Talent without working hard is nothing.
Weight
Medium / 500
Font size
24px
Line height
32px
Letter spacing
0%

<Typography variant="h5">

Title / H6 Title

Talent without working hard is nothing.
Weight
Medium / 500
Font size
20px
Line height
28px
Letter spacing
0%

<Typography variant="h6">

Label

Label / X-Large

Talent without working hard is nothing.

Weight
Medium / 500
Font size
24px
Line height
32px
Letter spacing
-1.5%

<Typography variant="label-xl">

Label / Large

Talent without working hard is nothing.

Weight
Medium / 500
Font size
18px
Line height
24px
Letter spacing
-1.5%

<Typography variant="label-lg">

Label / Medium

Talent without working hard is nothing.

Weight
Medium / 500
Font size
16px
Line height
24px
Letter spacing
-1.1%

<Typography variant="label-md">

Label / Small

Talent without working hard is nothing.

Weight
Medium / 500
Font size
14px
Line height
20px
Letter spacing
-0.6%

<Typography variant="label-sm">

Label / X-Small

Talent without working hard is nothing.

Weight
Medium / 500
Font size
12px
Line height
16px
Letter spacing
0%

<Typography variant="label-xs">

Paragraph

Paragraph / X-Large

Talent without working hard is nothing.

Weight
Regular / 400
Font size
24px
Line height
32px
Letter spacing
-1.5%

<Typography variant="paragraph-xl">

Paragraph / Large

Talent without working hard is nothing.

Weight
Regular / 400
Font size
18px
Line height
24px
Letter spacing
-1.5%

<Typography variant="paragraph-lg">

Paragraph / Medium

Talent without working hard is nothing.

Weight
Regular / 400
Font size
16px
Line height
24px
Letter spacing
-1.1%

<Typography variant="paragraph-md">

Paragraph / Small

Talent without working hard is nothing.

Weight
Regular / 400
Font size
14px
Line height
20px
Letter spacing
-0.6%

<Typography variant="paragraph-sm">

Paragraph / X-Small

Talent without working hard is nothing.

Weight
Regular / 400
Font size
12px
Line height
16px
Letter spacing
0%

<Typography variant="paragraph-xs">

Subheading

Subheading / Medium

Talent without working hard is nothing.

Weight
Medium / 500
Font size
16px
Line height
24px
Letter spacing
6%

<Typography variant="subheading-md">

Subheading / Small

Talent without working hard is nothing.

Weight
Medium / 500
Font size
14px
Line height
20px
Letter spacing
6%

<Typography variant="subheading-sm">

Subheading / X-Small

Talent without working hard is nothing.

Weight
Medium / 500
Font size
12px
Line height
16px
Letter spacing
4%

<Typography variant="subheading-xs">

Subheading / 2X-Small

Talent without working hard is nothing.

Weight
Medium / 500
Font size
11px
Line height
12px
Letter spacing
2%

<Typography variant="subheading-2xs">

Doc

Doc / Label

Talent without working hard is nothing.

Weight
Medium / 500
Font size
18px
Line height
32px
Letter spacing
-1.5%

<Typography variant="doc-label">

Doc / Paragraph

Talent without working hard is nothing.

Weight
Regular / 400
Font size
18px
Line height
32px
Letter spacing
-1.5%

<Typography variant="doc-paragraph">

Props

Pass a single variant to apply the scale. Override the rendered element with as when the default tag does not fit the layout.

Typography

4 props

Single text primitive that keeps the full type scale in one place, with semantic element defaults derived from the selected variant.
variant"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label-xl" | "label-lg" | "label-md" | "label-sm" | "label-xs" | "paragraph-xl" | "paragraph-lg" | "paragraph-md" | "paragraph-sm" | "paragraph-xs" | "subheading-md" | "subheading-sm" | "subheading-xs" | "subheading-2xs" | "doc-label" | "doc-paragraph"
Default"paragraph-md"
Chooses one of the exported typography recipes. Each variant locks in the exact font size, line height, weight, and letter spacing from the scale.
asReact.ElementType
Overrides the rendered HTML tag when the default semantic element for the chosen variant is not the one you want in a specific layout.
childrenReactNode
Required
Text or inline content rendered with the selected recipe.
classNamestring
Merged after the variant classes so local color, spacing, or layout adjustments can be layered on top without forking the scale.

Notes

Heading variants default to their matching h1 through h6 tags.
Label, paragraph, subheading, and doc variants default to paragraph tags so they remain flexible in flow content.
The scale metadata is exported from the same file as the component, which keeps docs previews and the runtime component aligned.