Ikony

Ikony są reprezentacją graficzną funkcji i służą do zwiększenia czytelności interfejsu użytkownika poprzez wizualne wyróżnienie elementów interaktywnych. Na stronach internetowych ORLEN do tego celu wykorzystywane są ikony z bilblioteki Material Design.

Pobierz bibliotekę ikonWięcej o ikonach

Rozmiary

Ikony funkcjonalne występują w dwóch rozmiarach: 24px na 24px i 18px na 18px. Podane rozmiary dotyczą wysokości i szerokości pola ochronnego ikony. Wysokość i szerokość grafiki ikony wewnątrz pola ochronnego nie jest zunifikowana i podlega korekcie optycznej. Nie należy używać samej grafiki ikon bez pola ochronnego ani dostosowywać rozmiaru grafiki ikony do zdefioniowanych wartości rozmiarowych.

  1. Pole ochronne ikony
  2. Grafika ikony

Opcje kolorystyczne

Ikony na stronach ORLEN mogą występować w wyznaczonych wariantach kolorystycznych. Ikony na jasnym tle mają kolor "Grey 70%" lub kolor "Czerwony ORLEN". Ikony na ciemnym tle zawsze występują w kolorze białym. Dopuszczalne jest również użycie kolorów statusowych (zielonego, żółtego i czerwonego) jeśli ikona występuje jako część komunikatu systemowego.


<i aria-hidden="true" class="mdi icon--24px mdi-arrow-right"></i>
<i aria-hidden="true" class="mdi icon--18px mdi-arrow-right"></i>
<i aria-hidden="true" class="mdi icon--24px icon--red mdi-arrow-right"></i>
<i aria-hidden="true" class="mdi icon--18px icon--red mdi-arrow-right"></i>


<i aria-hidden="true" class="mdi icon--24px icon--white mdi-arrow-right"></i>
<i aria-hidden="true" class="mdi icon--18px icon--white mdi-arrow-right"></i>

Zasady stosowania

Ikony powinny służyć celom funkcjonalnym

Ikony można używać w przyciskach i linkach oraz jako element komunikatów systemowych.

Ikony nie powinny występować w roli dekoracji

Zastosowanie ikon ograniczone jest do sytuacji w których wskazują na funkcję. Rolę dekoracji pełnią piktogramy, ilustracje i zdjęcia

Nie należy zmieniać rozmiaru ani stylu ikon

Zastosowanie ikon ograniczone jest do sytuacji w których wskazują na funkcję elementu, przy którym zostały użyte.

Nie należy wprowadzać alternatywnych bibliotek

Tak samo jak w przypadku użycia ujednoliconego kroju firmowego na stronach, użycie tej samej biblioteki ikon sprawia że strony wyglądają spójnie.