Ikony
Použití ikon
Ikony jsou klíčovým vizuálním prvkem, který pomáhá uživatelům rychle pochopit akce, objekty nebo stavy v uživatelském rozhraní. Správné použití ikon zvyšuje efektivitu komunikace, ale je důležité, aby jejich význam byl pro uživatele zřejmý. Ikony by měly být použity pouze tam, kde mohou skutečně zlepšit srozumitelnost a navigaci uživatele.
Ikony dostupné v rámci Design Systému gov.cz
Design Systém gov.cz využívá knihovnu Bootstrap Icons pro základní sadu ikon. Pro složitější a specifické potřeby jsou k dispozici vlastní komplexní ikony, které jsou přizpůsobeny požadavkům systému gov.cz.
Pro snadnější správu a administraci jsou všechny ikony k dispozici ve Figma Gov Icons
Velikosti ikon
Velikosti ikon by měly být konzistentní v rámci celého produktu a napříč všemi komponentami. Velikosti jsou definovány pomocí tokenů ze sady --icon-size, které zajišťují jednotnost a snadnou údržbu v celém systému. Použití tokenů navíc umožňuje rychlé přizpůsobení a změnu velikostí podle potřeby, aniž by bylo nutné zasahovat do jednotlivých komponent ručně.
Při výběru velikosti ikony je důležité vzít v úvahu kontext jejího použití. Menší ikony jsou vhodné pro doprovodný text, menší rozlišení nebo méně důležité vizuální prvky, zatímco větší ikony se doporučují pro interaktivní prvky, jako jsou tlačítka, nebo pro použití na dotykových zařízeních a na důležitých místech v rozhraní.
V každé komponentě by měly být ikony vždy použity v odpovídající velikosti, aby zachovaly konzistentní vzhled a funkčnost.
Ikony a přístupnost
Přístupnost je důležitým aspektem při práci s ikonami. Ujistěte se, že jsou ikony dostatečně kontrastní, aby byly dobře viditelné pro všechny uživatele. Pokud ikona reprezentuje důležitou informaci, měla by být doplněna textem nebo alternativním popisem, aby byla přístupná i pro čtečky obrazovky.
Další zdroje ikon
Pokud v seznamu dostupných ikon nenajdete tu, kterou potřebujete, můžete využít standardizované sety ikon, například:
Pro vývojáře
Pro vývojáře je v rámci komponent k dispozici i komponenta gov-icon, která načítá a zobrazuje externí SVG soubory. Atribut type definuje název složky, zatímco atribut name určuje název souboru bez přípony, který se v dané složce nachází.
Často kladené dotazy
Jaká jsou pravidla pro používání ikon různých velikostí?
Velikost ikon by měla odpovídat velikosti textu, se kterým jsou používány.
Je možné vytvářet vlastní ikony? Jak na to správně?
Pokud potřebujete vytvořit vlastní ikonu:
- Vyjděte z již existující ikony, která je co nejpodobnější zamýšlenému designu. Při úpravách nebo tvorbě ikon se držte vizuální konzistence a vycházejte z existujících ikon.
- Respektujte tloušťku vektorů a celkový styl ikon.
- V případě potřeby použijte ikony z okolí jako inspiraci.
Komplexní ikony
24-7 all arrival bell big-help business-file businessman cactus camera car card-400 card-401 card-403 card-404 card-500 card-502 certification coins communication confusion contact court covid digital disability doc-agreement doc-basic-info doc-business doc-car-point-list doc-diploma doc-driver-info doc-election doc-filled doc-health doc-judgment doc-patient doc-personal-info doc-petition doc-registers doc-review doc-search doc-stamp doc-state doc-taxes documents doc-universal doc-visa driver driver-file driving-licence email-notification energy envelope european-parliament family globe graduate hand hand-400 hand-401 hand-403 hand-404 hand-500 hand-502 health healthcare help history holiday hourglass house chamber-deputies chamber-deputies-200 chamber-deputies-cr chat cities city-office id id-card id-info illness incognito info info-list institute-file institution job job-loss map mobile-phone mouse my-filing my-state-data newborn new-comments news packet passport personal-file pet petrol-station pills population-register portal pregnant president presidential-election profile-settings property queue quotes region regional-elections regional-elections-clear register-of-persons remove-id retiree rings secured secured-phone senate senate-81 senior settings simple-envelope sms-notification sos state-file time tombstone user-login vaccine