---
title: "Platform icon"
description: "@sota/platform/icons は安定 icon name alert、check、chevronDown、chevronLeft、chevronRight、close、info、loading、search、settings、warning を公開します。"
url: "https://sotaagents.ai/ja/manual/developer-guide/platform-icons"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Platform icon

`@sota/platform/icons` は安定 icon name `alert`、`check`、`chevronDown`、`chevronLeft`、`chevronRight`、`close`、`info`、`loading`、`search`、`settings`、`warning` を公開します。

TSX

```
import { Icon, PLATFORM_ICON_NAMES, type IconName } from '@sota/platform/icons';

export function StatusIcon({ name, label }: { name: IconName; label: string }) {
  return <span>
    <Icon name={name} size={16} strokeWidth={2} aria-hidden />
    <span>{label}</span>
  </span>;
}

console.log(PLATFORM_ICON_NAMES);
```

`Icon` は通常の SVG attribute も受け取ります。隣接 text が名前を持つ場合は `aria-hidden`、icon 単体なら `aria-label` を渡します。Closed name union により unavailable name は deploy 前に TypeScript error になります。