---
title: "Pictograms"
description: "The Pictogram Component can be used to display Pictograms on a Page."
path: https://www.eonshowroom.eon.com/en/content-elements/picotgrams.html
lastModified: 2025-01-16T08:01:30.276Z
---

# Pictograms

# Pictogram

[How to Configure](#how-to)

### Description

The Pictogram Component can be used to display a Pictogram as decorative Element on a Page

- All Pictograms from Repository are usable
- Different Sizes are possible

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/media-pictogram--interactive)

### Inspirations

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/library%3A2-1?fmt=webp)

##### E.ON Pictogram Database

Looking for E.ON Brand approved Pictograms?

We just started mirroring our Pictogram Library directly in Frontify with advanced Search and Download Functions.

[Visit the E.ON Pictogram Library](https://brand.eon.com/document/80)

[List of FoundationNG Pictograms on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/media-pictogram--all-pictograms)

### Usage Rules & Features

##### Features

- All Pictograms from Repository can be used if added in Configuration

##### Properties

- Horizontal Alignment can be left, center, or right
- Vertical Alignment can be center or bottom

##### Design

- Pictogram has 4 different Sizes available from small to extra large

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | yes |
| 3 | yes |
| 4 | yes |
| 5 | yes |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | yes |

##### DO's

- Choose Size depending on how much it should be emphasized

##### DONT's

- Do not use small Pictograms in large Grid Columns

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/picto_style%3A1-1?fmt=webp)

### Configure a Pictogram

In Editor Dialog of Pictogram Component, Editor needs to select a Pictogram from a List of Pictograms.

Furthermore, horizontal and vertical Alignment can be choosen. By default it is both center aligned.

## How to use a Configuration Page

[Read more](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html)

### Extend the List of available Pictograms

For adding more Pictograms to the List of selectable Pictograms, Editor needs to add "FoundationNg Pictogram Config" to the Configuration Page. It is advisable to do this in the Homepage Configuration to make the Pictograms available on every Page.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/foundation-ng_pictogram-config%3A2-1?fmt=webp)

Opening FoundationNg Pictogram Config, Editor can deselect "enable property inhertitance" Checkbox to be able to fill the List automatically by enabling Checkbox "Use all available pictograms as backup", or to add or remove Pictograms manually in the List.

- will add an Entry direct under the Position of the clicked Icon. In this Entry only the Pictogram Name needs to be entered.
- will delete the Entry at the Position of the clicked Icon.

When the editing of the List is finished, Editor needs to save the Changes and (re-)publish this Configuration Page.

[List of FoundationNG Pictograms on Storybook](https://storybook-dev.uikit.eon.com/develop/?path=/story/media-pictogram--all-pictograms)

[Read more about FoundationNg Pictogram Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-pictogram-config.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/picto_color%3A3-4?fmt=webp)

### Adjust Color Scheme

Editor can select adjust Color Scheme Option.

Once it is selected, Editors have to select on which Background the Component is used.

Depending on the Background Color, different Color Schemes can be selected. For E.ON Scheme only one Color is selectable per Background. Therefore, it is not adviseable to adjust Color Scheme.