Icon
Renders a bundled GitLab SVG icon with consistent sizing and semantic color.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import { GlIcon } from "gitlab-ui-react/icon";<GlIcon name="information-o" />Default
Icons are decorative by default and inherit the current text color. Pair an icon with visible text whenever the symbol alone may be ambiguous.
Icon with text
import { GlIcon } from "gitlab-ui-react/icon";
export default function IconExample() {
return (
<span className="flex items-center gap-2">
<GlIcon name="information-o" />
Additional information
</span>
);
}
Sizes
Choose a supported size that matches the surrounding control or content. Avoid resizing icons with arbitrary CSS dimensions.
Icon sizes
import { GlIcon } from "gitlab-ui-react/icon";
export default function IconSizesExample() {
return (
<div className="flex flex-wrap items-end gap-5">
<GlIcon name="tanuki" size={12} />
<GlIcon name="tanuki" size={16} />
<GlIcon name="tanuki" size={24} />
<GlIcon name="tanuki" size={32} />
<GlIcon name="tanuki" size={48} />
</div>
);
}
Semantic variants
Use a semantic color only when the icon must differ from its parent’s text color. Do not rely on color alone to communicate meaning.
Semantic icon variants
import { GlIcon } from "gitlab-ui-react/icon";
export default function IconVariantsExample() {
return (
<div className="flex flex-wrap items-center gap-5">
<GlIcon ariaLabel="Information" name="information-o" variant="info" />
<GlIcon ariaLabel="Warning" name="warning" variant="warning" />
<GlIcon ariaLabel="Error" name="error" variant="danger" />
<GlIcon ariaLabel="Success" name="check-circle" variant="success" />
</div>
);
}
Accessibility
- Decorative icons are automatically hidden from assistive technology.
- For a standalone informational icon, provide
ariaLabelor nativearia-labelwith the meaning conveyed by the icon. - Do not make
GlIconitself clickable. Put interactive icons inside a semantic button or link with an accessible name. - Use the same icon consistently for the same concept or action.
API
GlIcon also forwards supported SVG attributes to the rendered <svg> element.
| Prop | Description | Default |
|---|---|---|
name |
Selects an icon bundled from @gitlab/svgs. |
— |
size |
Sets the icon to 8, 12, 14, 16, 24, 32, 48, or 72 pixels. |
16 |
variant |
Sets current, default, subtle, strong, disabled, link, info, warning, danger, or success color. |
"current" |
ariaLabel |
Gives a non-decorative icon an accessible name. | — |