Design systém gov.cz4.6.0

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:

  1. 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.
  2. Respektujte tloušťku vektorů a celkový styl ikon.
  3. 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