35 caractères · libres à copier
Formes géométriques en caractères
Le bloc Formes géométriques à U+25A0–U+25FF est le cheval de bataille des interfaces à base de texte : cercles, carrés, triangles et losanges, presque tous fournis en paire pleine et contour à deux ou trois tailles. Cet appariement permet de montrer deux états, deux joueurs ou deux priorités sans dépendre de la couleur. Copiez n'importe quel caractère ci-dessous ; chacun est répertorié avec son nom Unicode et son point de code.
Cercles
Plein, creux, et les remplissages partiels utilisés pour les évaluations, les phases et les états à bascule.
Carrés
Trois tailles en plein et en creux. La petite paire fait de meilleures puces qu'un simple point.
Triangles
Les quatre directions en deux tailles. Le grand jeu plein sert aussi de commandes de lecture multimédia.
Losanges
Les losanges se lisent comme « spéciaux » sans forcer le trait — le choix habituel pour un séparateur décoratif.
Cliquez sur un caractère pour le copier. Rien n'est téléchargé — ce sont des caractères de texte, pas des images.
Blocs Unicode
- U+25A0–U+25FF Formes géométriques
- U+2756 Dingbats
Comment utiliser Formes géométriques
Associez plein et creux pour montrer un état
Presque toutes les formes ici sont fournies en paire pleine et contour. Utiliser ● contre ○ pour activé/désactivé, ou fait/à faire, communique la différence par la forme — donc ça survit à une impression en niveaux de gris et à la vision daltonienne, contrairement au rouge contre vert.
Utilisez les petites variantes comme puces
Le petit carré ▪ et la puce blanche ◦ s'accordent mieux avec du texte courant qu'un ■ pleine taille. Les listes imbriquées se lisent bien avec • puis ◦ puis ▪.
Utilisez les cercles partiels pour la progression
○ ◔ ◐ ◕ ● donne cinq pas nets d'achèvement en un caractère chacun — un indicateur de progression compact pour une cellule de tableau ou une ligne de journal.
Colorez-les depuis CSS
Ce sont des caractères de texte, donc `color` s'applique directement. Une rangée de ● en cinq couleurs différentes ne nécessite ni images ni SVG, et reste nette à tout niveau de zoom.
À propos de Formes géométriques
Le bloc Formes géométriques est la plage la plus discrètement utile d'Unicode. Son idée organisatrice est la paire : pour presque chaque forme, il existe une version pleine et une version en contour, et souvent deux ou trois tailles de chacune. Cette redondance semble superflue jusqu'au jour où il faut montrer deux états dans un contexte monochrome — un terminal, une impression, un e-mail en texte brut — et découvrir que le contraste de forme continue de fonctionner là où le contraste de couleur échoue.
Cette propriété explique pourquoi ces caractères sont partout dans le design d'interface. Les cercles pleins et creux sont des boutons radio et des puces de carrousel. Les triangles sont des flèches de divulgation et des commandes de lecture multimédia. Les petits carrés sont des puces. Comme ce sont des caractères de texte, chacun hérite de la taille de police et de la couleur environnantes, donc un jeu d'icônes construit avec eux ne nécessite ni feuille de sprites, ni police d'icônes, ni SVG — et il ne charge jamais en retard ni ne rate son chargement.
Les cercles à remplissage partiel de U+25D0 à U+25D3, et les variantes de quart proches, sont un petit vocabulaire de design que peu de gens découvrent. Une séquence de vide à plein donne un indicateur de progression ou d'évaluation qui occupe exactement une cellule de caractère, ce qui explique sa présence dans les tableaux de bord CLI et les tableaux de statut où l'espace horizontal est rare.
Ce site s'appuie fortement sur ce bloc. Puissance 4 et Reversi utilisent ● et ○ pour les deux joueurs ; Simon utilise les grands triangles pour ses quatre pavés ; Lights Out et Memory utilisent des carrés et des losanges. La couleur vient s'ajouter par-dessus en CSS comme renfort, mais les formes portent le sens à elles seules — ce qui rend les plateaux lisibles pour un joueur daltonien.
Jeux dessinés avec ces caractères
Chaque plateau de ce site est construit à partir d'Unicode, pas de sprites. Ceux-ci utilisent les caractères ci-dessus.
Questions fréquentes
Quelle est la différence entre ● et ○ ?
Ce sont les versions pleine et creuse du même cercle. Unicode les nomme « cercle noir » et « cercle blanc », mais ces noms décrivent le remplissage plutôt que la couleur — les deux sont du texte, donc vous pouvez afficher l'un ou l'autre dans la couleur de votre choix. Les associer montre deux états sans dépendre de la couleur.
Quels symboles de forme font de bonnes puces de liste ?
La puce • (U+2022) est la norme, avec la puce blanche ◦ et le petit carré ▪ pour les niveaux imbriqués. Un ■ ou ● pleine taille est généralement trop lourd face à du texte courant. Un emboîtement courant est • puis ◦ puis ▪.
Puis-je utiliser des formes géométriques à la place d'icônes ?
Pour des indicateurs simples, oui, avec de vrais avantages : pas de feuille de sprites, pas de police d'icônes, pas de requête supplémentaire, et ils héritent automatiquement de la couleur et de la taille du texte donc ils ne chargent jamais en retard ni ne se désalignent. Les triangles fonctionnent comme flèches de divulgation et boutons de lecture, les cercles comme états radio et points de statut.
Pourquoi certaines formes paraissent-elles plus grandes que d'autres dans la même police ?
Unicode encode explicitement plusieurs tailles — petite, moyenne et normale — et les polices dessinent aussi le même point de code avec des graisses optiques différentes. Si une rangée de formes paraît inégale, vous mélangez probablement des variantes de taille comme ▪ (U+25AA) avec ■ (U+25A0). Restez sur une seule classe de taille par rangée.
Ces formes fonctionnent-elles comme des emoji ?
Quelques-unes ont des présentations emoji et peuvent arriver précolorées sur certaines plateformes. Ajoutez le sélecteur de variation de texte U+FE0E pour forcer le glyphe monochrome de texte afin qu'il prenne votre couleur CSS. La majeure partie du bloc est uniquement du texte et ne nécessite aucun traitement de ce genre.
Support the arcade
Vous aimez les jeux ?
UnicodeGames est gratuit, sans publicité, et le restera. Si le site a égayé une pause café, vous pouvez rendre la pareille.
Offrez-moi un caféOne-off · No account needed · Handled by Buy Me a Coffee