Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Icon Highlighted

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Graphical representation of a concept.

import { IconHighlighted } from '@kubit-ui-web/react-components'
1
<IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="ROUND" size="MEDIUM" />

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for its quick use, access them through the variant prop.

12
<IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="SQUARE" size="MEDIUM" />
<IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="ROUND" size="MEDIUM" />

Size

Kubit offers predefined size options. This setting can be customize, for more details, please refer to the theming page.

1234567
<div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
  <IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="ROUND" size="EXTRA_SMALL" />
  <IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="ROUND" size="SMALL" />
  <IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="ROUND" size="MEDIUM" />
  <IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="ROUND" size="LARGE" />
  <IconHighlighted icon="ICON_GHOST" color="pink" backgroundColor="black" variant="ROUND" size="EXTRA_LARGE" />
</div>
DotAccessibility
Icon HighlightedDesign Specs