DEV Community

Cover image for SwiftUI - Localizando ícones com SF Symbols
Renato Cruz
Renato Cruz

Posted on

SwiftUI - Localizando ícones com SF Symbols

#swift #programming #ios

Se você desenvolve para o ecossistema Apple, dominar o SF Symbols é praticamente obrigatório.

Essa ferramenta oficial facilita o uso de ícones consistentes, adaptáveis e altamente integrados com o sistema, especialmente em projetos com SwiftUI.

Neste guia completo, você vai aprender o que é o SF Symbols, como instalar, seus principais recursos e exemplos práticos de uso.

O que é o SF Symbols?

O SF Symbols é um aplicativo criado pela Apple que disponibiliza uma vasta biblioteca de ícones vetoriais projetados para funcionar perfeitamente com:

  • iOS.
  • macOS.
  • watchOS.
  • tvOS.

Esses símbolos são baseados na fonte San Francisco, garantindo consistência visual com o sistema.

Por que usar SF Symbols?

  • Interface mais profissional e padronizada.
  • Ícones adaptáveis (peso, escala e cor).
  • Integração nativa com SwiftUI e UIKit.
  • Suporte a acessibilidade.
  • Atualizações frequentes com novos símbolos.

Como instalar o SF Symbols no macOS

  1. Acesse o site oficial da Apple (developer.apple.com/sf-symbols).
  2. Faça o download da versão mais recente.
  3. Abra o arquivo .dmg.
  4. Arraste o app para a pasta Applications.
  5. Abra o aplicativo normalmente.

Pode ser necessário ter uma conta Apple Developer (gratuita) para baixar.

Principais recursos do SF Symbols

Navegação e busca inteligente

O app permite buscar símbolos por:

  • Nome.
  • Categoria.
  • Palavra-chave.

Exemplo: pesquisar heart mostra várias variações do ícone de coração.

Variações e personalização

Cada símbolo pode ter múltiplas variações:

  • Weight (peso): ultralight, regular, bold.
  • Scale (escala): small, medium, large.
  • Rendering modes:
    • Monochrome.
    • Hierarchical.
    • Palette.
    • Multicolor.

Integração com código

Você pode copiar facilmente o nome do símbolo e usar direto no código.

Exemplo:

Image(systemName: "heart.fill")
Enter fullscreen mode Exit fullscreen mode

Animações (versões mais recentes)

O SF Symbols também suporta animações nativas, como:

  • Bounce.
  • Pulse.
  • Variable color.

Isso melhora muito a experiência do usuário sem esforço extra.

Símbolos customizados

Você pode importar seus próprios ícones e adaptá-los ao estilo do sistema, ideal para apps com identidade própria.

Como usar SF Symbols no SwiftUI

Exemplo básico:

Image(systemName: "star.fill")
Enter fullscreen mode Exit fullscreen mode

Alterando tamanho e estilo:

Image(systemName: "star.fill")
    .font(.system(size: 32))
    .foregroundColor(.yellow)
Enter fullscreen mode Exit fullscreen mode

Usando diferentes pesos:

Image(systemName: "heart")
    .font(.system(size: 30, weight: .bold))
Enter fullscreen mode Exit fullscreen mode

Com renderização avançada:

Image(systemName: "folder.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)
Enter fullscreen mode Exit fullscreen mode

Exemplo completo com SwiftUI:

VStack(spacing: 20) {
    Image(systemName: "heart.fill")
        .font(.largeTitle)
        .foregroundColor(.red)

    Image(systemName: "star.circle.fill")
        .font(.system(size: 40))
        .symbolRenderingMode(.palette)
        .foregroundStyle(.yellow, .orange)
}
Enter fullscreen mode Exit fullscreen mode

Boas práticas ao usar SF Symbols

Use nomes consistentes

Prefira símbolos padrão do sistema antes de criar ícones próprios.

Combine com tipografia

Os símbolos são projetados para acompanhar texto — aproveite isso.

Evite exageros de cores

Use cores com propósito, principalmente em interfaces profissionais.

Teste acessibilidade

Verifique contraste e legibilidade em diferentes modos (Dark Mode, etc).

SF Symbols vs Ícones personalizados

Critério SF Symbols Ícones customizados
Integração Nativa Manual
Performance Alta Variável
Consistência Excelente Depende do design
Flexibilidade Média Alta

Quando usar SF Symbols?

Use SF Symbols quando:

  • Precisa de rapidez no desenvolvimento.
  • Quer consistência com o sistema.
  • Está criando interfaces padrão (menus, botões, etc).

Evite quando:

  • Seu app exige identidade visual única.
  • Precisa de ícones muito específicos.

Conclusão

O SF Symbols é uma ferramenta essencial para qualquer desenvolvedor Apple.

Ele não apenas acelera o desenvolvimento, mas também garante uma interface mais consistente, moderna e alinhada com as diretrizes da plataforma.

Se você trabalha com SwiftUI, aprender a usar bem os símbolos pode elevar significativamente a qualidade do seu app.

Top comments (0)