Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



A collection of icons for Natura & Co. Design System

Version published
Weekly downloads
decreased by-0.85%
Install size
1.72 MB
Weekly downloads



Natura Design System - Icons

Icon Names 📌

You can search for the names of the icons you need in our Natura Design System website.

ℹ️ Note that the availability of the icons may vary depending on the version you use, so always try to use the latest stable version of natds-icons.

How to use

Using NatDS Libraries

If you are developing for theses platforms, you can check out our component libraries for: Android (natds-android), iOS (natds-ios), React (natds-web), and React Native (natds-rn).

Here you can find more instructions on how to use natds-icons along with those libraries:

Without Using NatDS Libraries

Web development
  • Using npm:
npm install --save @naturacosmeticos/natds-icons
  • Using yarn:
yarn add @naturacosmeticos/natds-icons
  • Using CDN:

This library is available to use from both unpkg and jsdelivr. You can load the files from this networks using URLs that points directly to the files you want, like this:

Or this:

⚠️ You can replace latest by the better version for your project. We recommend you always use the latest stable version.

Check out unpkg and jsdelivr to see the files you can import and their complete URLs.

ℹ️ Working with TypeScript?

We also provide declaration files for CSS and JSON, so you can avoid the "Could not find a declaration file for module" error.

Using CSS + icon font

Load the font icons from the package @naturacosmeticos/natds-icons:

<link rel="stylesheet" href="">

or load it from node_modules with a module bundler like webpack or rollup


import React from 'react';
import '@naturacosmeticos/natds-icons/natds-icons.css';


module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...

After that, you can insert an icon by adding the name of the icon class to any inline HTML element. Like this example:

<!DOCTYPE html>
    <link rel="stylesheet" href="">

    <i class="natds-icons natds-icons-filled-action-love"></i>


The <i> and <span> elements are widely used to add icons.

All the icons can be customized with CSS (size, color, shadow, etc.), but we recommend using the class names provided to make it easier to stick to our overall design guidelines.

If you need a customization that is not provided yet, please consider contributing, or you can create an issue.

Using SVG

You can use the SVG files for the icons individually by importing them from the ./dist/svg folder or CDN. Like this example:

<!DOCTYPE html>

    <img src="" alt="star icon">


Or like this:

<!DOCTYPE html>

    <a href="/" class="rating-star">
      Rate this product!

.rating-star {
  display: block;
  text-indent: -9999px;
  background: url(;
Android development

In order to use natds-icons in an Android project, you must add a new dependency. To download the dependency it is necessary to use a Github active account. You Can create in your project a file - for ex: github_credentials- with properties and fill it with Github username and Access token. For getting your GitHub access token see the Tutorial. Its important to check read:packages when generating you password. In the file build.gradle, insert these informations:

repositories {
    def githubProperties = new Properties()
    def githubFile = rootProject.file("")
    if (githubFile.exists()) {
        githubProperties.load(new FileInputStream(githubFile))
    //To Access Nat DS Icons dependency at Github Packages
    maven {
        name = "natds-commons"
        url = uri("")
        credentials {
            username = githubProperties['github.username'] ?: System.getenv("GITHUB_USERNAME")
            password = githubProperties['github.password'] ?: System.getenv("GITHUB_API_KEY")


dependencies {
implementation "$rootProject.<version>"

With the dependency configured, you can access our icons as drawables. 😃

iOS development

To use NatDS Icons, you MUST add a new pod to your project. You must specify it in your Podfile:

target '<Your Target Name>' do
    pod 'NatDSIcons'    

Check the documentation on how to use icons.

How to contribute

To contribute, please check our Contributing guidelines.



Last updated on 29 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc