Icon

Icon component contains static image or svg loaded from local source. Source sometimes isn’t the same size as container, so it’s always centered inside of it and never scaled or stretched. See Image component for remote content container.

TODO: Add source property explanation and examples

Sizes

Icon component can be several sizes:

  • X-Small - 8px
  • Small — 12px
  • Medium — 16px
  • Default — 24px
  • Large — 32px
  • X-Large — 48px
  • XX-Large — 72px
  • XXX-Large — 96px

Specifications

// Sizes

$icon-sizes: (
  x-small       : unit(2),         // 8
  small         : unit(3),         // 12
  medium        : unit(4),         // 16
  default       : unit(6),         // 24
  large         : unit(8),         // 32
  x-large       : unit(12),        // 48
  xx-large      : unit(18),        // 72
  xxx-large     : unit(24),        // 96
);

API

name type default
size x-small / small / medium / default / large / x-large / xx-large / xxx-large default