1. Styly

Ikony

Slouží k vizuální reprezentaci objektu nebo akce.

Doporučení pro použití

Ikonami můžete vhodným způsobem doplnit textové sdělení nebo je můžete použít samostatně. Důležité je zajistit, aby význam použité ikony byl pro uživatele zřejmý. Používejte ikony s rozmyslem tak, aby byla zajištěna jasnost sdělení.

Systémové ikony

Systémové ikony symbolizují běžné akce, příkazy, soubory, zařízení. Jejich cílem je snížit množství textu na stránce a usnadnění orientace pomocí vizuálního jazyka. Stejná ikona by na jedné stránce neměla sloužit k více různým akcím.

Icon system

Další zdroje ikon

Pokud nenajdete v seznamu vhodnou ikonu, lze využít standardizované sety ikon, např.:

Pokud ani zde nenajdete vhodnou ikonu, zašlete nám svůj požadavek na e-mail design@mvcr.cz.

Velikosti

Velikosti ikon by měly být konzistentní na celém webu. Doporučené velikosti: 16 px, 20 px, 24 px, 32 px. Icon size

Text u ikony

Každá ikona by měla mít svůj popisek. Pokud není použita současně s textem, měl by se popis zobrazit po najetí na ikonu. Icon text

Styly ikon

Dle použité knihovny ikon lze pracovat s různými styly: např. obrysové, vyplněné. Oba styly se dají kombinovat a použít v různém kontextu, např. aktivní a neaktivní stav. Icon style

Barvy

Vždy používejte barvy dle barevné palety. Nepoužívejte žádné další barvy, ani nekombinujte více barev v rámci jedné ikony. Icon colors

Přístupnost

Aby byly stránky přístupné pro zrakově postižené, ikony by měly zahrnovat alternativní text, který je čten pomocí čteček obrazovky. Více o přístupnosti webových stránek

Piktogramy a loga

Sdílejí stejné prostředí jako ikony, ale mohou mít oproti nim různé velikosti a vlastní vizuální jazyk. Cílem je jejich vizuální styl co nejvíce sladit, pokud to jejich vlastní pravidla umožňují. Např. sjednotit varianty loga na šířku / na výšku a použít monochromní variantu loga stejné barvy, jakmile se vyskytují vedle sebe. Doporučujeme vždy používat verzi loga v křivkách. Pro specifická pravidla použití loga se řiďte jejich manuálem.

Icon style

Práce s ikonami

Font a knihovna

Ikony jsou vytvořeny jako webový font ve formátech TTF a WOFF. Fonty jsou k dispozici v sekci Ke stažení. K dispozici jsou jak fonty, tak CSS knihovna, což vám umožňuje použití ikon v rámci HTML kódu.

Pro vložení ikony do stránky můžete použít třídu CSS .pvs-theme- doplněnou o název ikony.

Například pro ikonu Person použijte:

<span class="pvs-theme-icon-person"></span>