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 - 12px
  • Small — 16px
  • Regular — 24px
  • Medium — 32px
  • Large — 48px
  • X-Large — 64px
  • X2-Large — 96px
  • X3-Large — 128px
  • X4-Large — 192px

Specifications

// Sizes

$icon-sizes: (
  x-small:    unit(3), // 12
  small:      unit(4), // 16
  regular:    unit(6), // 24
  medium:     unit(8), // 32
  large:      unit(12), // 48
  x-large:    unit(16), // 64
  x2-large:   unit(24), // 96
  x3-large:   unit(32), // 128
  x4-large:   unit(48), // 192
);

API

name type default
size x-small / small / regular / medium / large / x-large / x2-large / x3-large / x4-large regular