Nucleo React Packages

Installation

npx nucleo-icons

This is a private package, so you'll need to purchase the Nucleo Core icons to install it. Your Nucleo credentials will be required during the installation process.

Device Limit

Each Nucleo license allows installation on up to two devices. If you attempt to install on more than two devices, you may receive an authentication error.

You can manage your activated devices on your account page.

Usage

import { IconAccessibilityFill48 } from "nucleo-core-fill-48";

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

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

Free Preview

If you'd like to try the package before purchasing the icons, you can install one of the Nucleo Core Essential packages instead:

Customization

Icon Size

You can set a custom size using the size prop:

<IconAccessibilityFill48 size={32}/>

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

<IconAccessibilityFill48 className="size-8"/>

Icon Colors

Use CSS utility classes to customize the icon color too. For example, if using Tailwind CSS:

<IconAccessibilityFill48 className="text-[blue]"/>

Icon Stroke Width

For outline icons, the default stroke-width is 2px. You can customize it using the strokeWidth prop:

import { IconAccessibilityOutline48 } from "nucleo-core-outline-48";

function MyComponent() {
  return <IconAccessibilityOutline48 strokeWidth={1.5}/>;
}

License

Refer to the Nucleo Icons License for more information.

Installation

npx nucleo-icons

This is a private package, so you'll need to purchase the Nucleo UI icons to install it. Your Nucleo credentials will be required during the installation process.

Device Limit

Each Nucleo license allows installation on up to two devices. If you attempt to install on more than two devices, you may receive an authentication error.

You can manage your activated devices on your account page.

Usage

import { IconAccessibilityFill18 } from "nucleo-ui-fill-18";

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

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

Free Preview

If you'd like to try the package before purchasing the icons, you can install one of the Nucleo UI Essential packages instead:

Customization

Icon Size

You can set a custom size using the size prop:

<IconAccessibilityFill18 size={32}/>

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

<IconAccessibilityFill18 className="size-8"/>

Icon Colors

Use CSS utility classes to customize the icon color too. For example, if using Tailwind CSS:

<IconAccessibilityFill18 className="text-[blue]"/>

Icon Stroke Width

For outline icons, the default stroke-width is 1.5px. You can customize it using the strokeWidth prop:

import { IconAccessibilityOutline18 } from "nucleo-ui-outline-18";

function MyComponent() {
  return <IconAccessibilityOutline18 strokeWidth={1}/>;
}

License

Refer to the Nucleo Icons License for more information.

Installation

npx nucleo-icons

This is a private package, so you'll need to purchase the Nucleo Micro Bold icons to install it. Your Nucleo credentials will be required during the installation process.

Device Limit

Each Nucleo license allows installation on up to two devices. If you attempt to install on more than two devices, you may receive an authentication error.

You can manage your activated devices on your account page.

Usage

import { IconAccessibility } from "nucleo-micro-bold";

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

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

Free Preview

If you'd like to try the package before purchasing the icons, you can install the Nucleo Micro Bold Essential packages instead.

Customization

Icon Size

You can set a custom size using the size prop:

<IconAccessibility size={32}/>

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

<IconAccessibility className="size-8"/>

Icon Colors

Use CSS utility classes to customize the icon color too. For example, if using Tailwind CSS:

<IconAccessibility className="text-[blue]"/>

License

Refer to the Nucleo Icons License for more information.

Installation

npm install nucleo-glass

Usage

import { IconAppStack } from "nucleo-glass";

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

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

Customization

Icon Size

You can set a custom size using the size prop:

<IconAppStack size={32}/>

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

<IconAppStack className="size-8"/>

Icon Colors

Icon colors are controlled using CSS custom properties:

You can modify them inline using the style attribute:

<IconAppStack style={
  {
    '--nc-gradient-1-color-1': '#575757',
  } as React.CSSProperties}
/>

Or you can use utility classes. For example, if using Tailwind CSS:

<IconAppStack className="[--nc-gradient-1-color-1:#575757]"/>

License

Refer to the Nucleo Icons License for more information.

Installation

npm install nucleo-flags

Usage

import { IconItaly } from "nucleo-flags";

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

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

Customization

You can customize the icon size by passing the size prop to the icon component:

<IconItaly size={24}/>

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

<IconItaly className="size-6"/>

License

Refer to the Nucleo Icons License for more information.

Installation

npm install nucleo-social-media

Usage

import { IconPatreon } from "nucleo-social-media";

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

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

Customization

You can customize the icon size either by passing the size prop to the icon component:

<IconPatreon size={24}/>

Or by using CSS utility classes. For example, if using Tailwind CSS:

<IconPatreon className="size-6"/>

Use CSS utility classes to customize the icon color too:

<IconPatreon className="text-[blue]"/>

License

Refer to the Nucleo Icons License for more information.

Installation

npm install nucleo-credit-cards

Usage

import { IconAlipay } from "nucleo-credit-cards";

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

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

Customization

You can customize the icon size by passing the size prop to the icon component:

<IconAlipay size={24}/>

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

<IconItaly className="size-6"/>

License

Refer to the Nucleo Icons License for more information.