# Uma revisão cuidadosa dos ícones do Mole
> A troca dos ícones do sistema por um conjunto adaptado do Phosphor: a biblioteca, o julgamento dentro do produto, as ideias pequenas e o alinhamento.
Published: 2026-09-30 | Updated: 2026-10-18
Quero compartilhar algumas ideias sobre atualizar os ícones de um produto: no que prestar atenção e onde ainda há espaço para melhorar.
Hoje de manhã dei uma atualização cuidadosa aos ícones do Mole. Até agora ele usava os ícones do sistema, que acho perfeitamente bons para um produto simples, mas olhando de perto falta alguma coisa: um pouco de caráter.
Em cada par, o ícone antigo do sistema está à esquerda e o ícone adaptado da biblioteca Phosphor está à direita.
## Escolher uma biblioteca de ícones
Depois de olhar em volta, as duas bibliotecas que melhor servem a ícones de app são Remix Icon e Phosphor Icons. Usei muito o Remix ao construir para a web, e ele é simples e confortável, mas num app não me parecia certo, então passei para o Phosphor, que tem caráter de verdade e fica ótimo. Cerca de 70% dos ícones podiam ser usados como estavam, e os outros 30% eu desenhei pedindo ao Opus 5.5 que escrevesse o SVG, para o conjunto inteiro continuar consistente.
## Julgar sempre dentro do produto
A comparação acima provavelmente não mostra muita diferença à primeira vista. Na maior parte das vezes é preciso colocar os ícones no produto de verdade, e eu também considero como um grupo inteiro de ícones de um módulo funciona junto. Às vezes cada ícone fica bom sozinho e o grupo ainda parece errado, do jeito que um rosto pode ter traços bons que não se sentam bem juntos. Então o conselho é simples: quando você troca ícones, olhe para eles no produto real, todos juntos, e é aí que eles ficam certos.
## Ideias pequenas dão vida ao produto
Em segundo lugar, volto sempre à ideia de que os produtos que fazemos devem ter algum espírito, uma sensação de estar vivos, em vez da saída fria de código feito por IA sem nada do seu próprio pensamento. Detalhes pequenos, como ícones, são um bom lugar para acrescentar essa vida. Para Manter tela ligada usei uma xícara de café, a metáfora do Caffeine: o Mac tomou um café e não consegue dormir. Sobre costuma ganhar um i circulado, mas pensei nisso como um olá, então é uma mão acenando. Diagnóstico normalmente ganharia algum símbolo de solução de problemas, e aqui é um estetoscópio, mais parecido com um médico examinando o seu problema. Há espaço para muitas ideias pequenas assim num produto, e juntas elas deixam tudo bem mais divertido.
## Alinhamento, tamanho e centralização
Por fim, um bom design quase sempre volta a alinhamento, ordem e um ritmo bem julgado. Fazer ícones, texto e as seções acima e abaixo parecerem alinhados, do mesmo tamanho e centrados na vertical, como o olho de fato vê, significa conferir e ajustar um por um. Isso inclui alinhar tipo com ícones, e lidar com caracteres chineses e latinos que não compartilham o mesmo centro vertical de saída. Dá para passar muito tempo refinando isso, e eu acho bem divertido.
Alguns exemplos desta rodada. A bateria começou como um contorno vazio que parecia igual em qualquer carga, então uma bateria cheia lia como vazia; agora ela enche por quartos. Os ícones dos menus primeiro seguiam o tamanho do ícone do sistema e pareciam grandes e pesados demais ali; 14,3 pt desceu para 12,5 pt, ainda um pouco grande, e parou em 11 pt. Alguns ícones eram dimensionados pela largura e outros pelo lado mais longo, então a vassoura alta e a seta de saída pareciam grandes, enquanto o inseto largo e o gráfico de linhas pareciam pequenos. Agora são dimensionados pela média da largura e da altura, com um limite no lado mais longo, e ícones novos seguem a mesma regra automaticamente. E na imagem de comparação que fiz para um tweet, a palavra Mole no título está numa serifa chinesa cujas letras latinas ficavam 4 pt acima do chinês ao lado, então teve de ser empurrada para baixo sozinha antes de as duas alinharem.
Os mesmos 14 ícones: à esquerda dimensionados pela largura ou pelo lado mais longo, à direita num único tamanho visual. No celular, o conjunto da esquerda fica em cima.
## Ouvir os usuários e fazer mais uma rodada
Depois que o texto saiu, os usuários começaram a responder. Alguns ícones de que eu gostava pareciam errados para eles ou pouco familiares: Buscar atualizações usava um ícone de download e lia como download, o cubo pequeno da GPU não parecia uma placa de vídeo, o ícone de arquivamento não fazia sentido, dois palitos empilhados não diziam bem memória, e algumas pessoas acharam a esponja de Limpar tela e a mão acenando de Sobre pouco atraentes.
É exatamente quando uma conversa curta com usuários ganha de ter certeza sozinho, então cada um desses passou por mais uma rodada seguindo as sugestões deles. Buscar atualizações virou uma seta no sentido horário, a GPU uma placa de vídeo com duas ventoinhas, o arquivamento uma caixa de armazenamento, e o áudio foi de notas musicais para fones de ouvido. Limpar tela voltou ao pincel do primeiro ícone do sistema, Sobre voltou ao i circulado simples, redesenhado para acompanhar o peso do resto da coluna, e a memória voltou a um chip. Vários mudaram três vezes no caminho.
O mesmo trecho da interface lado a lado: em cada linha, os ícones do sistema, a primeira versão e os ícones de agora.
## Gastar o tempo que a IA economiza no acabamento
Esse tipo de trabalho pode parecer inútil, mas é algo de que eu gosto de verdade. A IA dá um grande impulso a código bom e a um gosto aceitável, e pode parecer que às pessoas não resta nada além de conversar. Acho o contrário: a pessoa importa mais aqui. O tempo que a IA economiza é exatamente o tempo para gastar polindo o produto, para que o 1% dos usuários que percebe tenha, de vez em quando, aquela sensação de entender na hora, de "uau", de um pequeno truque de mágica. É isso que torna o trabalho valioso e divertido, e talvez seja o que eu acho mais interessante em construir produtos independentes.
---
Canonical HTML page: https://mole.fit/pt-br/blog/mole-icon-refresh
Blog index for agents: https://mole.fit/pt-br/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
