Icon

Icon is the shared SVG wrapper for VegaUI icons and custom SVG content.

Overview

Icon styling is size-driven and relies on currentColor for most color behavior.

Public CSS Variables

Variable	Value	Affects
computed token sizeroot		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root maps data-size values to a single --icon-size and applies that value to both width and height.

State And Variant Interaction

token sizing is used only when explicit width and height are not provided
icon color follows currentColor

Examples

Large semantic icon

Color an icon through the CSS color property (here with style): the glyph strokes with currentColor, so theme tokens work directly. A thinner strokeWidth keeps large glyphs from looking heavy.

LTRRTL

large-semantic-icon.tsx · 16 lines

import { Heading, Icon, Text } from '@vega-ui/react';
import { CircleCheckBigIcon } from '@vega-ui/icons';

export default function LargeSemanticIcon() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-8)', width: '100%', textAlign: 'center' }}>
      <Icon size='xl' strokeWidth={1.5} style={{ color: 'var(--color-green-accent-500)' }}>
        <CircleCheckBigIcon />
      </Icon>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-2)' }}>
        <Heading as='h3' size={4} fontWeight={600}>Payment received</Heading>
        <Text size={3} style={{ color: 'var(--label-secondary)', textWrap: 'balance' }}>We emailed the receipt to finance@acme.com.</Text>

Do Not Override

hardcoding icon colors where surrounding text color should drive the result
mixing explicit width/height overrides unpredictably across one control family