SwiftUI Academy · Aula

Usando SF Symbols

Renderize ícones de sistema escaláveis com systemName.

Usando SF Symbols é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Apple Icons for Free

SF Symbols is Apple library of thousands of crisp, scalable icons that match the system font. They are free and built right in. ⭐

Showing a Symbol

Display one with Image and the systemName parameter. The name comes from the SF Symbols app, like star or heart.

Image(systemName: "star")

Filled Variants

Many symbols offer a filled version. Just add .fill to the name to get a solid icon instead of an outline.

Image(systemName: "star.fill")

Symbols Are Text-Like

Because SF Symbols align to the font, you size them with font and the same text styles you already know.

Image(systemName: "bell")
    .font(.title)

Coloring Symbols

Tint a symbol with foregroundStyle, exactly like text. This makes stars yellow or hearts red in one line.

Image(systemName: "heart.fill")
    .foregroundStyle(.red)

Scaling with imageScale

The imageScale modifier nudges a symbol to small, medium, or large relative to its surrounding text.

Image(systemName: "gear")
    .imageScale(.large)

Symbols Inside Text

You can drop a symbol inside a Text view, so an icon and a word flow together as one styled label.

Text("\(Image(systemName: "bolt")) Fast")

Labels Pair Icon and Title

The Label view bundles a symbol with text, giving you a tidy icon-plus-title combo used all over iOS.

Label("Favorites", systemImage: "star")

Multicolor and Hierarchical

Use symbolRenderingMode for richer looks. Hierarchical adds depth, while multicolor uses the symbol built-in colors.

Image(systemName: "cloud.sun.fill")
    .symbolRenderingMode(.multicolor)

Symbols in Buttons

Symbols shine inside buttons and toolbars, giving clear, compact actions like share, add, or delete.

Button(action: share) {
    Image(systemName: "square.and.arrow.up")
}

Find the Right Name

Download the free SF Symbols app from Apple to browse and copy exact names. Guessing names often fails silently.

Quick Check

How do you display an SF Symbol in SwiftUI?

Lesson Recap

You added SF Symbols with systemName, styled them like text, and paired them with titles using Label. Crisp icons everywhere. 🚀

Perguntas Frequentes

A aula “Usando SF Symbols” é grátis?

Sim — o texto completo de “Usando SF Symbols” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.

O que vou aprender em “Usando SF Symbols”?

Renderize ícones de sistema escaláveis com systemName. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar SwiftUI Academy?

Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Usando SF Symbols”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de SwiftUI Academy?

Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para SwiftUI Academy