Picto
SIX Pictograms
In general you should use six-icons in your application. However in certain domain specific cases you might need a more specific icon. In such a case you might find the icon you are looking for in the custom generated SIX pictograms.
html
<six-picto>copy</six-picto>
<six-picto>home</six-picto>BME specific icons
This collection not only includes pictos from SIX but also from BME.
html
<six-picto>clientesyusuarios</six-picto>
<six-picto>configuracion-de-servicio</six-picto>
<six-picto>gestion-de-fallidos</six-picto>
<six-picto>gestion-de-instrucciones</six-picto>
<six-picto>gestion-de-pago</six-picto>
<six-picto>reporting</six-picto>Sizing
The icons are available in different sizes. Default size is medium (24px).
Extra-small Icons
html
<six-picto size="xSmall">search</six-picto>
<six-picto size="xSmall">copy</six-picto>
<six-picto size="xSmall">movie-camera</six-picto>
<six-picto size="xSmall">home</six-picto>
<six-picto size="xSmall">info</six-picto>
<six-picto size="xSmall">lock</six-picto>
<six-picto size="xSmall">find-in-page</six-picto>
<six-picto size="xSmall">sentiment-dissatisfied</six-picto>Small Icons
html
<six-picto size="small">search</six-picto>
<six-picto size="small">copy</six-picto>
<six-picto size="small">movie-camera</six-picto>
<six-picto size="small">home</six-picto>
<six-picto size="small">info</six-picto>
<six-picto size="small">lock</six-picto>
<six-picto size="small">find-in-page</six-picto>
<six-picto size="small">sentiment-dissatisfied</six-picto>Medium Icons (Default Size)
html
<six-picto size="medium">search</six-picto>
<six-picto size="medium">copy</six-picto>
<six-picto size="medium">movie-camera</six-picto>
<six-picto size="medium">home</six-picto>
<six-picto size="medium">info</six-picto>
<six-picto size="medium">lock</six-picto>
<six-picto size="medium">find-in-page</six-picto>
<six-picto size="medium">sentiment-dissatisfied</six-picto>Large Icons
html
<six-picto size="large">search</six-picto>
<six-picto size="large">copy</six-picto>
<six-picto size="large">movie-camera</six-picto>
<six-picto size="large">home</six-picto>
<six-picto size="large">info</six-picto>
<six-picto size="large">lock</six-picto>
<six-picto size="large">find-in-page</six-picto>
<six-picto size="large">sentiment-dissatisfied</six-picto>Extra-large Icons
html
<six-picto size="xLarge">search</six-picto>
<six-picto size="xLarge">copy</six-picto>
<six-picto size="xLarge">movie-camera</six-picto>
<six-picto size="xLarge">home</six-picto>
<six-picto size="xLarge">info</six-picto>
<six-picto size="xLarge">lock</six-picto>
<six-picto size="xLarge">find-in-page</six-picto>
<six-picto size="xLarge">sentiment-dissatisfied</six-picto>2Extra-large Icons
html
<six-picto size="xxLarge">search</six-picto>
<six-picto size="xxLarge">copy</six-picto>
<six-picto size="xxLarge">movie-camera</six-picto>
<six-picto size="xxLarge">home</six-picto>
<six-picto size="xxLarge">info</six-picto>
<six-picto size="xxLarge">lock</six-picto>
<six-picto size="xxLarge">find-in-page</six-picto>
<six-picto size="xxLarge">sentiment-dissatisfied</six-picto>3Extra-large Icons
html
<six-picto size="xxxLarge">search</six-picto>
<six-picto size="xxxLarge">copy</six-picto>
<six-picto size="xxxLarge">movie-camera</six-picto>
<six-picto size="xxxLarge">home</six-picto>
<six-picto size="xxxLarge">info</six-picto>
<six-picto size="xxxLarge">lock</six-picto>
<six-picto size="xxxLarge">find-in-page</six-picto>
<six-picto size="xxxLarge">sentiment-dissatisfied</six-picto>Ultra-large Icons
html
<six-picto size="4xl">search</six-picto>
<six-picto size="4xl">copy</six-picto>
<six-picto size="4xl">movie-camera</six-picto>
<six-picto size="4xl">home</six-picto>
<six-picto size="4xl">info</six-picto>
<six-picto size="4xl">lock</six-picto>
<six-picto size="4xl">find-in-page</six-picto>
<six-picto size="4xl">sentiment-dissatisfied</six-picto>Custom Color
If you want to change the color of the pictogram you can do so simply by overwriting the styles:
html
<style>
.success::part(icon) {
background-color: green;
}
.warning::part(icon) {
background-color: orange;
}
.danger::part(icon) {
background-color: red;
}
</style>
<six-picto class="success">search</six-picto>
<six-picto class="warning">copy</six-picto>
<six-picto class="danger">movie-camera</six-picto>Enter an icon label and press enter to display an icon:
html
<div style="border: solid 1px #f6f6f6">
<div style="display: flex">
<six-input placeholder="search for an icon..."
style="margin-bottom: 1em; width: 100%"
id="icon-search"
></six-input>
</div>
<div id="icon-showcase" style="display: flex; flex-wrap: wrap; height: 70vh; overflow: scroll"></div>
</div>
<script type="module">
const icons =
'clientesyusuarios;configuracion-de-servicio;copy;external-link;gestion-de-fallidos;gestion-de-instrucciones;gestion-de-pago;home;info;movie-camera;reporting;search;lock;find-in-page;sentiment-dissatisfied;mail-copy;person;person-business;person-client;person-callcenter;person-group;wc-men;wc-woman;wc-handicap;micro-payments;robotics;machine-learning;robo-advisor;social-trading;wearables;star;analyse;tachometer;mobile-payment;office;currency;simple-integration;wallet;scales;responsive-design;wlan;foreign-exchange;augmented-reality;shield;rain;factory;snow;paris;rocket;x;temperature;cornet;popsicle;coffee;croissant;cupcake;bank;ear;drop;apple;flash;data-mapping;heart;swiss;tool;hashtag;car;business;flag;bill;sun;signal;airplane;plus;minus;lab;privacy;screen;usb;tokenization;hand;like;ecommerce;bell;webshop;psp;block;bull-bear;desktop;pay-points;punch-card;ticket;gift;statistic;stocks;liquid;markets;visibility;laptop-outline;relaxing;lounge;paninoteca;cleaning;ambulance;bilateral;focus;navigation;headphones;anchor;server;stairs;beacon;coupon;qr;shop;sound;unlock;pencil;touch;bone;social-days;gamepad;astronaut-outline;planet;diamond;fence;stop;happy;sad;guide;tablet;crown;more;play;pause;map;viking;bluetooth;cam;buggy;bee;telephone;barcode;battery;giftcard;sextant;softwarepackage;service-center;cost-reduction;international-connectivity;cyber-security;telescope;storage;seal;stock;fax;labyrinth;viena;client-receipt;gprs-lan;lines;realtime;target;disc;outsorcing;ethernet;gprs;monitoring;wlan-bluetooth;extinguisher;mountain;carabiner;soc;chf-eur;printer;eur-dollar;dws;cup;binoculars;beat;snowflake;snowman;agile;dog;hacker-security;rabbit;cap;lighthouse;dumbbell;sailboat;backoffice;stopwatch;piechart;megaphone;flipchart;mail;spirit;microphone;alert;fraud-free;lunch-learn;genie;click-return;click-collect;recurring-payments;ai;file;qr-scanner;split;generic;process;suitcase;capsule;tin;pet;bottle;cake;file-text;flower;fingerprint;pig;paddle;package;connectivity;crystal-ball;TPP;paragraph;calendar;book;rss;coins;banknote;cash;cashless;card;clock;leaf;flexibility;piggy-bank;stability;lightbulb;success;global;gears;cheveron-right;map-marker;share;exchange;download;exclamation;check;question;trash;warning;arrow-right;skull;berlin;london;zurich;handshake;puzzle;projector;speechbubble;cloud;key;glass;arrow-up;diversify;no-smoking;smoking;surveillance;arrow-down;calculator;parking;train;contactless;glasses;way-up;umbrella;cash-machine;terminal;mobile-terminal;cash-register;shopping-cart;upload;funnel;rock;shopping-cart-download;shopping-cart-chf;big-data;dna;blockchain;crowdfunding;cryptocurrency;identity-management;iot;drop-zone;menu';
let iconSearch = document.querySelector('#icon-search');
const showcase = document.getElementById('icon-showcase');
showcase.innerHTML = icons
.split(';')
.map(
(i) =>
`<div data-option="${i}" style="margin: 1em; padding: 1em; height: 7.5em; width: 10em; text-align: center; background-color: rgba(164,164,164,0.04);"><six-picto size="large">${i}</six-picto><div style="padding: 0.5em;">${i}</div></div>`
)
.join('\n');
iconSearch.addEventListener('six-input-input', (event) => {
Array.from(document.getElementById('icon-showcase').children).forEach((n) => {
const iconLabel = n.getAttribute('data-option');
const searchTerms = iconSearch.value.trim().split(' ');
const labelContainsAllSearchTerms =
searchTerms.filter((s) => iconLabel.includes(s)).length === searchTerms.length;
if (!labelContainsAllSearchTerms) {
n.style.display = 'none';
} else {
n.style.display = 'initial';
}
});
});
</script>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | Defines the size of the icon. | "4xl" | "large" | "medium" | "small" | "xLarge" | "xSmall" | "xxLarge" | "xxxLarge" | 'medium' |
Shadow Parts
| Part | Description |
|---|---|
"icon" | The component's icon wrapper. |
Dependencies
Used by
Graph
Copyright © 2021-present SIX-Group