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.
Komplexní
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 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 retiree rings senate senate-81 senior settings simple-envelope sms-notification sos state-file time tombstone vaccine
Základní
all archived-outline archive-fill archive-outline arrow90deg-left arrow90deg-right arrow-counterclockwise arrow-repeat arrows-fullscreen attachment bell-fill bluetooth book box-arrow-in-right box-arrow-left box-arrow-right box-arrow-up-right briefcase briefcase-fill building-fill buildings calendar calendar-event camera car card-text caret-down-fill caret-left-fill caret-right-fill caret-up-fill car-front cash cash-stack chat-left-text chat-left-text-fill check-circle-fill check-lg check-multiple chevron-double-left chevron-double-right chevron-down chevron-left chevron-right chevron-up clipboard clock clock-history coin coins collection compass copy cursor-fill dash dash-circle dash-lg datovka delete-back desktop download envelope envelope-e envelope-fill envelope-open exclamation-circle exclamation-lg exclamation-triangle-fill eye eye-slash face-id face-recognition-alternative facebook file-earmark-arrow-down file-earmark-arrow-left file-earmark-text file-earmark-text-fill file-image file-image-fill files files-earmark-arrow-down filtering fingerprint flag flag-cz folder-open forward funnel funnel-fill gear gear-fill geo-alt-fill grid-3x3-gap-fill guestion-circle-fill hand-index-thumb-right-fill house-door-fill info info-circle journal-text lightbulb-fill link-45deg list loader lock map moon offline omv pencil-square person person-badge person-fill person-fill-bussines person-search person-vcard person-vcard-fill phone plus plus-circle plus-lg printer qr-code qr-code-scan qr-code-scan-simple question-circle question-circle-fill reply reply-all save search send send-fill shield-plus sigma sign-stop star star-fill tags three-dots three-dots-vertical touch-id trash trash-fill trash-restore twitter upload x x-lg x-network youtube
Další zdroje ikon
Pokud nenajdete v seznamu vhodnou ikonu, lze využít standardizované sety ikon, např.:
Pokud ani zde nenajdete vhodnou ikonu doporučujeme specifický set ikon vytvořit na míru webu podle níže uvedené specifikace.
Základní specifikace pro tvorbu ikon
Ikonou reprezentujte spíš věc než osobu (např. ikonu svatby reprezentují prstýnky ne postavy novomanželů).
Velikosti
Velikosti ikon by měly být konzistentní na celém webu. Doporučené velikosti: 16 px, 20 px, 24 px, 32 px.
Pro vývojáře
V rámci nabízených komponent je k dispozici i komponenta gov-icon, která načítá a zobrazuje externí SVG soubory.
Atribut type definuje název složky (poslední složka z konfigurace iconPath v konfiguraci design systému) a atribut name (název souboru bez přípony), která se v dané složce nachází.