Theme

There is a set of icons built directly into @houzz/ui which are part of the theme. These can be used directly by setting the name prop <Icon name="iconName"/>.

The full set of icons is provided in a standalone package (see below).

Icon Library

npm install @houzz/icons

Houzz icon library is available as a separate package. Each icon is exported as a React component which contains an inline svg element.

import AddPoll from '@houzz/icons/AddPoll';
<AddPoll color="warning" width="20px" />;

Even though these icons can be used as-is, demonstrated in the example above, it is more convenient to use them in combination with the Icon component.

This will not only provide access to all the system props but also make sure attributes required for accessibility are set correctly on the svg.

// will set role=img aria-hidden=true
<Icon as={AddPoll} mt="L" />
// will set role=img and add a title element within the inline svg
<Icon as={AddPoll} title="Poll result" color="accent" />

Accessibility

  • When an icon is used as the only child of an interactive element (i.e. there is no other text content), there must be a label provided:
    • either on the icon directly <Icon as={iconComponent} title="Localized icon title" /> (this is similar to setting an alt on an image),
    • or using aria-label on the interactive element itself.
  • Use the Icon component wrapper to get appropriate attributes set on the svg