Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Color
Typography
Spacing
Icons
Motion
Accessibility

ICONS

PreviousSpacing
MotionNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

The icon library contains brand-specific and general UI icons. All icons are managed in the Figma component library and support multiple size variants. Click any icon to copy its SVG code.

Icon Gallery

Loading…

Usage Guidelines

Size Specifications

ContextSizeNotes
Small icon16×16Inline icons, supporting labels
Default24×24Standard UI icons
Large icon32×32Emphasis display, tab icons
Extra large48×48+Empty states, onboarding

Color Usage

  • Use --ds-color-text-primary as the default icon color
  • Interactive state icons follow the component's color changes
  • Brand icons (parameters/features) use preset colors and should not be modified

Using in Figma

  1. Search for the icon name in the Figma Assets panel
  2. Drag it onto the canvas and switch size variants via the properties panel