Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Place a vector icon that stays sharp at different sizes. This example focuses on one achievable outcome rather than listing every possible setting.
Before you start
Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.
Worked example: An icon supporting a clearly labelled link
Scenario: An icon supporting a clearly labelled link. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Choose a consistent icon from an available icon set.
- Place it beside visible text such as View the project and match its size to that label.
- Treat the icon as decorative when the text already communicates the action; check contrast and focus on the link itself.
Expected result
You should have an icon supporting a clearly labelled link. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If an icon-only control has no accessible name, add one or restore visible text. A familiar shape is not a substitute for a clear action label.
Checks before publishing
An icon alone may be unclear. Pair it with visible text where possible and verify its contrast against the background.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official SVG Icon reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
The native references were checked against the site’s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.