title: Icon
name: icon
notes: |
  Icons or pictograms are visual cues for interface elements, **use them sparingly**. Remember that icons should (almost) **always come with a label**. One of the exception being the magnyfing-glass icon for the search. This case is well recognized nowadays.

  The icon component requires the icons sprite injected in the page to work. Please have a look at the `svg-icons.js` file.

  **A11y note —**
  The icon is hidden to screen readers with `aria-hidden="true"`, don't forget to add meaning to the component it is placed in (button, label, etc).
variants:
  - name: list-feather
    title: Feather icons
    notes: |
      When using an icon from the Feather icons category, the `svg` element must have the `feather` class to display correctly.
  - name: list
    title: Elements icons
    notes: |
      Here is the list of custom icons used in the styleguide.