Skip to main content

​
Icon

The Icon component renders scalable vector icons from the Natura Design System icon library. Icons are used throughout the interface to provide visual cues and improve usability.

​
Import

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

​
Usage

​
Basic Icon

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

function Example() {
  return (
    <Icon name="filled-default-mockup" />
  );
}

​
Icon with Size

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

function SizeExamples() {
  return (
    <>
      <Icon name="outlined-social-person" size="micro" />
      <Icon name="outlined-social-person" size="tiny" />
      <Icon name="outlined-social-person" size="small" />
      <Icon name="outlined-social-person" size="standard" />
      <Icon name="outlined-social-person" size="medium" />
      <Icon name="outlined-social-person" size="large" />
    </>
  );
}

​
Icon with Color

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

function ColorExamples() {
  return (
    <>
      <Icon name="filled-action-cancel" color="default" />
      <Icon name="filled-action-cancel" color="primary" />
      <Icon name="filled-action-cancel" color="secondary" />
      <Icon name="filled-action-cancel" color="error" />
      <Icon name="filled-action-cancel" color="inherit" />
    </>
  );
}

​
Sizes

The Icon component supports multiple sizes: 
import { Icon } from '@naturacosmeticos/natds-web';

function AllSizes() {
  const iconName = "outlined-action-filter";
  
  return (
    <>
      <Icon name={iconName} size="micro" />
      <Icon name={iconName} size="tiny" />
      <Icon name={iconName} size="small" />
      <Icon name={iconName} size="standard" />
      <Icon name={iconName} size="medium" />
      <Icon name={iconName} size="large" />
      <Icon name={iconName} size="largeX" />
      <Icon name={iconName} size="largeXX" />
      <Icon name={iconName} size="huge" />
      <Icon name={iconName} size="hugeX" />
      <Icon name={iconName} size="hugeXX" />
    </>
  );
}
Available sizes: micro, tiny, small, standard, medium, large, largeX, largeXX, huge, hugeX, hugeXX

​
Colors

Icon supports theme colors: 
import { Icon } from '@naturacosmeticos/natds-web';

function ColorExamples() {
  return (
    <>
      <Icon name="outlined-alert-info" color="default" />
      <Icon name="outlined-alert-info" color="primary" />
      <Icon name="outlined-alert-info" color="secondary" />
      <Icon name="outlined-alert-error" color="error" />
      <Icon name="outlined-alert-info" color="inherit" />
    </>
  );
}
Available colors: default, primary, secondary, error, inherit

​
Icon Names

The Natura Design System includes a comprehensive icon set. Icon names follow a pattern:
  • filled-{category}-{name}: Filled style icons
  • outlined-{category}-{name}: Outlined style icons
Common categories include:
  • action: UI actions (cancel, delete, filter, etc.)
  • alert: Alert and notification icons (info, warning, error, etc.)
  • social: Social and people icons (person, group, etc.)
  • navigation: Navigation icons (menu, arrow, etc.)
  • content: Content icons (add, remove, etc.)

​
Example Icon Names

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

function IconExamples() {
  return (
    <>
      <Icon name="filled-action-cancel" />
      <Icon name="filled-action-delete" />
      <Icon name="filled-action-filter" />
      <Icon name="outlined-action-filter" />
      <Icon name="outlined-social-person" />
      <Icon name="outlined-alert-info" />
      <Icon name="filled-default-mockup" />
    </>
  );
}

​
Props

​
IIconProps

​
name
IconName
required
The icon name from the Natura Design System icon set. This prop is required.
​
size
IconSize
default:"standard"
The size of the icon. Available sizes include: micro, tiny, small, standard, medium, large, largeX, largeXX, huge, hugeX, hugeXX.
​
color
'default' | 'error' | 'inherit' | 'primary' | 'secondary'
The color of the icon. Supports theme colors.
​
className
string
CSS class name for custom styling.

​
Usage with Other Components

Icons are commonly used within other components:

​
Icon in Button

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

function Example() {
  return (
    <Button
      startIcon={<Icon name="filled-action-delete" size="small" />}
    >
      Delete
    </Button>
  );
}

​
Icon in Chip

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

function Example() {
  return (
    <Chip
      label="Filter"
      icon={<Icon name="outlined-action-filter" size="tiny" />}
    />
  );
}

​
Icon in Badge

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

function Example() {
  return (
    <Badge badgeContent={4} color="primary">
      <Icon name="outlined-action-filter" size="tiny" />
    </Badge>
  );
}

​
Accessibility

When using icons without accompanying text, provide appropriate ARIA labels: 
import { Icon, IconButton } from '@naturacosmeticos/natds-web';

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

​
Notes

The name prop may be deprecated in the future as it conflicts with the HTML name attribute. Monitor release notes for migration guidance.

Build docs developers (and LLMs) love

Get started for freeTalk to us