Icons

Usage

Place the icon element on the page and give it an icon name from the [default icon set][icon-sets]. In most cases, the icon should be labelled using aria-label or aria-labelledby, or removed from the accessibility tree with aria-hidden="true" or role="presentation", if its content is merely presentational and expressed using accessible text copy elsewhere.

<nile-icon name="user" aria-label="user"></nile-icon>
<nile-icon name="lock" aria-label="lock"></nile-icon>
<nile-icon name="laptop" aria-label="laptop"></nile-icon>
<nile-icon name="cloud" aria-label="cloud"></nile-icon>

Sizes

The default size for icons is 16 pixels. To set a specific icon size, simply pass the desired size in pixels as a number.

<nile-icon name="user"></nile-icon>
<!-- Default: Icon size is 16 pixels -->
<nile-icon name="user" size="12"></nile-icon>
<!-- Icon size is 12 pixels -->
<nile-icon name="user" size="20"></nile-icon>
<!-- Icon size is 20 pixels -->

Colors

You can specify the color of the icons using either named colors or hex values.

<nile-icon name="user" color="blue"></nile-icon>
<!-- Using named color -->
<nile-icon name="user" color="#000000"></nile-icon>
<!-- Using hex value -->

customSvgPath

If provided, the customSvgPath property allows you to specify a custom path from which the component will fetch and display the SVG content. This is especially useful if you want to use your own SVG designs that aren't part of the built-in icon set.

<nile-icon customSvgPath="assets/users.svg"></nile-icon>

All Icons

There are 447 in the icon system in nile

Anatomy

Anatomy of a Icon

Attributes & Properties

List of Depreciated Icons

To streamline our icon library, we’ve deprecated legacy icon names in favor of these new icon names. Please refer to the table below when updating your code.