Getting Started with Icons

The following guide shows how you can use the Earth Design System's Icon Library @adaptavant/eds-icons in your application.

Before using the Icon Library, you must have the Earth Design System configured in your project. If you haven't set up yet EDS yet, please refer to the Getting Started documentation and complete the setup.

npm install @adaptavant/eds-icons @adaptavant/eds-core @adaptavant/eds-brands

⚠️ Note: Currently, we only support Tailwind CSS v3. We will update the documentation soon once we officially support v4

Update your tailwind.config.js file to include the eds-icons package in the content paths:

/* tailwind.config.js */
const { tokens } = require('@adaptavant/eds-brands/setmore');
const { createPreset } = require('@adaptavant/eds-core/tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Your existing content paths
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@adaptavant/eds-core/dist/**/*.{js,ts,jsx,tsx}',
    
    // Add eds-icons to the content paths
    './node_modules/@adaptavant/eds-icons/dist/**/*.{js,jsx,ts,tsx}',
  ],
  presets: [createPreset(tokens)], // using the Earth preset configures Tailwind to use our custom classes
  theme: {
    extend: {},
  },
  plugins: [],
}

This ensures that Tailwind CSS can properly purge unused styles and include the necessary classes for the icon components.

Once configured, you can import individual icons and symbols from the @adaptavant/eds-icons package

import { AddIcon, ErrorFilledIcon, FacebookColorIcon } from '@adaptavant/eds-icons';

function MyComponent() {
  return (
    <div>
      <HomeIcon />
      <UserIcon className="w-6 h-6 text-blue-500" />
      <SettingsIcon size={24} />
    </div>
  );
}

The @adaptavant/eds-icons package provides organized entry points for different types of icons:

Import directly from the main package to access all icons, symbols and types:

import { AddIcon, ErrorFilledIcon, FacebookColorIcon } from '@adaptavant/eds-icons';

Import just icons from the /icons entry point:

import { AddIcon, DeleteIcon, EditIcon } from '@adaptavant/eds-icons/icons';

Import just symbols from the /symbols entry point:

import { FacebookColorIcon, GmailColorIcon, InstagramColorIcon } from '@adaptavant/eds-icons/symbols';

You're now ready to use EDS Icons in your application! The icon library provides everything you need to create consistent, accessible, and visually appealing interfaces that align with the Earth Design System.