Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Foundations

Icon

Icon draws one glyph from AniCanon™'s outline icon set: 24px grid, 2px stroke, round caps and joins, currentColor.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Icon for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

Icon for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
One glyph from AniCanon™'s outline set inside a control or beside words: a field's leading glyph, a tab bar item, a Studio panel's header.
Not for

Guidelines

  • Pass name from the set; the preview lists every name.
  • Size 18–22 inside controls, 22 in the tab bar. The glyph sits inside a 44px target, never as the target.
  • An Icon is decorative (aria-hidden) unless you pass title. When an icon is the only content of a control, name the control instead (IconButton label).
  • Colour comes from the parent's color. icon-fg is the default.
  • play and pause are filled shapes; every other icon is a stroke.
  • heart-filled is the liked state of heart. captions, volume-off, clock and sliders cover player and reader controls.
  • The set now holds AniCanon™'s own drawn icons, copied exactly from the portal: shot, angle, depth, movement, composition, lens, mood, lighting, weather, effects, frames, and the registry icons (camera, characters, backdrops, collection, folder, video…). auto marks every Auto option, where the director chooses for you: four framing marks around the subject, like a viewfinder. It is never a sparkle.
  • Character pickers use filled silhouettes that follow the world's morphology: human (body-*, height-*, age-*, figure-*), anthro (anthro-*) and creature (creature-age-*, creature-build-*, creature-size-*). Pick the set from the project's morphology, never mix them. gender-*, faction-* and trait-* are shared.
IconExample.jsxReact
import { Icon } from '@anicanon/sakuga/ui';

export default function IconExample() {
  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 18,
        color: 'var(--icon-fg)',
      }}
    >
      {S.iconNames.map((n) => (
        <div
          key={n}
          title={n}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 6,
            width: 64,
            font: '500 12px/16px var(--font-sans)',
            color: 'var(--text-muted)',
          }}
        >
          <span style={{ color: 'var(--icon-fg)' }}>
            <Icon name={n} size={22} />
          </span>
          {n}
        </div>
      ))}
    </div>
  );
}

PropsIconProps

namerequired
IconName
size
number | stringDefault 20
Pixels, or a size token such as 'var(--button-icon-size)'.
title
string
strokeWidth
number
className
string

Types

IconName is one of 222 names.

IconExample.swiftiOS · coming soon
IconExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

icon-fgIcon: default glyph colour; icons follow currentColor.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff

Space and shape

icon-size-xs
its own value
14px
icon-size-sm
its own value
16px
icon-size-md
its own value
20px
icon-size-lg
its own value
24px

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
Decorative by default: hidden from screen readers and never focusable. With title it is an image named by that title.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.