Icons

What this skill does

The Icons skill streamlines the integration and customization of vector icons within Avalonia-based UI projects using the `{Icon}` markup extension. It enables quick insertion of icons from libraries like FontAwesome directly into controls without verbose code. Through the `IconOptions` styling properties, marketers and designers can consistently control icon size, color, padding, and background, ensuring visual coherence across interfaces without manual wrapping or extra markup.

Who it's for

This skill is designed for UI-focused growth leads and agency strategists managing marketing dashboards or customer-facing apps where clear, scalable iconography improves user experience. Performance marketers embedding icons in campaign management tools or analytics platforms will benefit from its speed and consistency. Frontend specialists responsible for branding alignment and accessibility in cross-platform projects will also find this skill useful for rapid icon deployment.

Key workflows

Practitioners first select the appropriate icon by referencing the `{Icon}` markup with shorthand or named parameters, embedding it directly in UI elements like buttons or content controls. Next, they apply `IconOptions` styling either inline or via reusable styles to adjust size, fill color, padding, and rounded corners, maintaining brand consistency without additional controls. They then define shared icon resources in a centralized dictionary for reuse across multiple views, enabling quick updates and consistent icon usage. Finally, they test icons in context to ensure clarity and responsiveness within the marketing interface.

Common questions

Can I customize icons without wrapping them in extra controls? Yes, `IconOptions` provides direct styling properties to adjust appearance seamlessly. How do I reuse icons efficiently? Define icons as shared resources in a resource dictionary and reference them with `StaticResource` or continue using the `{Icon}` extension for on-the-fly instances. Is the `{Icon}` extension compatible with all FontAwesome icons? The extension supports icons available in your referenced libraries, but verifying availability in the source asset set is recommended.

How to use in Metaflow

Attach the Icons skill to any Metaflow agent task that involves UI component design or marketing dashboard development to enable rapid icon embedding and styling. Expect to streamline icon management with minimal markup and consistent styling controls, reducing development overhead on visual elements. This skill integrates smoothly with resource dictionaries and style sheets—

For broader context, see our roundup of marketing skills claude, and read common Claude Code content mistakes for related setup guidance.