Icon

ic.Icon displays an SVG icon. You specify the icon by name through the Source property, which accepts an ic.Asset; and control its size, color, and stroke thickness. Icon also provides static helper methods for browsing and searching the available icons.

Source and size

Source allows using either a custom file or url, or an icon from the Lucide set. Lucide icons are set by name, like "info", "heart", or "settings".

Size sets both the width and height in pixels. The default is 16px, which works well inline with text, but you can scale it up for standalone use or as a visual accent.

Color and stroke width

Color accepts any CSS color string. When left empty, the icon inherits the text color from its parent container, which is usually what you want for inline icons. You can also pass theme tokens like var(--ic-primary) or hex values for explicit coloring. StrokeWidth adjusts the line thickness of the icon, with the default of 2 giving a balanced look. Lower values make icons feel lighter and more refined, while higher values add emphasis.

Browsing available icons

Lucide ships with around 1900 icons and the set grows with each release. The static methods on ic.Icon help you find what you need without leaving MATLAB: list() returns all names as a string array (filterable with contains), browse() opens the Lucide website, and gallery() displays a paginated icon grid right inside a figure.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. The outer span gets the gradient background and rounded corners, while targeting the inner svg overrides the stroke color to white.

icn = ic.Icon("Source", "zap", "Size", 48);

icn.css.style("span", ...
    "background", "linear-gradient(135deg, #f59e0b, #ef4444)", ...
    "padding", "14px", ...
    "border_radius", "16px", ...
    "box_shadow", "0 2px 8px rgba(245, 158, 11, 0.3)");

icn.css.style("svg", ...
    "stroke", "#fff");