iconiq
—Open GitHub

Typography

One component and one `variant` prop for your full type scale.

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

Typography

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.

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.

Scale structure

The component ships with grouped metadata for titles, labels, paragraphs, subheadings, and documentation copy.

Use label variants for interface emphasis, paragraph variants for reading copy, subheading variants for overlines or small section leads, and doc variants when you need a looser editorial line height.

Letter spacing values are encoded in em units so the browser scales tracking proportionally with the selected font size.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: class-variance-authority.