35 caracteres · grátis para copiar
Formas geométricas como caracteres
O bloco Formas Geométricas, de U+25A0 a U+25FF, é o cavalo de batalha das interfaces baseadas em texto: círculos, quadrados, triângulos e losangos, quase todos fornecidos como um par preenchido e contornado em dois ou três tamanhos. Esse pareamento é o que permite mostrar dois estados, dois jogadores ou duas prioridades sem depender de cor. Copie qualquer caractere abaixo; cada um vem com seu nome Unicode e ponto de código.
Círculos
Preenchidos, vazados, e os preenchimentos parciais usados em avaliações, fases e estados de alternância.
Quadrados
Três tamanhos, preenchidos e vazados. O par pequeno funciona melhor como marcador de lista do que um simples ponto.
Triângulos
As quatro direções em dois tamanhos. O conjunto grande e preenchido também funciona como controles de reprodução de mídia.
Losangos
Losangos transmitem a sensação de "especial" sem exagerar — a escolha mais comum para um separador decorativo.
Clique em qualquer caractere para copiá-lo. Nada é baixado — são caracteres de texto, não imagens.
Blocos Unicode
- U+25A0–U+25FF Formas Geométricas
- U+2756 Dingbats
Como usar Formas Geométricas
Combine preenchido com vazado para mostrar estado
Quase toda forma aqui vem como um par preenchido e contornado. Usar ● contra ○ para ligado e desligado, ou concluído e pendente, comunica a diferença pela forma — então isso sobrevive a uma impressão em escala de cinza e à visão de pessoas daltônicas, de um jeito que vermelho contra verde não consegue.
Use as variantes pequenas como marcadores
O quadrado pequeno ▪ e o marcador branco ◦ combinam melhor com o texto do corpo do que um ■ de tamanho normal. Listas aninhadas ficam boas como • depois ◦ depois ▪.
Use os círculos parciais para indicar progresso
○ ◔ ◐ ◕ ● dá cinco passos limpos de conclusão, um caractere para cada — um indicador de progresso compacto para uma célula de tabela ou uma linha de log.
Colora-os pelo CSS
São texto, então o `color` se aplica diretamente. Uma fileira de ● em cinco cores diferentes não precisa de imagens nem de SVG, e continua nítida em qualquer zoom.
Sobre Formas Geométricas
O bloco Formas Geométricas é a faixa discretamente mais útil do Unicode. Sua ideia organizadora é o par: para quase toda forma existe uma versão preenchida e uma versão contornada, e muitas vezes dois ou três tamanhos de cada. Essa redundância parece desperdício até você precisar mostrar dois estados em um contexto monocromático — um terminal, uma impressão, um e-mail de texto puro — e descobrir que o contraste de forma continua funcionando onde o contraste de cor não funciona.
Essa propriedade explica por que esses caracteres estão em toda parte no design de interfaces. Os círculos preenchidos e vazados são botões de opção e pontos de carrossel. Os triângulos são setas de expansão e controles de reprodução de mídia. Os quadrados pequenos são marcadores de lista. Como são texto, todos eles herdam o tamanho de fonte e a cor ao redor, então um conjunto de ícones construído com eles não precisa de sprite sheet, fonte de ícones nem SVG — e nunca carrega atrasado nem deixa de carregar.
Os círculos com preenchimento parcial em U+25D0 a U+25D3, e as variantes com preenchimento em quartos por perto, são um pequeno pedaço de vocabulário de design que a maioria das pessoas nunca encontra. Uma sequência do vazio ao cheio oferece um indicador de progresso ou avaliação que ocupa exatamente uma célula de caractere, e é por isso que aparece em painéis de linha de comando e tabelas de status onde o espaço horizontal é escasso.
Este site se apoia bastante nesse bloco. Lig 4 e Reversi usam ● e ○ para os dois jogadores; Simon usa os triângulos grandes nas suas quatro almofadas; Apague as Luzes e o Jogo da Memória usam quadrados e losangos. A cor é aplicada por cima com CSS como reforço, mas as formas carregam o significado por conta própria — o que é o que torna os tabuleiros legíveis para um jogador daltônico.
Jogos desenhados com esses caracteres
Todo tabuleiro deste site é construído com Unicode, não com sprites. Estes usam os caracteres acima.
Perguntas frequentes
Qual é a diferença entre ● e ○?
São as versões preenchida e vazada do mesmo círculo. O Unicode os nomeia "black circle" e "white circle", mas esses nomes descrevem o preenchimento, não a cor — os dois são texto, então você pode desenhar qualquer um deles em qualquer cor que quiser. Combiná-los mostra dois estados sem depender nem um pouco de cor.
Quais símbolos de forma funcionam bem como marcadores de lista?
O marcador • (U+2022) é o padrão, com o marcador branco ◦ e o quadrado pequeno ▪ para níveis aninhados. O ■ e o ● de tamanho normal costumam ser pesados demais contra o texto do corpo. Um aninhamento comum é • depois ◦ depois ▪.
Posso usar formas geométricas em vez de ícones?
Para indicadores simples, sim, e existem vantagens reais: sem sprite sheet, sem fonte de ícones, sem requisição extra, e eles herdam a cor e o tamanho do texto automaticamente, então nunca carregam atrasados nem desalinham. Triângulos funcionam como setas de expansão e botões de play, círculos como estados de opção e pontos de status.
Por que algumas formas parecem maiores que outras na mesma fonte?
O Unicode codifica vários tamanhos explicitamente — pequeno, médio e normal — e as fontes também desenham o mesmo ponto de código em pesos ópticos diferentes. Se uma fileira de formas parecer desigual, você provavelmente está misturando variantes de tamanho, como o ▪ U+25AA com o ■ U+25A0. Mantenha uma única classe de tamanho dentro de cada fileira.
Essas formas funcionam como emoji?
Algumas têm apresentações em emoji e podem chegar já coloridas em algumas plataformas. Adicione o seletor de variação de texto U+FE0E para forçar o glifo de texto monocromático, para que assuma a cor do seu CSS. A maior parte do bloco é só texto e não precisa desse tratamento.
Support the arcade
Curtindo os jogos?
O UnicodeGames é gratuito, não tem anúncios e nunca vai ter. Se ele alegrou uma pausa para o café, você pode retribuir o favor.
Me pague um caféOne-off · No account needed · Handled by Buy Me a Coffee