Dajú sa vytvoriť aj vlastné ikonky?
ChatGPT povedal:20.10.2025
Áno, vlastné ikonky sa dajú vytvoriť, ale je rozdiel medzi emoji ako textový znak a grafickou ikonou. Tu je prehľad možností:
- Vlastné grafické ikonky (najbežnejší spôsob)
• Môžeš ich vytvoriť ako obrázky (PNG, SVG, ICO) v grafických programoch typu:
o Figma, Adobe Illustrator, Canva, Inkscape
• Potom ich môžeš vložiť do:
o Webových stránok
o Dokumentov a prezentácií
o Mobilných alebo desktop aplikácií
Výhoda: úplná kontrola nad dizajnom, farbami a tvarom
Nevýhoda: nejde ich priamo použiť ako textový znak, musia byť vložené ako obrázok - Vlastné „emoji“ pre chat a aplikácie
• Niektoré platformy umožňujú vytvoriť vlastné emoji:
o Slack, Discord, Microsoft Teams – môžeš nahrať vlastný obrázok ako emoji
o Mobilné klávesnice – existujú aplikácie, ktoré umožňujú pridávať vlastné emoji do textu
Výhoda: dá sa používať priamo v texte
Nevýhoda: obmedzené na konkrétnu platformu - Vlastné fonty s ikonami
• Môžeš vytvoriť vlastný ikonový font (napr. SVG font):
o Každý znak fontu bude vlastná ikonka
o Nástroje: FontForge, IcoMoon, Fontello
• Takto môžeš písať ikonky priamo ako textové znaky
Použitie: webové stránky, aplikácie, dokumenty
• Perfektne! Tu je krok za krokom návod, ako vytvoriť vlastnú ikonku a použiť ju buď ako obrázok alebo textový znak vo vlastnom fontu:
Časť 1: Vytvorenie grafickej ikonky (PNG/SVG)
- Vyber nástroj:
Bezplatné: Figma, Canva, Inkscape
Platené: Adobe Illustrator, Affinity Designer - Nastav rozmer:
Pre web/emoji: 128×128 px alebo 256×256 px
Pre SVG (vektor): nemusíš riešiť veľkosť – dá sa škálovať - Navrhni ikonku:
Použi jednoduché tvary a kontrastné farby
Minimalistický dizajn funguje najlepšie pri malých veľkostiach - Exportuj:
PNG – vhodné pre obrázky a aplikácie
SVG – ideálne pre web a vektorové použitie
Časť 2: Použitie ikonky ako obrázok
Web:
Dokumenty/Prezentácie: vlož ako obrázok
Aplikácie: použi súbor PNG/SVG vo svojom GUI
Časť 3: Vytvorenie vlastného fontu s ikonami (ikonový font)
- Vyber nástroj:
Bezplatné: IcoMoon, Fontello, FontForge
Platené: Glyphs, FontLab - Importuj ikonky:
Najlepšie vo formáte SVG - Priraď každú ikonku k znaku:
Napr. ikona „hviezda“ = písmeno A
Ikona „raketa“ = písmeno B
Strana 231 - Exportuj font:
Formáty: .ttf, .woff, .eot, .svg - Použitie fontu:
Web: @font-face v CSS + používanie znakov
Dokumenty/Prezentácie: nainštaluj font a píš ikonky ako text
Tipy a triky
o Drž ikonky jednoduché, aby boli čitateľné aj pri malých veľkostiach
o Používaj vektorový formát (SVG) pre škálovateľnosť
o Pre multiplatformové emoji používaj PNG 128–256 px
o Ikonový font je ideálny, ak chceš písať ikonky priamo do textu
o Super! Ukážem ti praktický príklad, ako vytvoriť jednu jednoduchú ikonku, exportovať ju do SVG a použiť ju ako fontový znak. Budeme pracovať s ikonou hviezdy.
1️⃣ Vytvorenie ikonky (SVG)
Tu je jednoduchý SVG kód pre hviezdu:
určuje tvary hviezdy.
fill=“#FFD700″ je zlatá farba.
Tento SVG súbor môžeš uložiť ako star.svg.
2️⃣ Vytvorenie vlastného fontu (IcoMoon) - Otvor stránku: IcoMoon App
- Klikni „Import Icons“ a nahraj star.svg
- Vyber ikonku a klikni „Generate Font“
- Priraď ikonke znak, napr. A
- Stiahni vygenerovaný font – bude obsahovať TTF, WOFF, SVG
3️⃣ Použitie ikonky ako fontový znak (Web)
Vlastná ikonka A
font-family = názov tvojho vlastného fontu
A = znak, ktorý sme priradili ikonke
✅ Teraz máš funkčnú vlastnú ikonku, ktorú môžeš písať priamo do textu pomocou fontu, alebo použiť ako SVG obrázok.