Colored Icons

Language and brand icons preserve their internal palette and are separate from the monochrome .sui-icon mask contract.

Contract

Family	Class	Color behavior	Preferred use
Monochrome icons	`.sui-icon`	Uses CSS mask and inherits `currentColor`.	Interface icons, actions, status glyphs, and buttons.
Colored icons	`.sui-colored-icon`	Preserves immutable SVG palette.	Language flags, brand marks, logos, and future icons where color is part of meaning.

Imports

Prefer raw SVG imports with img. The helper class provides sizing and alignment only.

import ptBrFlag from "@seventh-ui/css/icons-colored/svg/languages/languages-pt-br-square.svg";

<img class="sui-colored-icon" src={ptBrFlag} alt="Portuguese (Brazil)">

Static HTML and legacy screens may use optional background-image helpers.

import "@seventh-ui/css/icons-colored/base.css";
import "@seventh-ui/css/icons-colored/languages.css";

<span class="sui-colored-icon sui-colored-icon--languages-pt-br-square" role="img" aria-label="Portuguese (Brazil)"></span>