Lapikit

Icon component

Icon

The Icon component is used to display icons in the interface, with fine customization: color, size, visual status (info, success, etc.), and rounded styles. It can be easily integrated into all other Lapikit components, or used on its own as a decorative or interactive element.

Examples of icon

Base

Minimal example of an Icon with default configuration. Perfect for displaying a simple icon with a neutral style.

Color

Allows you to change the icon’s color via prop color. Useful for adapting an icon to its context (e.g. theme, visual feedback…).

State

Displays different visual variants depending on the status (error, info, warning, success). These props automatically add a style corresponding to the desired visual state.

Type

Shows the two possible types of HTML elements (<i> or <div>) according to prop is, useful for adapting to certain frameworks or accessibility constraints.

Size

Demonstration of prop size to adjust icon size. It can be a simple string (e.g. md) or a CSS object for a completely customized size.

Disabled

Example of an icon rendered inactive, visually dimmed and non-interactive. Ideal for indicating that an action is not available.

API Reference

props	type	description	default	type_extend
ref $bindable	HTMLElement	Direct access to DOM element	undefined
is	enum	HTML tag used to render icon (i, div, etc.)	`i`	`i` \| `div`
dark	boolean	Enable dark theme for component.	false
light	boolean	Enable light theme for the component.	false
color	string	Applies a custom color to text or icons.	undefined
background	string	Apply a custom background color.	undefined
disabled	boolean	Makes the icon inactive and visually dimmed	false
warning	boolean	Apply a visual style of warning.	false
info	boolean	Applies an informative style.	false
success	boolean	Apply a success style (confirmation, validation, etc.).	false
error	boolean	Apply a visual style of error.	false
size	enum \| `{enum: enum}`	Set Icon size: xs, sm, md, lg, xl or full.	`md`	`xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`

Variables CSS

variable	default	description
`–-icon-color`	`–-kit-on-surface`	Icon color

Add Icons to your Buttons, Cards or Chips to visually guide your users.