nucleo-glass

A collection of 24px React SVG icon components from Nucleo.

Installation

``bash
npm install nucleo-glass
`

Usage

`jsx
import { IconPin } from 'nucleo-glass';

function MyComponent() {
return ;
}
`

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

Customization

$3

You can set a custom size using the size prop:

`jsx
import { IconPin } from 'nucleo-glass';

function MyComponent() {
return ;
}
`

$3

Icon colors are controlled using CSS custom properties:

| CSS Custom Property | Default Value |
| ----------------------- | ------------- |
| --nc-gradient-1-color-1 | #575757 |
| --nc-gradient-1-color-2 | #151515 |
| --nc-gradient-2-color-1 | #E3E3E599 |
| --nc-gradient-2-color-2 | #BBBBC099 |
| --nc-light | #FFFFFF |

You can modify them inline using the style attribute:

`jsx
{
'--nc-gradient-1-color-1': '#575757',
} as React.CSSProperties
} />
`

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

`jsx

`

$3

The Nucleo Glass icons use SVG definitions that rely on referenced IDs (for example: gradients, filters, masks, clipPaths). When rendering the same icon multiple times with different styles on the same page, those IDs can collide and cause unexpected styling.

To avoid this, you can pass a uniqueId prop to the icon. This way each instance remains isolated.

`jsx
import { useId } from "react";
import { IconAppStack } from "nucleo-glass";

export function MyComponent() {
const glassId1 = useId();
const glassId2 = useId();

return (



);
}
`

Accessibility

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

`jsx

`

or

`jsx

`

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

`jsx

``

License

nucleoapp.com/license