Uso de SF Symbols
Muestre iconos del sistema escalables con systemName.
Uso de SF Symbols es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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. 🚀
Preguntas frecuentes
¿La lección «Uso de SF Symbols» es gratis?
Sí — el texto completo de «Uso de SF Symbols» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Uso de SF Symbols»?
Muestre iconos del sistema escalables con systemName. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Uso de SF Symbols»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fuentes, peso y color
- Texto multilínea y alineación
- Carga de imágenes desde los recursos
- Uso de SF Symbols