Skip to main content

​
Overview

The Natura Design System includes a comprehensive icon library through the @naturacosmeticos/natds-icons package. Icons are available in multiple sizes and can be easily integrated into your components.

​
Installation

Icons are included with the main packages, but you can also install them separately: 
npm install @naturacosmeticos/natds-icons

​
Using the Icon Component

​
Basic Usage

import { Icon } from '@naturacosmeticos/natds-web';

function MyComponent() {
  return (
    <Icon name="filled-action-add" />
  );
}

​
With Sizes

Icons support 11 different sizes: 
<Icon name="filled-action-add" size="micro" />   {/* 8px */}
<Icon name="filled-action-add" size="tiny" />    {/* 12px */}
<Icon name="filled-action-add" size="small" />   {/* 16px */}
<Icon name="filled-action-add" size="standard" />{/* 24px - default */}
<Icon name="filled-action-add" size="semi" />    {/* 32px */}
<Icon name="filled-action-add" size="medium" />  {/* 40px */}
<Icon name="filled-action-add" size="large" />   {/* 48px */}
<Icon name="filled-action-add" size="huge" />    {/* 56px */}

​
With Colors

<Icon name="filled-action-add" color="primary" />
<Icon name="filled-action-add" color="secondary" />
<Icon name="filled-action-add" color="default" />
<Icon name="outlined-alert-info" color="highlight" />
<Icon name="outlined-alert-warning" color="surface" />

​
Icon Naming Convention

Icons follow a consistent naming pattern: 
[style]-[category]-[name]
  • Style: filled, outlined
  • Category: action, alert, content, navigation, communication, etc.
  • Name: descriptive name of the icon

​
Examples

  • filled-action-add
  • outlined-action-delete
  • filled-alert-info
  • outlined-content-create
  • filled-navigation-menu

​
Using with Other Components

​
With Buttons

import { Button, Icon } from '@naturacosmeticos/natds-web';

function ButtonWithIcon() {
  return (
    <Button
      variant="contained"
      color="primary"
      startIcon={<Icon name="filled-action-add" size="small" />}
    >
      Add Item
    </Button>
  );
}

​
With Icon Button

import { IconButton, Icon } from '@naturacosmeticos/natds-web';

function DeleteButton() {
  return (
    <IconButton aria-label="delete">
      <Icon name="outlined-action-delete" />
    </IconButton>
  );
}

​
With Chips

import { Chip, Icon } from '@naturacosmeticos/natds-web';

function ChipWithIcon() {
  return (
    <Chip
      label="Success"
      icon={<Icon name="filled-alert-check" size="small" />}
      color="primary"
    />
  );
}

​
Loading Icons via CDN

For web projects, you can load the icon font via CDN: 
<!-- In your HTML head -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css"
/>
Then use icons with the font class: 
<i class="natds-icon-filled-action-add"></i>

​
Loading from node_modules

If you prefer to serve fonts from your own assets: 
// In your app entry point
import '@naturacosmeticos/natds-icons/dist/natds-icons.css';

​
Available Icon Categories

Action Icons

add, delete, edit, search, settings, etc.

Alert Icons

info, warning, error, success, check, etc.

Content Icons

copy, create, filter, save, etc.

Navigation Icons

menu, arrow, chevron, expand, etc.

Communication Icons

chat, email, call, message, etc.

Social Icons

facebook, twitter, instagram, linkedin, etc.

​
Accessibility

​
Decorative Icons

For decorative icons, no additional accessibility attributes are needed: 
<Icon name="filled-action-add" />

​
Meaningful Icons

For icons that convey meaning, add an aria-label: 
<IconButton aria-label="Add new item">
  <Icon name="filled-action-add" />
</IconButton>

​
With Screen Reader Text

<button>
  <Icon name="filled-action-add" aria-hidden="true" />
  <span className="sr-only">Add item</span>
</button>

​
Best Practices

Match icon sizes to the surrounding content. For example, use small icons in buttons and tiny icons in dense lists.
Use the same icon style (filled or outlined) throughout your application for consistency.
Always provide alternative text or labels for icons that convey information, especially for interactive elements.
Ensure icons have sufficient color contrast against their backgrounds for accessibility.

​
Finding Icons

Explore all available icons in the Storybook:

Icon Gallery

Browse the complete icon library in Storybook

​
Related Documentation

Icon Component

Full Icon component API

Icon Button

IconButton component

Button Component

Using icons in buttons

GitHub Repository

natds-icons source code

Build docs developers (and LLMs) love

Get started for freeTalk to us