Icon Block

🚀

<IconBlock size="md" icon={{ type: "emoji", src: "🚀" }} />

<IconBlock size="md" icon={{ type: "emoji", src: "🚀" }} />

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Use the size prop to control the size of the button.

🚀

<IconBlock size="sm" icon={icon} />
<IconBlock size="md" icon={icon} />
<IconBlock size="lg" icon={icon} />
<IconBlock size="xl" icon={icon} />

<IconBlock size="sm" icon={icon} /><IconBlock size="md" icon={icon} /><IconBlock size="lg" icon={icon} /><IconBlock size="xl" icon={icon} />

<IconBlock
  size="md"
  icon={{ type: "lucide", src: "badge-euro", color: "#3e9392" }}
/>

<IconBlock  size="md"  icon={{ type: "lucide", src: "badge-euro", color: "#3e9392" }}/>

<IconBlock
  size="md"
  icon={{ type: "file", src: "https://github.com/shadcn.png" }}
/>

<IconBlock  size="md"  icon={{ type: "file", src: "https://github.com/shadcn.png" }}/>

<IconBlock size="md" icon={{ type: "text", src: "John" }} />

<IconBlock size="md" icon={{ type: "text", src: "John" }} />

Prop	Type	Default	Description
`icon`*	`IconData`	-	The icon data.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"sm"`	The size of the block.
`fallback`	`string`	-	The fallback string to display when an image can not be loaded.

There are 4 types of icons:

emoji: An emoji icon, whose src is simply the emoji string. See Emoji Cheat Sheet.
lucide: A Lucide icon, whose src is the name of the icon. See Lucide Icons.
url: An image URL. The image will be displayed in the block.
text: A text string. Only the first letter of src will be displayed in the block.