Do domínio
From the domain
Sem build, sem npm. CORS aberto.
No build, no npm. Open CORS.
DestaqueAccent
TraçoInk
Tamanho exatoExact size
px
ExibirShow
npm
Para produtos com bundler.
For products with a bundler.
npm install @uxag/iconsSVG
Para Figma e apresentações — nas cores que você escolher.
For Figma and decks — in the colours you pick.
| /dist/uxag-icons.js | Módulo ESM + <uxag-icon> |
ESM module + <uxag-icon> |
| /dist/sprite.svg | Um <symbol> por ícone |
One <symbol> per icon |
| /dist/manifest.json | Nomes, categorias e tags | Names, categories and tags |
| /icons/<nome>.svg | Um ícone | A single icon |
| /tokens/palette.css | Variáveis CSS da paleta | Palette custom properties |
Se o ícone precisa mudar de cor conforme o contexto, ele tem que estar inline —
<img> não recebe CSS da página.
If an icon must change colour with its context, it has to be inline —
an <img> can't be reached by page CSS.
Acessibilidade
Accessibility
Ícone decorativo, ao lado de um texto que já diz o mesmo: aria-hidden="true".
Ícone que carrega o significado sozinho: aria-label (inline) ou
alt (em <img>). O <uxag-icon> resolve isso
sozinho — sem label, é decorativo.
Decorative, next to text that already says the same thing:
aria-hidden="true". Carrying the meaning alone: aria-label
(inline) or alt (on an <img>). The
<uxag-icon> element handles it — no label means decorative.
Todo ícone usa duas funções de cor. É essa disciplina que faz 43 ícones parecerem um só conjunto.
Every icon uses two colour roles. That discipline is what makes 43 icons look like one set.
currentColor
O traço. Herda color, então segue o texto e se inverte no
tema escuro.
The stroke. Inherits color, so it follows the text and
inverts in dark mode.
--uxag-accent
O plano de destaque — o assunto do ícone. Padrão: ciano da marca.
The accent plane — the subject of the icon. Brand cyan by default.
--uxag-guide-opacity
As guias pontilhadas. Traço com opacidade reduzida, nunca uma terceira cor.
The dotted guides. Ink at reduced opacity, never a third colour.
:root { --uxag-accent: #00C2F0; } /* destaque global */
.alert--danger { --uxag-accent: #E5484D; } /* por estado */
.uxag-icon--mono { --uxag-accent: currentColor; --uxag-guide-opacity: .35; }Paleta
Palette
Clique para copiar o hexadecimal.
Click to copy the hex.
A especificação que todo ícone novo segue. npm run validate confere cada item.
The spec every new icon follows. npm run validate checks each line of it.