Icon

The <pines-icon> component renders an inline SVG icon from the PinesUI icon library. Use it to add recognizable visual cues to buttons, navigation items, menu entries, form labels, or any other UI element where a small pictogram improves scannability or communicates meaning faster than text alone.

Properties

Attribute Type Description
icon PinesIconEnum Selects the icon to render from the PinesIconEnum set. Choose the icon whose visual metaphor best represents the associated action or concept in your UI context.
css-class string Additional CSS classes applied to the icon element. Use to control size, color, or spacing — for example, text-lg for a larger icon or mr-2 to add a right margin when placed before a label.

PinesIconEnum Values

Value Description
ArrowUpDown Up/down arrow. Use for sortable column headers, reorder handles, or any UI control that swaps between two vertical states.
User Single person silhouette. Use for profile links, user account menus, or any element representing an individual user.
Card Credit or ID card. Use for payment method sections, billing settings, or identity verification flows.
Settings Gear or cog. Use for configuration pages, account settings, or any area where the user customizes application behavior.
Keyboard Keyboard outline. Use for keyboard shortcut references, input-related settings, or accessibility features.
People Multiple person silhouettes. Use for team pages, group management, multi-user features, or any context involving more than one person.
UserPlus Person with a plus sign. Use for "Add User", "Invite Member", or "Create Account" actions.
Plus Simple plus sign. Use for "Add", "Create", or "New" actions when a more specific icon is not available.
CirclePlus Plus sign inside a circle. Use for add or create actions where a more bounded, button-like appearance is desirable.
Email Envelope icon. Use for email-related features, contact forms, messaging interfaces, or notification preferences.
SMS Speech bubble or SMS icon. Use for text messaging features, chat interfaces, or mobile communication options.
Github GitHub logo. Use for links to source repositories, contribution guides, or version control integrations.
Help Question mark or help circle. Use for contextual help tooltips, documentation links, or support entry points.
Cloud Cloud shape. Use for cloud storage, sync status, remote data operations, or hosted service indicators.
Exit Door or arrow pointing out. Use for logout, sign-out, or exit/close session actions.