Natura Design System - Icons

Installation and usage

For React web projects

If your React project is not already using our React component library for the Design System, please install the natds-web dependency:

# with npm
npm install --save @naturacosmeticos/natds-web

# with yarn
yarn add @naturacosmeticos/natds-web

Now, have you installed the @naturacosmeticos/natds-web library?

Then, you can import the Icon component and, in the name property, enter the name of the icon you want to use, like:

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

const YourApp = () => (
  <>
    <Icon name={"outlined-finance-bag"} />
    <Icon name={"outlined-content-gift"} />
  </>
)

Note that, above, we are using two examples of icons out of the hundreds of options we offer.

import React from "react"
import "@naturacosmeticos/natds-icons/dist/natds-icons.css";
import { iconNames } from "@naturacosmeticos/natds-icons";

const Icon = (props) => (
  <i className={`natds-icons-${props.name}`} />
);

Where do I find icon names?

You can search for the icons you need in our Design System Storybook.

Note that the availability of the icons may vary depending on the version you use.

So always try to use the latest version of natds-web (or natds-icons, if this is the case)

For React Native projects

If your React Native project is not already using our library for the Design System, please install the natds-rn dependency:

# with npm
npm install --save @naturacosmeticos/natds-rn

# with yarn
yarn add @naturacosmeticos/natds-rn

Now, have you installed the @naturacosmeticos/natds-rn library?

Then follow the instructions of Icons section of React Native readme.

Looking for examples of using the Icon component in React Native and all the available properties?

Check out our documentation for Icon in the React Native Storybook for web.

For non-React projects

You can use this package by installing it directly into your project with:

# with npm
npm install --save @naturacosmeticos/natds-icons

# with yarn
yarn add @naturacosmeticos/natds-icons

You can import fonts and the generated CSS and JSON files like this:

import {
  iconNames, // the .json
  iconStyles, // the .css
  NatdsIconsEot,
  NatdsIconsSvg,
  NatdsIconsTtf,
  NatdsIconsWoff,
  NatdsIconsWoff2
} from '@naturacosmeticos/natds-icons';

For use on web environments, you will need to serve the fonts and consume the CSS file as you see fit.

You can also import the JSON file that contains the relationships between the icon names and their unicode counterparts (don't rely on the unicodes, they are generated automatically)

import {
  NatdsIconsTtf,
  iconNames
} from '@naturacosmeticos/natds-icons';

How to contribute

To contribute, please check our Contributing guidelines.