Icon

Use the Icon component to apply consistent Icons to your Application or Website.

<Icon
  name="heart"
/>

Please note: The Icon component uses SVG symbols under the hood. SVG symbols are paths that can be defined only once in DOM tree but can be referenced over and over again inside this without duplicating the SVG code. In order to make this work, these symbols need to be present inside the DOM tree. That's why the Icon component will only work properly when being wrapped in one of the root components, e.g. Application or Website. Root components ensure that the SVG symbols are present inside the DOM tree.

Sizes

<React.Fragment>
  <Property
    value="xs"
  />
  <Icon
    name="heart"
    size="xs"
  />
  <hr />
  <Property
    value="sm"
  />
  <Icon
    name="heart"
    size="sm"
  />
  <hr />
  <Property
    value="md"
  />
  <Icon
    name="heart"
    size="md"
  />
  <hr />
  <Property
    value="lg"
  />
  <Icon
    name="heart"
    size="lg"
  />
</React.Fragment>

"xs"


"sm"


"md"


"lg"

Color

<React.Fragment>
  <Property
    value="default"
  />
  <Icon
    color="default"
    name="heart"
  />
  <hr />
  <Property
    value="highlight"
  />
  <Icon
    color="highlight"
    name="heart"
  />
  <hr />
  <Property
    value="white"
  />
  <div
    style={
      Object {
        "background": "black",
        "display": "inline-flex",
      }
    }
  >
    <Icon
      color="white"
      name="heart"
    />
  </div>
  <hr />
  <Property
    description="Applies the current color of the parent element"
    value="current"
  />
  <div
    style={
      Object {
        "color": "green",
      }
    }
  >
    <Icon
      color="current"
      name="heart"
    />
  </div>
</React.Fragment>

"default"


"highlight"


"white"


"current" Applies the current color of the parent element

Inlining in long running texts

<React.Fragment>
  <Property
    description="Should be used when icons are placed within a long running text"
    name="type"
    value="inline"
  />
  <Paragraph
    style={
      Object {
        "fontSize": 20,
      }
    }
  >
    This is an icon embedded in a text 
    <Icon
      name="heart"
      type="inline"
    />
     it should align with the typo.
  </Paragraph>
  <Paragraph
    style={
      Object {
        "fontSize": 30,
      }
    }
  >
    This is an icon embedded in a text 
    <Icon
      name="heart"
      type="inline"
    />
     it should align with the typo.
  </Paragraph>
</React.Fragment>

type: "inline" Should be used when icons are placed within a long running text

This is an icon embedded in a text it should align with the typo.

This is an icon embedded in a text it should align with the typo.

Preserving the size inside flexbox container

Sometimes you use an Icon inside a flex container and need have to ensure that the icon will use its original size.

<React.Fragment>
  <Property
    name="type"
    value="flex-auto"
  />
  <div
    style={
      Object {
        "alignItems": "center",
        "background": "gray",
        "display": "flex",
        "height": 100,
        "justifyContent": "flex",
        "width": 200,
      }
    }
  >
    <p
      style={
        Object {
          "flexGrow": 1,
        }
      }
    >
      Some Text
    </p>
    <Icon
      name="heart"
      type="flex-auto"
    />
  </div>
</React.Fragment>

type: "flex-auto"

Some Text

All icons

arrow-wide-west

checkmark

chevron

close

error

expand

github

heart

info

menu

nav

stackoverflow

slack

twitter

youtube

cloud-medium

cqrs-medium

event-sourcing-medium

notebook-medium

open-source-medium

server-medium

phone-medium

plus-medium

stackoverflow-medium