nucleo-flags

A collection of 32px React SVG flag icons from Nucleo.

Installation

npm install nucleo-flags

Usage

import { IconName } from 'nucleo-flags';

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-flags';

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

Alternatively, use CSS utility classes. For example, when using Tailwind CSS:

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

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