Icons in SDAIA UI come from one source, the DGA icon set (@platformscode/icons), and are drawn with one component, DgaIcon. Using the same set and the same size tokens everywhere keeps screens consistent in both languages and both themes.
@platformscode/icons holds about 4,400 icons. Each one comes in two styles: …Stroke (outline) and …Solid (filled). init installs the package for you.
search01StrokearrowLeft01Strokecalendar03StrokeplaySolidAdd the component with the command-line tool, then import the icon data you need. Import single icons by name so that only the icons you use end up in your bundle.
npx sdaia-ui@latest add dga-icon
import { DgaIcon } from '@/components/ui/DgaIcon'; import { search01Stroke } from '@platformscode/icons'; export function SearchGlyph() { return ( <span className="size-icon-lg text-icon-default"> <DgaIcon data={search01Stroke} /> </span> ); }
DgaIcon fills its parent: it renders at 100% of the width and height of the element around it. Size an icon by putting a size-icon-* class on its parent. The icon takes its color from the parent's text color, so text-* classes and the dark theme work without extra props.
Icon sizes are tokens. They are the same on desktop, tablet and phone. Only spacing and type change between screen sizes.
| Class | Size |
|---|---|
| size-icon-xs | 12px |
| size-icon-sm | 16px |
| size-icon-lg | 20px |
| size-icon-xl | 24px |
| size-icon-2xl | 32px |
| size-icon-3xl | 40px |
There is no md icon size. A size-icon-md class has no effect, so the icon grows to fill its container. Use size-icon-sm (16px) or size-icon-lg (20px). DgaIcon has no size prop, and you should not set width or height on the svg.
sm) next to body text, in inputs, chips and small buttons.lg) in medium and large buttons, menus and alerts.xl) for navigation and stand-alone icon buttons.2xl, 3xl) for empty states, featured icons and illustrations.Icons that show a direction must point the other way in Arabic. Add flipOnRtl to mirror the icon when the page or a parent has dir="rtl".
import { DgaIcon } from '@/components/ui/DgaIcon'; import { arrowRight01Stroke } from '@platformscode/icons'; // Points right in English and left in Arabic. <span className="size-icon-sm"> <DgaIcon data={arrowRight01Stroke} flipOnRtl /> </span>
| Mirror in RTL | Don't mirror |
|---|---|
| Back and forward arrows, chevrons, carets | Play, pause, fast-forward and other media controls |
| Previous and next page | Search, settings, user, home |
| Icons that show text direction (indent, list bullets) | Check marks, plus, minus, close |
| Send and reply, when the design shows a direction | Logos, flags and brand marks |
DgaIconByName flips directional names (arrow, chevron and caret left/right, forward, backward, next, previous) automatically. It loads the whole icon set, so use it only when the icon name comes from data at runtime.
Some glyphs are not generic icons: the SDAIA and DGA logos, the Saudi flag, tooltip beaks, code-snippet and file-upload glyphs, feedback emojis and thumbs, and the play icons used on media cards. They live in sdaia-assets as React components. When you add a component that uses them, the command-line tool copies them to components/ui/sdaia-assets/.
<svg> markup into a component. Use DgaIcon with an icon from the set, or a named component from sdaia-assets.Without a title, DgaIcon is decorative: it renders with aria-hidden="true" and screen readers skip it. That is right when visible text next to the icon already says what it means.
// Decorative: next to visible text, hidden from screen readers (the default). <Button leadingIcon={<DgaIcon data={delete02Stroke} />}>Delete</Button> // Meaningful on its own: give the icon a title. <span className="size-icon-sm"> <DgaIcon data={alertCircleStroke} title="Error" /> </span> // Icon-only button: name the button, not the icon. <Button iconOnly aria-label="Close" leadingIcon={<DgaIcon data={cancel01Stroke} />} />
title only when it carries meaning that is not written anywhere else, such as a status icon in a table cell. The icon then gets role="img" and the title as its name.aria-label on the button. Don't put a title on the icon as well, or the name is read twice.The icon comes from @platformscode/icons or sdaia-assets, not inline SVG.
Stroke by default, Solid only where the design is filled.
Sized with a size-icon-* class on the parent (no md).
Directional icons use flipOnRtl and are checked in Arabic.
Decorative icons are hidden; meaningful icons and icon-only buttons have a name.
Checked in light and dark themes.