Ikony a vizuální jazyk e-shopu: konzistence, přístupnost a licence

Ikony jsou na e-shopu všude. Košík, hledání, účet, oblíbené, filtr, doprava zdarma, vrácení do 30 dnů, skladem, platba kartou. Dobře zvolené ikony zrychlí orientaci a udělají z webu jeden celek. Špatně zvolené přidají šum: tři různé styly vedle sebe, symboly, kterým nikdo nerozumí, a tlačítka, která čtečka obrazovky přečte jako „tlačítko“ bez názvu.

V článku projdeme, jak ikony vybírat, kdy potřebují popisek, jak je technicky vložit, aby byly přístupné, na co si dát pozor u licencí a jak je udržet v pořádku v rámci design systému.

Vizuální jazyk: jedna rodina, jedna pravidla

Ikony jsou součást vizuálního jazyka značky stejně jako barvy a písmo. Nejčastější problém, který vidíme při auditech, je mix. Hlavička má ikony z jedné knihovny, patička z druhé, benefity u produktu nakreslil grafik a doplněk platformy přinesl čtvrtý styl. Každý zvlášť vypadá dobře, dohromady působí web neuspořádaně.

Konzistentní sada má společné:

• Styl kresby. Obrysové (outline), nebo plné (filled). Míchat je dává smysl jen záměrně, třeba plná ikona pro aktivní stav.
• Tloušťku čáry. Pokud má košík čáru 2 px a srdíčko 1,5 px, oko to pozná.
• Mřížku a velikost. Ikony kreslené na stejné mřížce (typicky 24 × 24) mají stejnou optickou váhu.
• Zakončení a rohy. Kulaté, nebo ostré konce čar, zaoblené, nebo hranaté rohy.
• Barvu podle role. Ikona v textu má barvu textu, ikona akce barvu akce, stavová ikona (skladem, chyba) stavovou barvu.

Nejjednodušší cesta ke konzistenci je vybrat jednu knihovnu jako základ a vlastní ikony (třeba pro specifické kategorie sortimentu) kreslit ve stejném stylu a na stejné mřížce.

Ikona s popiskem, nebo bez něj

Nielsen Norman Group dlouhodobě doporučuje dávat k ikonám textové popisky. Důvod je prostý: univerzálně srozumitelných ikon je velmi málo. Lidé chápou ikonu podle toho, kde ji viděli dřív, a u většiny symbolů žádný ustálený význam neexistuje. NN/g také upozorňuje, že popisek zobrazený až po najetí myší nefunguje na dotykových zařízeních a zvyšuje námahu.

V praxi e-shopu to znamená:

Poslední řádek je důležitý. Pokud dostupnost ukazuje jen zelená nebo červená tečka, část zákazníků rozdíl neuvidí. WCAG zakazuje předávat informaci pouze barvou, text „skladem“ nebo „do 5 dnů“ patří vedle ikony vždy.

Přístupnost ikon v praxi

Ikony se týkají několika požadavků přístupnosti podle WCAG. Pro české e-shopy to od 28. června 2025 není jen dobrá praxe. Zákon č. 424/2023 Sb. o požadavcích na přístupnost některých výrobků a služeb se vztahuje i na služby elektronického obchodu, s výjimkou mikropodniků (méně než 10 zaměstnanců a roční obrat nebo bilanční suma do 2 milionů EUR). Dozor u podnikatelů vykonává Česká obchodní inspekce. Širší souvislosti najdete v článku Accessibility (WCAG) pro e-shopy.

Co u ikon hlídat:

• Přístupný název tlačítek jen s ikonou. Tlačítko košíku nebo zavření okna musí mít název pro čtečku obrazovky, typicky přes aria-label na tlačítku.
• Dekorativní ikony skrýt. Ikona vedle textu „Doprava zdarma“ nic nového neříká. Označte ji aria-hidden="true", jinak čtečka přečte zbytečný šum.
• Kontrast. Ikony nutné k pochopení obsahu nebo ovládání potřebují kontrast aspoň 3 : 1 vůči pozadí (WCAG 2.2, kritérium 1.4.11).
• Velikost cíle. WCAG 2.2 na úrovni AA požaduje klikací plochu aspoň 24 × 24 CSS pixelů, nebo dostatečné rozestupy mezi menšími cíli. Úroveň AAA a mobilní praxe počítají s 44 × 44. Kresba může být menší, klikací plocha tlačítka ne.
• Stav fokusu. Při ovládání klávesnicí musí být vidět, na které ikoně uživatel je.

Technika: proč SVG

Ikony se na webu vkládají čtyřmi způsoby: jako obrázky PNG, jako ikonový font, jako SVG vložené přímo do HTML, nebo jako SVG sprite (jeden soubor s mnoha ikonami, na které se odkazuje). Pro nové projekty doporučujeme SVG.

• Ostré v každém rozlišení. Vektor se nerozmaže na displejích s vysokou hustotou pixelů.
• Barva přes CSS. Pomocí currentColor přebírá ikona barvu textu, takže funguje i v tmavém režimu a v různých stavech tlačítka.
• Lepší přístupnost. SVG jde jednoduše skrýt, nebo pojmenovat. Ikonový font je pro čtečku obrazovky jen znak a bez dalších úprav může přečíst nesmysl.
• Menší přenos dat. Načtete jen ikony, které používáte. U ikonového fontu se často stahuje celá sada kvůli deseti symbolům.

U PNG ikon, které na starších e-shopech ještě potkáváme, doporučujeme při nejbližší příležitosti přechod na SVG. Zlepší to ostrost ikon a obvykle i množství přenesených dat.

Knihovny ikon a licence

Hotová knihovna ušetří hodně práce, ale každá má licenci. Stav k září 2026 u často používaných sad:

Aktuální licenci ověřte přímo u knihovny a verze, kterou používáte. Placené sady (třeba Font Awesome Pro) mají vlastní podmínky a často je vázané na předplatné. Pozor také na ikony stažené z agregátorů obrázků: stejný web často nabízí volné i placené ikony a licence se liší u každé položky. Pokud ikonu neumíte doložit licencí, nepoužívejte ji.

Samostatná kapitola jsou loga platebních metod a dopravců. Ta nejsou součástí ikonových knihoven, řídí se manuály značek jednotlivých firem a stahujte je z jejich oficiálních stránek pro obchodníky.

Ikony v design systému

Na menším e-shopu stačí pravidlo „používáme Lucide, čára 2 px, velikost 20 a 24 px“. Jakmile web roste, patří ikony do design systému:

• Seznam povolených ikon s významem („srdce = oblíbené, nikdy hodnocení“).
• Velikosti jako [design tokeny](/kb/design/design-tokeny), třeba 16, 20 a 24 px, žádné mezihodnoty.
• Komponenta ikony v komponentové knihovně, která řeší přístupný název, skrytí dekorativních ikon a barvu. Vývojář pak ikonu jen vybere a nemusí pokaždé myslet na atributy.
• Pravidla pro nové ikony: kdo je kreslí, na jaké mřížce a kde se ukládají.
• Stejné ikony v návrzích i v kódu. Knihovnu máte v nástroji pro návrh i ve frontendu ve stejné verzi.

Víc o tom, co design systém e-shopu přináší a kdy se vyplatí, píšeme v článku Design systém pro e-shop.

Jak na to prakticky: kontrolní seznam

• Používáte na celém webu jednu rodinu ikon se stejnou tloušťkou čáry a stylem?
• Mají všechny ikony kromě pár univerzálních viditelný textový popisek?
• Má každé tlačítko jen s ikonou přístupný název?
• Jsou dekorativní ikony skryté před čtečkou obrazovky?
• Splňují ikony kontrast 3 : 1 a klikací plochu aspoň 24 × 24 CSS pixelů?
• Nestojí žádná informace (skladem, chyba, sleva) jen na barvě ikony?
• Máte ikony jako SVG, ne jako PNG nebo celý ikonový font?
• Víte, pod jakou licencí jsou všechny ikony na webu?
• Je sada ikon popsaná v design systému včetně velikostí a významů?

Pokud chcete vědět, jak na tom váš e-shop je, ikony procházíme v rámci UX auditu, který máme hotový do 10 dnů. Sjednocení ikon, komponent a pravidel pak řešíme jako součást design systému a komponent.