EF
EF Design System
Search...⌘K

Icon

SVG icon set with configurable size and color props. All icons are stroke-based for consistent rendering.

Icon Reference

21 icons available. Filter by name below.

plus
check
x
search
chevronDown
chevronRight
settings
bell
trash
edit
copy
eye
heart
star
info
alertTriangle
upload
download
arrowRight
externalLink
menu

Size / Color

tsx
<Icon name="heart" size={24} color="#1db954" />
<Icon name="star" size={32} color="#d97706" />
<Icon name="bell" size={16} color="#0a0a0a" />

Available Icons

pluscheckxsearchchevronDownchevronRightsettingsbelltrasheditcopyeyeheartstarinfoalertTriangleuploaddownloadarrowRightexternalLinkmenu

Props

PropTypeDefaultDescriptionRequired
namestring-Icon name from the registryNo
sizenumber24Width and height in pixelsNo
colorstring"#0a0a0a"Stroke colorNo

Usage Guidelines

  • Use 16px icons inside buttons and inputs, 20-24px for standalone use.
  • Match icon color to text color for visual harmony.
  • Always pair icons with text labels or tooltips for accessibility.
  • Use currentColor for icons that should inherit their parent color.