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.
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.
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.
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.
Barvy
Vždy používejte barvy dle barevné palety. Nepoužívejte žádné další barvy, ani nekombinujte více barev v rámci jedné ikony.
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.
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>
