Icon

Icons are Lucide React icons with added props to control size with fontClass.

Example Instance

<Icon name="airplay" color="primary" fontClass="title2" />

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add icon` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
color	no	LkColor \| "currentColor"	Color of the icon	undefined
display	no	"block" \| "inline-block" \| "inline"	Sets the display type of the icon container	undefined
fontClass	no	Exclude<LkFontClass, `${string}-bold` \| `${string}-mono`>	Font styling class to apply (excluding bold and mono variants)	undefined
name	no	IconName	The name of the icon to render	undefined
opticShift	no	boolean	If true, pulls icon slightly upward	undefined
strokeWidth	no	number	Stroke width of the icon	undefined

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Not Supported
Native HTML attributes	Supported