Published on: Sunday, April 19, 2026

SF Symbols

Authors

Name
ShoxruxC
@iOSdasturchi

Ilovangizga ikonka kerak bo'lsa — o'z rasmingizni import qilish shart emas. SF Symbols Apple ning 6000 dan ortiq ikonka kutubxonasi bo'lib, SwiftUI bilan to'liq integratsiyalashgan. Bu ikonkalar Dynamic Type bilan avtomatik o'lchamlanadi, rang va og'irlikka moslashadi va har bir Apple qurilmasida bir xil ko'rinadi.

Swift•

SFSymbolsView.swift

import SwiftUI

struct SFSymbolsView: View {
var body: some View {
VStack(spacing: 24) {
// Oddiy yulduz — monochrome (bir rang)
Image(systemName: "star.fill")
.font(.largeTitle)

          // Ob-havo ikonkasi — multicolor (ko'p rang)
          Image(systemName: "cloud.sun.rain.fill")
              .font(.largeTitle)
              .symbolRenderingMode(.multicolor)

          // Hierarchical — bir aksent rangdan chuqurlik
          Image(systemName: "cloud.sun.fill")
              .font(.largeTitle)
              .symbolRenderingMode(.hierarchical)
              .foregroundStyle(.orange)

          // Ikonkani rangga bo'yash
          Image(systemName: "heart.fill")
              .font(.largeTitle)
              .foregroundStyle(.red)

          // Yulduz chaqmoq — qora, katta
          Image(systemName: "bolt.fill")
              .font(.largeTitle)

          // Ovoz balandligi — yashil, animatsiyali variantlar mavjud
          Image(systemName: "speaker.wave.3.fill")
              .font(.largeTitle)
              .foregroundStyle(.green)
      }
  }

}

Qator	Vazifasi
`Image(systemName: "star.fill")`	SF Symbols dan to'ldirilgan yulduz ikonkasini yuklaydi. `"star"` — kontur, `"star.fill"` — to'ldirilgan.
`.font(.largeTitle)`	SF Symbol o'lchamini boshqarish uchun `.font()` ishlatiladi. Matn o'lchami ikonka o'lchamini belgilaydi.
`.symbolRenderingMode(.multicolor)`	Ikonkaning Apple tomonidan belgilangan ko'p rangli ko'rinishini ko'rsatadi.
`.symbolRenderingMode(.hierarchical)`	Bir aksent rang asosida chuqurlik yaratadi — birinchi qatlam to'liq rang, qolganlar shaffof.
`.foregroundStyle(.red)`	Monochrome SF Symbol ni berilgan rangga bo'yaydi.

Asosiy rendering rejimlari

// Monochrome — standart, bir rang
Image(systemName: "star.fill")
    .foregroundStyle(.yellow)

// Multicolor — Apple belgilagan ko'p rang
Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.multicolor)

// Hierarchical — bir rang, ko'p chuqurlik
Image(systemName: "person.crop.circle.badge.checkmark")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

// Palette — har bir qatlamga alohida rang
Image(systemName: "folder.badge.plus")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.white, .blue)

Label va .symbolVariant

// Label — matn + ikonka birlashma (toolbar, list uchun ideal)
Label("Qo'shish", systemImage: "plus")
Label("O'chirish", systemImage: "trash")
Label("Ulashish", systemImage: "square.and.arrow.up")

// symbolVariant — to'ldirish, doira yoki kvadrat
Image(systemName: "star")
    .symbolVariant(.fill)       // to'ldirilgan

Image(systemName: "bell")
    .symbolVariant(.slash)      // chizilgan

Image(systemName: "heart")
    .symbolVariant(.circle)     // doira ichida

Tezkor ma'lumotnoma

Sintaksis	Vazifasi
`Image(systemName: "nomi")`	SF Symbol ikonkasi
`.font(.title)`	Ikonka o'lchamini boshqaradi
`.foregroundStyle(.rang)`	Ikonka rangini o'rnatadi
`.symbolRenderingMode(.multicolor)`	Ko'p rangli rejim
`.symbolRenderingMode(.hierarchical)`	Bir rangdan chuqurlikli rejim
`.symbolVariant(.fill)`	To'ldirilgan variant
`Label("Matn", systemImage: "nomi")`	Matn + ikonka birlashma

🎯 Topshiriq: SF Symbols galereyasi

10 ta turli SF Symbol ikonkasini ko'rsatadigan VStack yarating. Har birida boshqa rendering rejimi, rang va o'lcham ishlating. Label komponentini kamida uchta joyda ishlating. SF Symbols ilovasini yuklab oling va "figure." qidiruvini sinab ko'ring.