PlIcon

A glyph at a known size, in a known colour. Plass draws no icon set of its own. This gives whichever set an app chose the same two axes everything else here has.

React

import { PlIcon } from 'plass-ui';

<PlIcon icon={<BoltIcon />} />;
<PlIcon icon={<BoltIcon />} size="lg" color="warning" label="Fast" />;

import 'package:plass_ui/plass_ui.dart';

const PlIcon(icon: BoltGlyph());
const PlIcon(icon: BoltGlyph(), size: PlassSize.lg, color: PlassColor.warning, label: 'Fast');

Props

Prop	Type	Default	Description
icon *	ReactNode	—	The glyph — an svg, an img, a component from an icon set, or a character. A prop rather than children, because the icon is content this component *sizes* rather than content it merely wraps
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The box the glyph is drawn in: 14, 16, 20, 24 and 28px. Its own ladder, not the control heights
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'inherit'	'inherit'	Semantic colour role, or inherit to take the colour of whatever it sits in. The one component where this is not primary — an icon is content, and its colour has usually been decided already
label	string	—	What the icon says. Without it the icon is hidden from the accessibility tree entirely — most icons sit beside a word that already says the same thing

Prop	Type	Default	Description
icon *	Widget	—	The glyph — an svg, an img, a component from an icon set, or a character. A prop rather than children, because the icon is content this component *sizes* rather than content it merely wraps
sizeshared	PlassSize	PlassSize.md	The box the glyph is drawn in: 14, 16, 20, 24 and 28px. Its own ladder, not the control heights
colorshared	PlassColor?	null	Semantic colour role. null takes the colour of whatever it sits in. The one component where this is not primary — an icon is content, and its colour has usually been decided already
label	String?	—	What the icon says. Without it the icon is hidden from the accessibility tree entirely — most icons sit beside a word that already says the same thing

Every native <span> attribute passes straight through. color is excluded from the pass-through because it is a Plass prop here.

color is a PlassColor? rather than a PlassColor, and null is the default, which is how "inherit" is spelled in a language with no such keyword.

There is no variant and no elevation. An icon is not a surface. It is ink, and the only thing the design language has to say about ink is which family it is drawn in.

What the shared axes (size color) mean across the library is in prop conventions.

Examples

icon

The glyph is a prop rather than children. An icon set hands back an element you did not draw, and the two things you always want to change about it, how big it is and what colour it is, are the two you cannot reach once it is a child of something.

The box is inline-flex with the glyph told to fill it, and font-size is set to the same length. So an <svg> with its own width, an <svg> sized in em, a bare character and an <img> all come out the same size.

The glyph is told how big it is three ways at once, through IconTheme, through DefaultTextStyle and by the box it is laid into being exactly that size. So an Icon, an ImageIcon, a CustomPaint that reads IconTheme.of(context) and a bare character all come out the same size.

React

import { PlIcon } from 'plass-ui';

/** Authored in px by whichever set it came from. */
function HeartIcon() {
  return (
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor">
      <path d="M12 20.5 4.2 13a4.7 4.7 0 0 1 6.6-6.6l1.2 1.2 1.2-1.2A4.7 4.7 0 1 1 19.8 13Z" />
    </svg>
  );
}

/** Authored in em, the way a font-backed set does it. */
function EmHeartIcon() {
  return (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor">
      <path d="M12 20.5 4.2 13a4.7 4.7 0 0 1 6.6-6.6l1.2 1.2 1.2-1.2A4.7 4.7 0 1 1 19.8 13Z" />
    </svg>
  );
}

export default function IconAnything() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-(--plass-fg)">
      <PlIcon icon={<HeartIcon />} size="lg" />
      <PlIcon icon={<EmHeartIcon />} size="lg" />
      <PlIcon icon="★" size="lg" />
      <PlIcon icon={<img src="/128x128.png" alt="" />} size="lg" />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';
import 'package:plass_ui_example/demos/glyphs.dart';

class IconAnything extends StatelessWidget {
  const IconAnything({super.key});

  @override
  Widget build(BuildContext context) {
    return IconTheme.merge(
      data: IconThemeData(color: PlassTheme.of(context).fg),
      child: const Wrap(
        spacing: 24,
        runSpacing: 24,
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          // A drawing that reads its size off the IconTheme, the way most sets do.
          PlIcon(icon: HeartGlyph(), size: PlassSize.lg),
          // A glyph from a font — an `Icon`, which does the same.
          PlIcon(
            icon: Icon(IconData(0x2665, fontFamily: 'Inter')),
            size: PlassSize.lg,
          ),
          // A bare character, sized by the box's own font size.
          PlIcon(icon: Text('★'), size: PlassSize.lg),
        ],
      ),
    );
  }
}

size

Its own ladder (14, 16, 20, 24 and 28px) rather than a step off the control heights, because an icon is not a control. It is content, measured against the text it sits beside rather than against the row it sits in.

React

import { PlIcon } from 'plass-ui';

function BellIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M18 8a6 6 0 1 0-12 0c0 6-2 7-2 7h16s-2-1-2-7" strokeLinejoin="round" />
      <path d="M13.7 20a2 2 0 0 1-3.4 0" strokeLinecap="round" />
    </svg>
  );
}

export default function IconSizes() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <div key={size} className="flex flex-col items-center gap-2">
          <PlIcon icon={<BellIcon />} size={size} />
          <span className="text-xs text-(--plass-muted-fg)">{size}</span>
        </div>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';
import 'package:plass_ui_example/demos/glyphs.dart';

class IconSizes extends StatelessWidget {
  const IconSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 24,
      runSpacing: 24,
      crossAxisAlignment: WrapCrossAlignment.end,
      children: <Widget>[
        for (final size in PlassSize.values)
          Column(
            mainAxisSize: MainAxisSize.min,
            spacing: 8,
            children: <Widget>[
              PlIcon(icon: const BellGlyph(), size: size),
              PlTypography(size.name, level: PlTypographyLevel.caption),
            ],
          ),
      ],
    );
  }
}

color

inherit is the default, and this is the one component in the library where color is not primary. An icon usually sits inside something that has already decided what colour its content is (a button's label, a muted caption, an alert's own family), and one that arrived pre-dyed would have to be turned off again at every one of them.

React

import { PlIcon } from 'plass-ui';

function BoltIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M13 2 4 14h7l-1 8 9-12h-7Z" strokeLinejoin="round" />
    </svg>
  );
}

export default function IconColors() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-(--plass-muted-fg)">
      <PlIcon icon={<BoltIcon />} />
      {(['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const).map((color) => (
        <PlIcon key={color} icon={<BoltIcon />} color={color} />
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';
import 'package:plass_ui_example/demos/glyphs.dart';

class IconColors extends StatelessWidget {
  const IconColors({super.key});

  @override
  Widget build(BuildContext context) {
    return IconTheme.merge(
      // The colour an inheriting icon inherits — here the muted foreground, the
      // way it would inside a caption.
      data: IconThemeData(color: PlassTheme.of(context).mutedFg),
      child: const Wrap(
        spacing: 24,
        runSpacing: 24,
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          PlIcon(icon: BoltGlyph()),
          PlIcon(icon: BoltGlyph(), color: PlassColor.primary),
          PlIcon(icon: BoltGlyph(), color: PlassColor.secondary),
          PlIcon(icon: BoltGlyph(), color: PlassColor.success),
          PlIcon(icon: BoltGlyph(), color: PlassColor.warning),
          PlIcon(icon: BoltGlyph(), color: PlassColor.danger),
          PlIcon(icon: BoltGlyph(), color: PlassColor.info),
        ],
      ),
    );
  }
}

Inside another component

A glyph passed to a PlButton or a PlAlert is already sized in em by that component, so it tracks the label. Wrapping it in a PlIcon is for when it should be a fixed size instead, or when it is standing on its own.

React

import { PlAlert, PlButton, PlIcon } from 'plass-ui';

function BoltIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M13 2 4 14h7l-1 8 9-12h-7Z" strokeLinejoin="round" />
    </svg>
  );
}

export default function IconInside() {
  return (
    <div className="flex w-full max-w-md flex-col items-start gap-4">
      <PlButton startIcon={<PlIcon icon={<BoltIcon />} size="sm" />}>Deploy now</PlButton>

      <PlAlert color="warning" icon={<PlIcon icon={<BoltIcon />} size="sm" />}>
        The build is running on the fast queue.
      </PlAlert>

      <p className="text-sm text-(--plass-muted-fg)">
        <PlIcon icon={<BoltIcon />} size="xs" /> Sits in a sentence at the sentence’s own colour.
      </p>
    </div>
  );
}

A glyph passed to a PlButton or a PlAlert is already sized by that component's own IconTheme, at 1.2× the label, so it tracks the label. Wrapping it in a PlIcon is for when it should be a fixed size instead, or when it is standing on its own.

React

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';
import 'package:plass_ui_example/demos/glyphs.dart';

class IconInside extends StatelessWidget {
  const IconInside({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 448,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        spacing: 16,
        children: <Widget>[
          // No PlIcon here: the button sizes the glyph itself, at 1.2× its
          // label, through the IconTheme it sets.
          PlButton(startIcon: const BoltGlyph(), onPressed: () {}, child: const Text('Deploy now')),
          // And here it is at a fixed size instead, which is what PlIcon is for.
          const PlAlert(
            color: PlassColor.warning,
            icon: PlIcon(icon: BoltGlyph(), size: PlassSize.sm),
            child: Text('The build is running on the fast queue.'),
          ),
          DefaultTextStyle.merge(
            style: TextStyle(color: PlassTheme.of(context).mutedFg),
            child: const Row(
              spacing: 6,
              children: <Widget>[
                PlIcon(icon: BoltGlyph(), size: PlassSize.xs),
                PlTypography('Sits in a sentence at the sentence’s own colour.'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Accessibility

• Without label the icon is aria-hidden and carries no role. That is the right default: most icons sit next to a word that already says the same thing, and reading both out loud is worse than reading one.
• With label it becomes role="img" with that name. Pass it only when the glyph is carrying meaning on its own.
• There is no third case. role="img" on a decorative glyph is the most common way a screen reader ends up announcing "graphic".
• An icon that is the whole of a button belongs inside the button, not beside it: give the PlButton an aria-label and leave the icon hidden.

• Without label the icon is excluded from the semantics tree entirely. That is the right default: most icons sit next to a word that already says the same thing, and reading both out loud is worse than reading one.
• With label it becomes an image with that name. Pass it only when the glyph is carrying meaning on its own.
• There is no third case. Naming a decorative glyph is the most common way a screen reader ends up announcing "graphic".
• An icon that is the whole of a button belongs inside the button, not beside it: give the PlButton a semanticLabel and leave the icon unnamed.

Differences from the React build

React	Flutter	Why
color="inherit"	color: null	Dart has no inherit keyword, and a nullable enum says the same thing with one less name in it.
aria-label	label	Same name here, and it does the same job, but what it produces is an image node rather than a role.
className, style, native attributes	—	There is no class list and no style attribute to pass through.

The library still draws no icon set. Flutter ships none outside Material, which this package does not import, so the glyphs in these previews are drawn by the gallery. Exactly what an app does with whichever set it chose.