Strongtie Design System
Getting StartedComponents

Search documentation

Search for a command to run or a page to navigate to.

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Styles Only (CSS)
  • Code Quality Setup
  • Resources
Guides
  • Framework Recommendations
  • Design Standards
  • Design Standards Examples
AI-Assisted Development
  • AI Agent Guide
  • AI Agent Skills
  • AGENTS.md Template
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tab Nav
  • Tree
Foundations
  • States
  • Variables
Migrations
  • Migration Guide
  • CDN Migration Guide
  • Telerik Migration
Governance
  • Governance Model
  • Contribution Model
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Form
  • Hover Card
  • Input
  • Input Group
  • Input Otp
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Tab Nav
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  2. Components
  3. Icon

Icon

PreviousNext

A flexible wrapper for rendering icon components with consistent sizing and styling.

The Icon component provides a standardized way to render icons from various icon libraries or custom SVG components. It handles sizing, coloring, and ensures consistent appearance across your application.

Example

Component icon-default not found in registry.

Installation

npm install @strongtie/design-system
import { Icon } from "@strongtie/design-system/icon"

Props

<Icon>

PropTypeDefaultDescription
asElementType<any, keyof IntrinsicElements>svgThe component or element type to render as the icon.
boxSizestring | number1emThe size of the icon (width and height).
colorstringcurrentColorThe color of the icon fill.

Examples

Component icon-default not found in registry.

Custom Svg

Component icon-custom-svg not found in registry.

Different Color

Component icon-different-color not found in registry.

Different Size

Component icon-different-size not found in registry.

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

  • icon

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Hover CardInput Group

On This Page

ExampleInstallationProps<Icon>ExamplesCustom SvgDifferent ColorDifferent SizeStylingComponent SlotsAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page