Ikony

1. Seznam doporučených typu ikon

Tento dokument shrnuje doporučené zásady pro použití ikon z knihovny Font Awesome.

Pro zajištění jednotnosti a konzistence uživatelského prostředí napříč všemi aplikacemi je nezbytné tato pravidla důsledně dodržovat.

Používání ikon by mělo být promyšlené a záměrné, ne jen dekorativní. Ikony mají usnadňovat navigaci a snižovat kognitivní zátěž, ale při nesprávném použití mohou naopak uživatele zmást.

2. Typy ikon

Ikony se v rozhraní dělí na dva hlavní typy podle jejich primární role a umístění:

2.1. Významná ikona (Prominent Icon)

Jde o ikonu, která slouží jako hlavní vizuální prvek k identifikaci nebo kategorizaci obsahu (např. v navigačním panelu, u nadpisů sekcí, nebo jako hlavní symbol v rámci komponenty, jako je karta nebo dlaždice). Je v dominantním postavení a obvykle stojí sama bez textu, nebo s ním tvoří primární informační celek.

2.2. Ikona v řádku (Inline Icon)

Definice: Ikona, která je úzce spojena s textem a je umístěna přímo v řádku textu (před, za ním, nebo v tlačítku). Slouží k vizuální podpoře textového významu, indikaci stavu, nebo jako součást interaktivního prvku (např. CTA tlačítka).

3. Vizuální konzistence ikony s písmem (Typografií)

Ikona a text tvoří jeden celek. Musí mít odpovídající vizuální váhu, aby jeden prvek nepřebíjel druhý.

• Váha ikony (Stroke Weight): Tloušťka čar ikony by měla vizuálně odpovídat tloušťce tahu písma, se kterým je použita.
  • Příklad: Pokud je použit font Regular nebo Medium, ikony by měly mít tenčí čáry. Pokud je text Semibold nebo Bold, mohou být čáry ikon silnější.
  • Pravidlo: Ikona by měla mít stejnou "optickou" tučnost jako text.
• Velikost (Size): Velikost ikony by měla být úměrná velikosti písma.
  • Základní doporučení: Ikona by měla být obvykle o něco málo menší než výška velkých písmen (Cap Height) nebo se rovnat výšce řádku (Line Height) textu, vedle kterého stojí.
  • Běžné velikosti: Pro text 16px (Body) se často používají ikony o velikosti 16x16px nebo 20x20px. Větší nadpisy si vyžádají větší ikonu.

4. Zarovnání ikony a textu

Klíčové pro profesionální a čistý vzhled je správné vertikální zarovnání (Alignment).

4.1. Základní zarovnání s jedním řádkem textu

Ikona a text by měly být zarovnány tak, aby vizuálně tvořily rovnou linii.

• Doporučené zarovnání: Optické vertikální zarovnání na střed (Middle Alignment).
  • Ikona by měla být vycentrována vůči celkové výšce řádku textu.
  • Důležité: Nejedná se vždy o matematický střed (geometrický střed). Kvůli asymetrickým tvarům (např. ikona šipky, obálky) je často vhodné ikonu opticky posunout o 1-2 pixely, aby vypadala zarovnaná s základní linií (Baseline) nebo výškou malých písmen (x-height) textu.

4.2. Zarovnání s textem a popisem (Dva řádky)

Toto je častý případ (např. položka v seznamu, notifikace), kdy máte hlavní text (nadpis) a pod ním popis (description).

5. Doporučené vzdálenosti od textu (Spacing)

Vzdálenost ikony od textu musí být konzistentní a dostatečná, aby nedocházelo k vizuálnímu splývání. Pro vzdálenost ikony od textu nebo objektu používejte systém vzdáleností (Spacing Scale): V našem případě se jedná o následující hodnoty (po 4px krocích: 4px, 8px, 12px, 16px...).

• Vzdálenost ikony od textu:
  • Doporučená hodnota: Vycházejte z 1/2 výšky ikony a vyberte nejbližší stupeň z měřítkové škály.
    • Příklad pro 16px ikonu: Vzdálenost 8px od textu.
    • Pro interaktivní prvky (tlačítka): Použijte menší vzdálenost (4px), aby ikona a text byly pevněji svázány jako jeden cíl kliknutí.
    • Pro dekorační prvky (seznamy): Použijte o něco větší vzdálenost (např. 12px – 16px), aby se text dobře četl.

TODO: Nachystat tabulku doporučených velikostí a řezů podle literals.

Příklad doporučeného chování ikon (na základě aktuálního VIGo tématu)