nucleo-micro-bold-essential

A collection of 20px React SVG icon components from the Nucleo Micro Bold library.

Installation

npm install nucleo-micro-bold-essential

Usage

import { IconName } from 'nucleo-micro-bold-essential';

function MyComponent() {
  return <IconName />;
}

Browse the full list of available icons on the Nucleo Web App.

Customization

You can customise the icon size by passing the size prop to the icon component.

import { IconName } from 'nucleo-micro-bold-essential';

function MyComponent() {
  return <IconName size={24} />;
}

Alternatively, use CSS utility classes. E.g., when using TailwindCSS:

<IconName className="size-[24px] text-[blue]" />

Accessibility

To improve accessibility, you can either add a title attribute to the icon or use the aria-label attribute.

<IconName title="Icon Name" />

or

<IconName aria-label="Icon Name" />

If you want to hide the icon from screen readers, you can use the aria-hidden attribute.

<IconName aria-hidden="true" />

License

nucleoapp.com/license