İkon Sistemi Tasarımı: 50 Sembolü Aşan Ölçekte İkonografi Kurmak

Çoğu ürün ikon kütüphanesi çürür. İlk tasarımcı kırk sembollük temiz bir set teslim eder. İkinci tasarımcının üç ikona daha ihtiyacı olur ve onları yanlış çizgi kalınlığında elle çizer. Üçüncü tasarımcı, bir cuma günü bir özelliği yetiştirmek için ücretsiz bir paketten ikon indirir. Ürünün ikinci yılına gelindiğinde, her ekrandaki ikon sütunu tek bir navigasyona dikilmiş dört farklı marka gibi görünür.

Bu yazı işin çalışan versiyonu. Grid, kalınlık, optik düzeltme, isimlendirme, yönetişim ve bir ikon sistemini 50 sembolün ötesinde tutarlı tutan küçük kural seti. Haftanın ikonu vitrinleri yok, sistem taklidi yapan şablonlar yok. Sadece gerçek bir kütüphanenin gerçek bir ekipte hayatta kalmasını sağlayan kararlar var.

İkon sistemi aslında nedir

İkon sistemi, ortak kurallarla yönetilen tutarlı bir piktogram setidir. Grid boyutu, çizgi kalınlığı, köşe yarıçapı, optik hizalama, isimlendirme ve yeni ikon ekleme süreci. Amaç bir SVG klasörü değil. Amaç, herhangi bir tasarımcının veya mühendisin ürünün görsel ritmini bozmadan genişletebileceği bir sistem.

Bir ikon yığını sistem değildir. 200 sembollü ve kuralsız bir Figma dosyası sistem değildir. Sistemin kısıtları, isimlendirilmiş kararları ve henüz var olmayan bir ikona ihtiyaç duyulduğunda ne olacağını anlatan yazılı bir süreci vardır.

Tasarım sistemleri rehberi, ikonların içinde yaşadığı daha geniş sistemi anlatıyor. Bu yazı özellikle ikonografi katmanına derinlemesine iniyor.

İkonlar göründüğünden neden daha önemli

İkonlar, herhangi bir üründeki en yoğun arayüz parçasıdır. Tek bir 24x24 piksellik ikon, ekrandaki başka hiçbir öğeden daha fazla anlamı metrekare başına taşır. Sistemi doğru kurarsan ürün tek bir şey gibi okunur. Yanlış kurarsan her ekran, kullanıcıların ifade edemediği bir şekilde ters hisseder.

İkonlar ayrıca garip ölçeklenir. İki ekran arasındaki yazı tipi kayması kolay fark edilir. İkon kayması adlandırması daha zor ama hissi daha yüksek sesli. Beyin piktogramları metinden daha hızlı işler, yani ikon tutarsızlığını metin tutarsızlığından daha hızlı fark eder.

İkonları tutarlı bir sistem olarak teslim eden ürün, işin geri kalanı pürüzlü olsa bile cilalı görünür. İkonları başıboş bırakan ürün ise işin geri kalanı keskin olsa bile ucuz görünür.

---

Grid sistemin kendisidir

Her tutarlı ikon kütüphanesi bir gridle başlar. Grid, her ikonun oturduğu görünmez iskelettir. O olmadan ikonlar boyut, kalınlık ve optik denge açısından savrulur ve kod incelemesinde tutarlılığı zorlamanın yolu kalmaz.

Temel grid

Tek bir temel grid boyutu seç ve onun içinde yaşa. 2026'da işe yarayan iki varsayılan:

• Ürün arayüzü ikonları için 24 piksellik grid. Çoğu modern arayüzün standart boyutu.
• Yoğun veri arayüzleri, dashboard'lar ve yönetim araçları için 20 piksellik grid.

Grid sadece tuval boyutu değildir. Aynı zamanda ikonun gerçekten oturduğu, tuvalin içindeki canlı alandır. 24 piksellik gridin 20 piksellik bir canlı alanı vardır, her kenarda 2 piksel boşlukla. Bu boşluk ikona nefes alacak yer verir ve komşu öğelere karşı sıkışık görünmesini önler.

Grid içindeki kılavuz çizgiler

Canlı alanın, şekli yöneten iç kılavuz çizgileri (keyline) vardır. 20 piksellik bir canlı alan dört kılavuz şekli alır:

Her kılavuz çizgi, aynı boyutta görsel olarak dengeli bir ikon üretir. 18 pikselde çizilen bir daire, 18 pikseldeki bir kareden daha küçük görünür çünkü insan gözü daireleri daha küçük okur. Kılavuz çizgiler bu algısal huyu telafi eder.

Token olarak çizgi kalınlığı

Tek bir çizgi kalınlığı seç ve ona sadık kal. Çoğu ürün ikon sistemi 24 piksellik gridde 1,5 veya 2 piksellik çizgiler kullanır. Marka sesine göre seç.

1,5 piksellik çizgi hafif, teknik ve modern okunur. 2 piksellik çizgi kendinden emin, samimi ve erişilebilir okunur. 3 piksellik çizgi cesur, çocuksu veya baskı tarzı okunur. Birini seç. Token olarak belgele. Farklı kalınlık kullanan her ikon katkısını reddet.

Tasarım token'ları sözlüğü, çizgi kalınlığının daha geniş token mimarisine nasıl oturduğunu anlatıyor.

---

Fark optik düzeltmede

Matematiksel hizalama görsel hizalama değildir. Grid'e kusursuz oturan ikonlar çoğu zaman yanlış görünür çünkü insan gözü pikselleri ölçmez, algılanan ağırlığı ve dengeyi ölçer.

Optik düzeltme neden var

20x20 pikselde bir daire ile 20x20 pikselde bir kare aynı boyutta okunmaz. Kare, sınırlayıcı kutusunu tamamen doldurduğu için daha fazla görsel kütleye sahiptir. Dairenin köşelerinde boş alan vardır ve göz bunu daha küçük bir nesne olarak kaydeder.

Çözüm, daireyi sınırlayıcı kutudan biraz büyük çizmek, bazen 1 ila 2 piksel kadar. Matematik yanlış der, göz doğru der. Her zaman göze güven.

Yaygın optik düzeltmeler

Beş düzeltme ikon işinin çoğunu kapsar:

• Daireler karelerden büyük görünür. Daire kılavuz çizgilerini 1 ila 2 piksel büyüt.
• Üçgenler karelerden küçük görünür. Üçgen kılavuz çizgilerini 2 ila 3 piksel büyüt.
• Çapraz çizgiler yatay çizgilerden ince görünür. Çaprazlara 0,25 ila 0,5 piksel kalınlık ekle.
• Asimetrik ikonların merkezleri kayar. Oynat düğmelerini, okları ve chevron'ları gözle optik olarak ortala, asla sınırlayıcı kutuyla değil.
• Keskin köşeler daha küçük okunur. İç köşeleri, dış köşelerin algılanan ağırlığına uyması için hafifçe yuvarla.

Bu düzeltmeler fikir değil. Herhangi bir ikonu küçük boyutlarda hem matematiksel olarak mükemmel hem de optik olarak düzeltilmiş haliyle yan yana test et. Optik olarak düzeltilmiş versiyon her zaman kazanır. Her zaman.

---

Birikerek büyüyen stil kararları

Grid ve kalınlıklar belirlendikten sonra, diğer her stil kararı bir kez verilmeli ve her yere uygulanmalı. Bunlardan herhangi birindeki tutarsızlık, kütüphaneye çok fazla elin değdiği izlenimini verir.

Köşe yarıçapı

Bir dış köşe yarıçapı ve bir iç köşe yarıçapı seç. İkisi çift olarak çalışır.

1 piksel dış yarıçap ve 0,5 piksel iç yarıçap net ve modern okunur. 2 piksel dış yarıçap ve 1 piksel iç yarıçap samimi ve yuvarlak okunur. Yarıçapsız, keskin kenarlı bir set mimari ve ciddi okunur.

Yanlış hamle, aynı kütüphane içinde yarıçapları karıştırmaktır. Diğerlerinden daha keskin köşeli tek bir ikon bile başka bir setten ödünç alınmış gibi görünür.

Uç başlıkları ve birleşimler

Çizgilerin uçları vardır. Uç başlıkları kare, yuvarlak veya çıkıntılı olabilir. Çizgiler arasındaki birleşimler miter (keskin), yuvarlak veya bevel (kesik) olabilir. Her birinden birini seç ve sistem boyunca uygula.

Yuvarlak uç başlıkları ve yuvarlak birleşimler samimi, yaklaşılabilir bir ikon seti üretir. Kare uç başlıkları ve miter birleşimler kesin, teknik bir set üretir. Aynı kütüphanede karışık uç başlıkları yarım kalmış görünen bir set üretir.

Dolu ve çizgili

Çoğu modern ikon sistemi her ikonun iki varyantını sunar: pasif durumlar için çizgili versiyon ve aktif durumlar için dolu versiyon. Çizgili versiyon stroke kullanır. Dolu versiyon aynı şeklin içi doldurulmuş halidir.

İki varyant görsel olarak dengeli olmalı. Aynı boyuttaki dolu versiyon çoğu zaman çizgiliden daha ağır ve baskın okunur. Çözüm, dolu versiyonun kapladığı alanı 1 ila 2 piksel küçültmek, böylece görsel ağırlık aynı ölçekte çizgiliyle eşleşir.

Odak durumu sözlüğü, çizgiliden doluya geçişin daha geniş etkileşim durumu tasarımına nasıl oturduğunu anlatıyor.

---

İkon isimlendirmek sistemin yarısıdır

Kimsenin bulamadığı 200 güzel çizilmiş ikonluk bir kütüphane, kimsenin kullanmadığı bir kütüphanedir. İsimlendirme keşfedilebilirlik katmanıdır ve kötü isimlendirme benimsemeyi kötü çizimden daha hızlı öldürür.

Ölçeklenen isimlendirme kalıpları

Metafor öncelikli değil, nesne öncelikli isimlendirme kullan. Büyüteç ikonu search veya magnifier'dır, asla find ya da look değil. Nesne sabittir. Metafor bağlama göre değişir.

Çok kelimeli ikonlar için kebab-case kullan: arrow-left, chevron-down, cloud-upload. Harf biçiminde tutarlılık, mühendislerin kütüphanede grep yapmasını, IDE'lerde otomatik tamamlamasını ve yazım hatası olmadan teslim etmesini sağlar.

Yön son eklerini sadece gerektiğinde kullan. arrow yetmez. arrow-left, arrow-right, arrow-up, arrow-down minimum settir. Chevron'lar, caret'ler ve diğer yönlü piktogramlar için de aynısı geçerli.

Varyant isimlendirme

Bir ikonun birden fazla varyantı olduğunda (çizgili, dolu, iki tonlu), varyantı son ek olarak ekle:

• search (varsayılan çizgili)
• search-filled
• search-duotone

Bu kalıp, mühendisin ayrı bir klasörde kazı yapmadan search-filled'ı bir butona almasını sağlar. Öngörülebilir isimlendirme, kusursuz organizasyondan hızlıdır.

Eş anlamlı haritaları

İsimlendirmedeki en büyük başarısızlık, tasarımcının yanlış kelimeyi aradığı için bulamadığı ikondur. Kütüphanenin yanında bir eş anlamlı haritası kur. cart ayrıca bag, shopping ile de eşleşir. home ayrıca house, dashboard ile eşleşir. delete ayrıca trash, remove, bin ile eşleşir.

Çoğu modern ikon arama aracı (Iconify, Lucide, Phosphor) eş anlamlı haritalarını arama arayüzüne yerleştirir. Aynısını iç kütüphaneye de kur, yoksa tasarımcıların mevcut ikonu bulamadıkları için kopya ikon eklemeye devam edeceğini kabul et.

---

Yönetişim sistemi canlı tutar

Yukarıdaki teknik kararlar, yetkin her tasarımcı tarafından tekrarlanabilir. Yaşayan bir sistemi ikinci yılında ölen bir sistemden ayıran şey yönetişim kararlarıdır.

Tek doğruluk kaynağı

İkonların yaşadığı tek bir yer seç. Ya bir Figma kütüphanesi, ya SVG'li bir kod deposu, ya da Iconify gibi barındırılan bir servis. Birini seç. Kütüphane orada yaşar. Her tasarımcı oradan çeker. Her mühendis oradan çeker.

İki doğruluk kaynağı olan sistemin sıfır doğruluk kaynağı vardır. Figma kütüphanesi ve kod kütüphanesi üçüncü haftada birbirinden kopar ve o andan itibaren her ekran sisteme uymayan ikonlarla çıkar.

Katkı süreci

Yeni ikon ekleme sürecini belgele. Süreç şunları içermeli:

1. Önce ara. İkonun farklı bir isimle zaten var olmadığını doğrula.
2. Eklemeyi gerekçelendir. İkonun neyi temsil ettiği ve nerede kullanılacağı hakkında tek cümle yaz.
3. Spesifikasyona göre çiz. Mevcut kütüphanenin gridine, çizgi kalınlığına, köşe yarıçapına, uç başlıklarına ve birleşimlerine uy.
4. Optik inceleme. İkinci bir tasarımcı ikonu 16, 20 ve 24 piksel boyutlarında görsel denge açısından kontrol eder.
5. İsimlendir ve teslim et. İsim, isimlendirme kalıbını izler. Figma'ya ve koda aynı PR'da teslim et.

Katkı süreci olmayan sistem, atlanan sistemdir. Bir tasarımcının acilen ikona ihtiyacı olduğu ilk seferde ücretsiz bir paketten indirip sormadan teslim eder. O andan itibaren kütüphanenin bir fork'u vardır.

Kullanımdan kaldırma süreci

İkonlar kullanımdan kalkar. Bir yeniden tasarım eski bir stili emekli eder, bir özellik kesilir, bir marka yenilemesi görsel dili değiştirir. İkonların kütüphaneye nasıl girdiğini değil, nasıl çıktığını da belgele.

Kullanımdan kalkacak ikonları kütüphanede görünür bir etiketle işaretle. Mevcut ekranların geçiş yapabilmesi için onları 90 gün boyunca erişilebilir tut. Sonra kaldır. Hiç ikon kaldırmayan kütüphane müzeye dönüşür ve müzeler görmezden gelinir.

---

İkonlar koda nasıl ulaşır

Tasarım ile kod arasındaki devir, çoğu ikon sisteminin koptuğu yerdir. Figma kütüphanesi tertemiz, kod kütüphanesi tutarsız SVG'lerin mezarlığı ve mühendisler ikisine de güvenmeyi bırakıyor.

Format SVG'dir

İkonları SVG olarak teslim et. PNG değil, ikon fontları değil. SVG vektördür, kayıpsız her boyuta ölçeklenir, kolay temalama için currentColor mirasını destekler ve bileşenlere inline gömülecek kadar küçük gelir.

Her SVG'nin gride uyan bir viewBox'ı (24x24 veya 20x20) vardır, stroke ve fill için currentColor kullanır ve gereksiz transform veya stilleri dışarıda bırakır. Temiz bir SVG 1 KB'ın altındadır. Çoğu ikon kütüphanesi 3 ila 5 KB'lık ikonlar sunar çünkü varsayılan ayarlarla dışa aktarılmışlardır; bu da kimsenin ihtiyaç duymadığı metadata, transform ve inline stilleri gömer.

Optimizasyon pazarlık konusu değildir

Her SVG'yi kod deposuna inmeden önce SVGO'dan geçir. SVGO metadata'yı temizler, path'leri basitleştirir, gereksiz öznitelikleri kaldırır ve dosya boyutunu ortalama %60 ila 80 düşürür.

200 ikonluk bir kütüphanede optimize edilmemiş ile optimize edilmiş arasındaki fark genelde her sayfa yüklemesinde 400 KB'tır. Bu bir Lighthouse darbesi, bir core web vitals gerilemesi ve sebepsiz yere daha yavaş bir mobil deneyimdir.

Bileşen sarmalayıcıları

Her SVG'yi tipli bir bileşene (React, Vue, Svelte) sar. Bileşen boyut, renk ve erişilebilirlik prop'larını alır. Mühendis asla ham SVG import etmez. <Icon name="search" size={20} /> import eder ve gerisini sistem halleder.

Bu kalıp, ikon kütüphanesinin altta yatan dışa aktarım formatını (SVG, sprite, ikon fontu) tüketici koda dokunmadan değiştirebilmesi demektir. Bileşen API'dir, SVG uygulamadır.

Tasarım devri sözlüğü, daha geniş devir disiplinini anlatıyor. İkonlar, tasarımcıların ve mühendislerin gerçekten sahipliği paylaştığı nadir durumlardan biri.

---

Yaygın ikon sistemi hataları

Her ikon denetimi aynı hataları yakalar. Sistem bunlardan herhangi biriyle çıkıyorsa, kütüphane bir yeniden tasarım uzağında tam bir yeniden yazıma açıktır.

Tek kütüphanede üç çizgi kalınlığı. Neredeyse her zaman kütüphanenin birden fazla ücretsiz paketten derlendiği anlamına gelir. Çözüm, tüm setin tek kalınlıkta zorunlu yeniden çizimidir.

Farklı ölçeklerde dolu ve çizgili varyantlar. Dolu versiyon çizgiliden büyük okunur çünkü kimse algılanan ağırlığı telafi etmemiştir. Çözüm, ikisi aynı boyutta okunana kadar dolu versiyonu 1 ila 2 piksel küçültmektir.

Tutarsız köşe yarıçapı. İkonların yarısı yuvarlak köşeli, yarısı kare. Neredeyse her zaman iki farklı tasarımcı yazılı bir kural olmadan katkı verdiği içindir. Çözüm, tek bir yarıçap tanımlayıp refactor etmektir.

Metaforla isimlendirme. İkonların resmettikleri nesne yerine find, look, discover diye isimlendirilmesi. Tasarımcılar onları bulamaz. Çözüm, nesne öncelikli kurallara göre yeniden isimlendirmektir.

Kullanımdan kaldırma süreci yok. Kütüphanede 350 ikon var, 80'i kullanılmıyor veya değiştirilmiş. Şişkinlik aramayı yavaşlatır ve yeni tasarımcıları karıştırır. Çözüm, üç aylık denetim ve 90 günlük kullanımdan kaldırma döngüsüdür.

---

2026 koşullarında ikon sistemleri

Üç kayma, ikon sistemlerinin nasıl kurulduğunu değiştirdi. Sistemin bunlara dayanması gerekiyor.

Değişken ikon fontları gerçek. Yeni formatlar, tek bir ikon dosyasının birden fazla kalınlık, dolgu ve pürüzsüzce interpolasyon yapan optik boyut taşımasına izin verir. Teknik avantaj muazzam, tasarım riski ise ekiplerin yapabildikleri için her varyantı her ekranda teslim etmesi. Teslim edilecek varyantları seç. Gerisini kes.

Yapay zeka araçları saniyeler içinde ikon üretiyor. Midjourney, DALL-E ve ChatGPT tek bir prompt ile kabul edilebilir bir ikon üretebilir. Risk, tasarımcıların ikon çizmeyi bırakıp prompt yazmaya başlaması; çünkü her prompt biraz farklı bir stil üretir ve bu sistem tutarlılığını öldürür. Yapay zekayı ilk taslaklar için kullan. Her çıktıyı sisteme uyacak şekilde refactor et.

Lucide, Phosphor ve Heroicons çıtayı belirliyor. Bu açık kütüphaneler tutarlı grid, kalınlık ve isimlendirmeyle 1500+ ikon sunuyor. Çoğu ürün için bunlardan birinden başlayıp özelleştirmek, sıfırdan kurmaktan daha hızlı ve daha iyidir. Özel ikonlar yalnızca açık kütüphanelerin kapsamadığı ürüne özgü kavramlar için çizilir.

WCAG sözlüğü, ikon kontrastını ve etiketlemesini yöneten erişilebilirlik temellerini anlatıyor. Etkileşimli öğelerdeki ikonların sadece görsel etiketlere değil, erişilebilir isimlere ihtiyacı var.

---

SSS

Bir ikon sistemi hangi boyutta grid kullanmalı?

Genel ürün arayüzü için 24 piksellik grid, yoğun veri arayüzleri için 20 piksellik grid. Gridin her kenarında 2 piksellik boşluk vardır ve ikonun gerçekten oturduğu 20 veya 16 piksellik bir canlı alan kalır. Birini seç ve tüm kütüphane boyunca onun içinde yaşa.

İkon çizgileri ne kadar kalın olmalı?

24 piksellik gridde 1,5 ila 2 piksel. 1,5 piksel hafif ve teknik, 2 piksel kendinden emin ve samimi okunur. Tek bir kalınlık seç, token olarak belgele ve farklı kalınlık kullanan her katkıyı reddet.

İkon tasarımında optik düzeltme nedir?

Matematik hizalı dese bile ikonların dengeli görünmesi için ayarlanması pratiğidir. Daireler karelerden büyük, üçgenler küçük görünür, çaprazlar yataylardan ince görünür. Optik düzeltme bu algısal huyları telafi eder. Sınırlayıcı kutu yerine her zaman göze güven.

İkonlar dolu mu çizgili mi olmalı?

Çoğu modern sistem ikisini de sunar. Pasif durumlar için çizgili, aktif durumlar için dolu. İki varyant görsel olarak dengeli olmalı; bu da genelde dolu versiyonun, algılanan ağırlık eşleşsin diye çizgiliden 1 ila 2 piksel küçük olması demektir.

Bir tasarım sisteminde ikonlar nasıl isimlendirilmeli?

Nesne öncelikli, kebab-case, gerektiğinde yön son ekleriyle. Find değil search. Back değil arrow-left. Tasarımcılar alternatif kelimelerle arayabilsin diye eş anlamlı haritaları kullan. Mühendisler doğru varyantı tek import'ta alabilsin diye varyant son ekleri (filled, duotone) ekle.

Özel ikon ne zaman çizilmeli, açık kütüphane ne zaman kullanılmalı?

Temel olarak bir açık kütüphane (Lucide, Phosphor, Heroicons) kullan. Yalnızca bu kütüphanelerin kapsamadığı ürüne özgü kavramları özel çiz. 2026'da sıfırdan 300 ikonluk bir set kurmak neredeyse her zaman boşa harcanan emektir. Açık tabanı özelleştir, eklemeleri belgele, teslim et.

Sistem kendi masrafını çıkarır

Tutarlı bir ikon kütüphanesi, bir ürünü cilalı hissettirmenin en ucuz yoludur. Savrulan bir ikon kütüphanesi, bir ürünü ucuz hissettirmenin en hızlı yoludur. Sistemi kurmanın maliyeti bir ila iki haftalık disiplinli iştir. Kurmamanın maliyeti, ürünün teslim ettiği her ekranda sonsuza dek ödenen kalıcı bir görsel vergidir.

Bir grid seç. Bir kalınlık seç. Bir köşe yarıçapı seç. Bir isimlendirme kalıbı seç. Katkı ve kullanımdan kaldırma sürecini yaz. SVG'leri optimize et. Onları tipli bir bileşene sar. Sonra hepsini kod incelemesinde uygula.

Her ekrandaki ikon sütunu, ürün kalitesinin en yüksek yoğunluklu sinyallerinden biridir. Bir kez doğru yap, tasarımın geri kalanını o taşısın.

İkon sistemlerini daha geniş tasarım sistemi devrinin bir parçası olarak kuran bir ekip istiyorsan, Brainy'yi tut. Grid, yönetişim ve kod tek projede, asla sona eklenen bir yama olarak değil.

İlgili okumalar

• Tasarım Sistemleri Rehberi
• Görsel Hiyerarşi Tasarımı
• Figma'dan Geliştiriciye Tasarım Devri
• Web Erişilebilirlik Kontrol Listesi