import { Meta, Source } from '@storybook/addon-docs';
import dedent from 'ts-dedent';

<Meta title="Guidelines / Iconography" />

# Iconography

> Each icon is designed to communicate intent and facilitate navigation. They can symbolize a command, a file, a delivery method, a device, or a service. They are also used to represent common actions such as search, print, and edit.

Simplicity and intelligibility are the keywords for a good icon in a user interface. Each icon in this library is reduced to its minimal form, just enough to capture the essence of its meaning.
This ensures readability and clarity even in small sizes.
Each icon is exported after its design in SVG format, to facilitate its integration into a production environment, and thus to optimize the performance of the project.

For more details, see our <a class="vtmn-link vtmn-link--icon-along" href="https://www.decathlon.design/726f8c765/p/91dc94-iconography" target="_blank" rel="noopener noreferrer">Iconography's guideline</a>.

## Icons package

If you need to use icons inside your application, you just need to install `@vtmn/icons` package and use it in different ways by following this <a class="vtmn-link vtmn-link--icon-along" href="https://www.npmjs.com/package/@vtmn/icons" target="_blank" rel="noopener noreferrer">README</a>.

## Icons showcase

To see icons in action and easily get their name, you can check <a class="vtmn-link vtmn-link--icon-along" href="https://decathlon.github.io/vitamin-web/@vtmn/showcase-icons/" target="_blank" rel="noopener noreferrer">this showcase</a>.
