Icons

Icons display scalable vector graphics and symbols to enhance your documentation with visual cues. They're perfect for indicating features, status, navigation, or adding visual interest to your content. Each icon supports custom sizing, styling, and accessibility features.

Properties

src

string required

The icon source URL or identifier. This can be a URL to an SVG file, a regular image file (PNG, JPG, etc.), an icon library identifier, or a path to an icon resource.

title

string optional

The title attribute for the icon, providing accessible text that describes the icon's purpose. This is read by screen readers and shown as a tooltip on hover.

class

string optional

Custom CSS classes to apply to the icon. Multiple classes can be provided as a space-separated string for additional styling control.

size

string optional

The display size of the icon as a CSS width/height value. This controls how large the icon appears in your documentation. Accepts any valid CSS size unit such as 16px, 1.5em, 2rem, 100%, etc.

Examples

Basic Icon

<scalar-icon
  src="check-circle"
  title="Success indicator">
</scalar-icon>

::scalar-icon{ src="check-circle" title="Success indicator" }

Icon with Custom Classes

<scalar-icon
  src="warning"
  title="Warning message"
  class="mr-2 text-yellow-500">
</scalar-icon>

::scalar-icon{ src="warning" title="Warning message" class="text-yellow-500 mr-2" }

Sized Icon

<scalar-icon
  src="info"
  title="Information"
  size="24px"
  class="text-blue-600">
</scalar-icon>

::scalar-icon{ src="info" title="Information" size="24px" class="text-blue-600" }

Different Size Units

<scalar-icon
  src="star"
  title="Small icon"
  size="16px">
</scalar-icon>

<scalar-icon
  src="star"
  title="Medium icon"
  size="1.5em">
</scalar-icon>

<scalar-icon
  src="star"
  title="Large icon"
  size="2rem">
</scalar-icon>

::scalar-icon{ src="star" title="Small icon" size="16px" }

::scalar-icon{ src="star" title="Medium icon" size="1.5em" }

::scalar-icon{ src="star" title="Large icon" size="2rem" }

Icon from URL

Icons can load from external URLs, supporting both SVG files and regular image formats (PNG, JPG, etc.).

<scalar-icon
  src="https://avatars.githubusercontent.com/u/301879?s=200&v=4"
  title="Custom icon from URL"
  class="icon-custom"
  size="4em">
</scalar-icon>

html

::scalar-icon{ src="https://avatars.githubusercontent.com/u/301879?s=200&v=4" title="Custom icon from URL" class="icon-custom" size="4em" }

markdown