Entenda como são gerados os ícones em Liquid Glass do iOS 26

Na última semana, enfim, conhecemos as novas versões dos sistemas operacionais da Apple — e, como os rumores apontavam, teve vidro para todo lado. A nova linguagem visual, chamada Liquid Glass, chegará a quase todas as plataformas da empresa em setembro (mais sobre isso ao longo do texto) e já está disponível em beta para que os desenvolvedores comecem a (re)desenhar seus apps. O Liquid Glass é um estilo visual baseado em efeitos translúcidos, reflexos e profundidade, inspirado em vidro líquido — daí o nome. Ele substitui ou complementa o visual flat adotado desde o iOS 7, trazendo um design mais sofisticado e fluido — e um necessário ar de novidade ao iOS.

Novos ícones dos apps nativos em todas as plataformas

Até o iOS 18, cada sistema operacional da Apple vinha mantendo uma linguagem visual diferente, o que obrigava os designers e desenvolvedores a desenharem diversas versões dos ícones de seus apps, caso quisessem suportar mais de uma plataforma. Enquanto o iOS tinha um visual mais flat, com os ícones dos apps recortados em um squircle (o famoso quadrado de bordas arredondadas), o macOS permitia mais sombras e detalhes nos ícones, e até mesmo permitia que a área do squircle fosse quebrada por algum elemento extra (como a lente da câmera do Photo Booth ou o martelo do Xcode). Agora, tudo vive dentro do squircle, tanto no iOS quanto no Mac.

Imagem: Apple / Reprodução

A primeira adaptação começa aqui: assim que você atualizar o seu Mac para o macOS 26, todos os ícones que ainda não foram redesenhados para o novo formato serão automaticamente reduzidos e incorporados a um squircle. Se esse for o caso do seu app, a recomendação da Apple é repensar o ícone de forma que ele possa ser reaproveitado entre as plataformas. No exemplo do Photo Booth, o desenho da lente da câmera ultrapassava a área do quadrado; agora, ele foi completamente redesenhado e está uniforme no macOS e no iPadOS 26.

Imagem: Apple / Reprodução

No iOS, você vai perceber que os ícones deixaram de ser chapados, adotando a profundidade e a transparência do Liquid Glass. Todos os ícones dos apps nativos foram redesenhados e agora estão uniformes em relação às suas contrapartes no iPadOS e no macOS. O watchOS também adotou esse estilo — a única diferença é que, em vez de um squircle, os ícones continuam completamente redondos.

Imagem: Apple / Reprodução

E quanto aos apps de terceiros?

Os sistemas farão adaptações automáticas nos ícones de todos os apps de terceiros assim que você atualizar o seu iPhone, iPad ou Mac. O squircle que mencionei anteriormente sofreu uma pequena alteração no iOS 26 e agora está levemente mais arredondado. Durante a WWDC, foi revelado que o sistema tentará fazer essa compensação automaticamente, expandindo ou reduzindo a máscara do squircle para acomodar o fundo colorido do ícone — sem que o desenvolvedor precise fazer nada.

Imagem: Apple / Reprodução

Se você está utilizando o beta do iOS 26, deve ter notado que alguns apps de terceiros já exibem o efeito Liquid Glass em seus ícones. Por enquanto, isso é mérito da própria Apple: o sistema tenta identificar quais partes do ícone podem ser separadas do fundo e aplica o efeito automaticamente na maior quantidade de camadas possível, de forma similar ao que fizeram com os ícones do modo escuro do iOS 18. Reforçando: não foi o desenvolvedor — trata-se de uma adaptação automática. É claro que o desenvolvedor poderá enviar sua própria versão do ícone adaptada para o iOS 26, mas isso só será permitido a partir de setembro, após o lançamento oficial dos novos sistemas — a Apple não aceita esse tipo de atualização na App Store enquanto o iOS ainda está em fase beta. Lembre-se disso na hora de cobrar alguém por atualizações agora.

Imagem: Apple / Reprodução

Conheça o novo Icon Composer

Apesar de estarem visualmente mais complexos agora, ficou bem fácil criar ícones em Liquid Glass para os novos sistemas, graças a uma ferramenta chamada Icon Composer. Esse utilitário foi utilizado pela própria Apple para criar todos os ícones dos novos apps dela e está disponível gratuitamente para qualquer desenvolvedor. Ele importa desenhos vetoriais e aplica o Liquid Glass nas camadas que você definir, criando um único arquivo pronto para ser usado no Xcode em apps para o iOS, iPadOS, macOS e watchOS.

Imagens: Apple / Reprodução

Se você sentiu falta dos outros dois sistemas da Apple aqui, vou retomar o que mencionei no início do texto: o tvOS e o visionOS continuam funcionando de forma diferente, pois os ícones dessas plataformas possuem um efeito de paralaxe que ainda não é suportado pelo Icon Composer — o que obriga o desenvolvedor a continuar importando os ícones em camadas separadas no Xcode. Também não é possível aplicar o efeito Liquid Glass aos ícones do tvOS e do visionOS.

Veja o Icon Composer em ação

Na Sorcererhat, começamos a explorar o Icon Composer logo na segunda-feira após a WWDC. Redesenhamos o ícone do nosso app SongCapsule para que ele se encaixasse no novo grid universal da Apple, importamos as camadas na ferramenta em formato SVG (vetorial) e aplicamos o Liquid Glass aos elementos de forma separada. O Icon Composer já gerou praticamente todas as versões necessárias do ícone para o iOS, iPadOS, macOS e watchOS, e ainda permitiu fazer adaptações entre os temas. Neste caso, por exemplo, utilizamos um tom de cor levemente mais claro no modo escuro para garantir a legibilidade do ícone mesmo em tamanhos reduzidos.

Imagens: Sorcererhat / Reprodução

Além do SongCapsule, o SongCapsule Quiz passou pelo mesmo processo e também já está pronto para o iOS 26, que será lançado em setembro. A abordagem dele é um pouco diferente, já que o ícone não utiliza camadas, mas sim uma peça única recortada em vidro.

Imagem: Sorcererhat / Reprodução

Onde eu aprendo mais sobre isso?

A Apple disponibilizou uma série de vídeos e recursos para que qualquer pessoa possa aprender a desenhar ícones em Liquid Glass para as novas plataformas — incluindo algumas sessions da WWDC e arquivos que você pode usar como referências:

• Say hello to the new look of app icons (WWDC)

• Create icons with Icon Composer (WWDC)

• Icon Composer (Apple Developer)

• App icons (Apple Developer Documentation)

• Apple Design Resources

O template de ícones para o Figma está disponível no perfil oficial da Apple no próprio Figma.