Jak vybrat správnou velikost mřížky pro ikony
Mřížka určuje všechno. Naučte se, proč se 16px, 24px a 32px používají nejčastěji a jak se rozhodnout pro váš projekt.
Číst dáleVlastní ikony a piktogramy pro web
Vytváříme konzistentní systémy ikon, které komunikují bez slov. Správná mřížka, váha čáry a stavy — všechno na jednom místě.
24
Kompletních systémů
2800+
Ikon navrženo
15
Let let zkušenosti
85
Projektů po celém světě
O tvorbě systémů ikon
Nejsme jen designéři — jsme specialisté na konzistenci. Když máte 200 ikon, není to sada náhodných obrázků. Je to jazyk, kterým vaše rozhraní mluví.
Práce na mřížce, tloušťce čar a stavech ikon není jen technické — je to umění. Víme, co funguje, protože jsme to zkoušeli tisíckrát. A my vám chceme ukázat, jak na to.
Každý projekt je jiný. Startup s 40 ikonami se řeší jinak než firemní systém s 500 symboly. Ale princip zůstává: jasnost, konzistence a funkčnost.
Více o nás
Jak vytváříme systémy ikon
Od analýzy až po hotový SVG systém — čtyři jasné kroky
1
Analýza a mřížka
Začínáme rozhodnutím o mřížce. 16px, 24px nebo 32px? To určuje všechno — tloušťku čáry, detaily, škálovatelnost.
2
Tloušťka čáry a geometrie
Každá ikona se kreslí s konzistentní váhou. 1px, 2px nebo 3px? Závisí na kontextu a čitelnosti na různých velikostech.
3
Stavy a interakce
Ikona v klidu je jen začátek. Musíme řešit hover, active, disabled a další stavy bez zmatení uživatele.
4
Dokumentace a SVG
Finální systém není jen soubor obrázků — je to dokumentace, SVG export a návod, jak systém udržovat.
Proč správný systém ikon záleží
Konzistentní ikony nejsou luxus — jsou nutnost
Konzistence v celém rozhraní
Uživatel se orientuje snadněji, když všechny ikony fungují podle stejných pravidel.
Snadné rozšiřování
Přidáte novou ikonu? Už víte přesně, jak ji nakreslit. Není to náhodnost.
Čitelnost na všech velikostech
Správná mřížka a váha čáry zajistí, že ikona funguje v 16px i v 64px.
Komunikace bez slov
Ikony by měly být jasné i bez popisku. Správný systém to zajišťuje.
Usnadnění údržby
Když všechno funguje podle pravidel, údržba je jednoduchá i pro ostatní designéry.
Kvalita kódu a SVG
Systematické ikony znamenají čistější SVG, menší soubory a lepší výkon.
Příklady našich projektů
Podívejte se na hotové systémy a jak se používají
E-shop s 120 ikonami
Kategorie, filtry, stavy — všechno v jednotném designu. 24px mřížka, 2px čáry.
Zdravotnická aplikace
Přesnost je všechno. Medicínský systém s 85 ikonami, kde každá má přesný smysl.
Firemní design systém
Pro korporaci s 300+ ikonami. Hierarchie, barevné varianty, kompletní dokumentace.
Nejčtenější články
Naučte se základy tvorby systémů ikon
Stavy ikon: Hover, Active, Disabled a více
Ikona v klidu je jen polovina příběhu. Zkuste si vytvořit všechny stavy bez toho, aby to vypadalo chaoticky.
Číst dále
Tloušťka čar: Kdy použít 1px, 2px nebo 3px
Tloušťka čáry změní dojem z vaší ikony. Praktický průvodce pro výběr správné váhy pro různé kontexty.
Číst dáleNaše cesta
Od prvních skic k úplným designovým systémům
2009
Začínáme s prvními návrhy ikon pro malé weby
2012
Vytváříme první kompletní systém se 150 ikonami
2015
Zaměřujeme se na design systémy a konzistenci
2018
Publikujeme první průvodce správným tvorbě ikon
2021
Dosahujeme 50+ kompletních projektů pro různé industrie
2024
Spouštíme edukační platformu pro design systémů ikon
Naše principy
Jak přistupujeme ke každému projektu
“Konzistence není náhodnost”
Každá ikona má svůj důvod. Mřížka, váha, proporcje — všechno se řídí pravidly, ne pocitem designéra v ten den.
“Méně je víc”
Zbytečná detaily zhoršují čitelnost. Fokusujeme se na to, co je opravdu důležité a co komunikuje smysl ikony.
“Systém, ne sada”
Neshodujeme se na izolovaných ikonách. Stavíme systémy, které rostou, mění se a rozšiřují bez ztráty integrity.
“Funkčnost na prvním místě”
Krásná ikona, která zmatuje uživatele, není krásná. Jasnost a srozumitelnost vítězí vždy.
Často kladené otázky
Jaký je rozdíl mezi 16px a 24px mřížkou?
16px je kompaktnější, vhodná pro husté rozhraní. 24px dává více prostoru a je čitelnější na malých obrazovkách. 32px se používá pro systémy s větší škálou.
Kolik ikon potřebuju v systému?
Začněte s 20-30 základními ikonami. Systém pak rostě podle potřeby. Ale kvalita je důležitější než kvantita.
Jak řešit stavy ikon bez zmatení?
Subtilní změny — lehčí barva pro disabled, mírná transformace pro hover. Nikdy nedělat z ikony něco úplně jiného.
Potřebuju designéra na údržbu systému?
Ideálně ano. Ale dobře zdokumentovaný systém zvládne i vývojář s designovými základy. Dokumentace je klíč.
Připraveni na vlastní systém ikon?
Pomůžeme vám vytvořit konzistentní, funkční a krásný systém ikon pro váš projekt. Od analýzy přes design až po dokumentaci.