ILO Design System - Brand Assets

Static brand assets for use in digital and software products using the ILO Design System.

Installation

npm i @ilo-org/brand-assets

Basic Usage

1. Import the image directly

This assumes that you're using a module bundler like Webpack that will allow you to import the image into a JavaScript file and then include it in a production bundle where the import will be interpolated into a file path.

In this example, we're importing a logo from the from @ilo-org/brand-assets package and providing it to a React component.

import ilo_logo from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";

export const Logo = (props) => <img src={ilo_logo} {...props} />;

If you're using Next.js, you should use its next/image component to do this.

2. Import the image URL

import { logo_en_horizontal_blue } from "@ilo-org/brand-assets";

export const Logo = (props) => <img src={logo_en_horizontal_blue} {...props} />;

This will give you a URL object with normalized path to the file's location in the package. This is the easiest solution if you're able to serve them directly from the node_modules folder.

Conversely, it will not work in build systems that wont't serve assets from node_modules and that need to bundle them directly.

List of Assets

Additional assets will be added to this package in future versions.

ILO Logo

| Image | Language | Filetype | Exported as | Filename | | ------------------------------------------------------------------- | ---------- | -------- | ------------------------------ | ------------------------------ | | | English | png | logo_en_horizontal_blue_png | logo_en_horizontal_blue.png | | | English | svg | logo_en_horizontal_blue_svg | logo_en_horizontal_blue.svg | | | English | png | logo_en_horizontal_white_png | logo_en_horizontal_white.png | | | English | svg | logo_en_horizontal_white_svg | logo_en_horizontal_white.svg | | | French | png | logo_fr_horizontal_blue_png | logo_fr_horizontal_blue.png | | | French | svg | logo_fr_horizontal_blue_svg | logo_fr_horizontal_blue.svg | | | French | png | logo_fr_horizontal_white_png | logo_fr_horizontal_white.png | | | French | svg | logo_fr_horizontal_white_svg | logo_fr_horizontal_white.svg | | | Spanish | png | logo_es_horizontal_blue_png | logo_es_horizontal_blue.png | | | Spanish | svg | logo_es_horizontal_blue_svg | logo_es_horizontal_blue.svg | | | Spanish | png | logo_es_horizontal_white_png | logo_es_horizontal_white.png | | | Spanish | svg | logo_es_horizontal_white_svg | logo_es_horizontal_white.svg | | | Arabic | png | logo_ar_horizontal_blue_png | logo_ar_horizontal_blue.png | | | Arabic | svg | logo_ar_horizontal_blue_svg | logo_ar_horizontal_blue.svg | | | Arabic | png | logo_ar_horizontal_white_png | logo_ar_horizontal_white.png | | | Arabic | svg | logo_ar_horizontal_white_svg | logo_ar_horizontal_white.svg | | | Chinese | png | logo_zh_horizontal_blue_png | logo_zh_horizontal_blue.png | | | Chinese | svg | logo_zh_horizontal_blue_svg | logo_zh_horizontal_blue.svg | | | Chinese | png | logo_zh_horizontal_white_png | logo_zh_horizontal_white.png | | | Chinese | svg | logo_zh_horizontal_white_svg | logo_zh_horizontal_white.svg | | | Dutch | png | logo_nl_horizontal_blue_png | logo_nl_horizontal_blue.png | | | Dutch | svg | logo_nl_horizontal_blue_svg | logo_nl_horizontal_blue.svg | | | Dutch | png | logo_nl_horizontal_white_png | logo_nl_horizontal_white.png | | | Dutch | svg | logo_nl_horizontal_white_svg | logo_nl_horizontal_white.svg | | | German | png | logo_de_horizontal_blue_png | logo_de_horizontal_blue.png | | | German | svg | logo_de_horizontal_blue_svg | logo_de_horizontal_blue.svg | | | German | png | logo_de_horizontal_white_png | logo_de_horizontal_white.png | | | German | svg | logo_de_horizontal_white_svg | logo_de_horizontal_white.svg | | | Italian | png | logo_it_horizontal_blue_png | logo_it_horizontal_blue.png | | | Italian | svg | logo_it_horizontal_blue_svg | logo_it_horizontal_blue.svg | | | Italian | png | logo_it_horizontal_white_png | logo_it_horizontal_white.png | | | Italian | svg | logo_it_horizontal_white_svg | logo_it_horizontal_white.svg | | | Japanese | png | logo_ja_horizontal_blue_png | logo_ja_horizontal_blue.png | | | Japanese | svg | logo_ja_horizontal_blue_svg | logo_ja_horizontal_blue.svg | | | Japanese | png | logo_ja_horizontal_white_png | logo_ja_horizontal_white.png | | | Japanese | svg | logo_ja_horizontal_white_svg | logo_ja_horizontal_white.svg | | | Portuguese | png | logo_pt_horizontal_blue_png | logo_pt_horizontal_blue.png | | | Portuguese | svg | logo_pt_horizontal_blue_svg | logo_pt_horizontal_blue.svg | | | Portuguese | png | logo_pt_horizontal_white_png | logo_pt_horizontal_white.png | | | Portuguese | svg | logo_pt_horizontal_white_svg | logo_pt_horizontal_white.svg | | | Russian | png | logo_ru_horizontal_blue_png | logo_ru_horizontal_blue.png | | | Russian | svg | logo_ru_horizontal_blue_svg | logo_ru_horizontal_blue.svg | | | Russian | png | logo_ru_horizontal_white_png | logo_ru_horizontal_white.png | | | Russian | svg | logo_ru_horizontal_white_svg | logo_ru_horizontal_white.svg | | | Turkish | png | logo_tr_horizontal_blue_png | logo_tr_horizontal_blue.png | | | Turkish | svg | logo_tr_horizontal_blue_svg | logo_tr_horizontal_blue.svg | | | Turkish | png | logo_tr_horizontal_white_png | logo_tr_horizontal_white.png | | | Turkish | svg | logo_tr_horizontal_white_svg | logo_tr_horizontal_white.svg | | | Vietnamese | png | logo_vi_horizontal_blue_png | logo_vi_horizontal_blue.png | | | Vietnamese | svg | logo_vi_horizontal_blue_svg | logo_vi_horizontal_blue.svg | | | Vietnamese | png | logo_vi_horizontal_white_png | logo_vi_horizontal_white.png | | | Vietnamese | svg | logo_vi_horizontal_white_svg | logo_vi_horizontal_white.svg |

Favicon

Various different favicon formats are available in the package. They are exported from the /dist/favicon directory. The following table lists the available formats and their dimensions.

| Image | Description | Dimensions | Filetype | | ----------------------------------------------------------------------- | ---------------------------- | ---------- | -------- | | | favicon.ico | 32x32 | .ico | | | mstile-270x270x.png | 270x270 | .png | | | apple-touch-icon.png | 180x180 | .png | | | android-chrome-192x192.png | 192x192 | .png | | | android-chrome-512x512.png | 512x512 | .png | | | safari-pinned-tab.svg | - | .svg |

Contributing

ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the contribution guidelines.