Source artwork and implementation
A palette marks themes, color controls, or visual customization. It fits an editor toolbar where people expect appearance changes.
Use it in an interface
Provide text values alongside swatches so exact colors can be entered. If color communicates status, add another cue such as wording or shape.
The solar:palette-bold-duotone source has 6 SVG path elements and a 24 × 24 coordinate system. Its source does not declare a stroke attribute in the drawing markup; do not assume adding a stroke will preserve its appearance. The preview preserves the source proportions.
Embed the original SVG as an image
This example reserves a 24-pixel box. It uses an empty alternative because visible text must convey the meaning alongside a decorative icon. For an informative standalone image, replace the empty alternative with a useful description.
<img src="/icon-file.php?prefix=solar&name=palette-bold-duotone" width="24" height="24" alt="">An SVG loaded through an image element does not inherit the surrounding page’s CSS color. To recolor it, export a customized version or use a reviewed inline SVG. Compare inline SVG and image coloring.
Check before shipping
- Preview Palette Bold Duotone at the actual display size, especially if your output differs from its 24 × 24 source grid.
- Give interactive controls an action label rather than relying on the file name.
- Retain the CC BY 4.0 license notices required by the original source terms.
Try our visual implementation examples for buttons, sizing and selected states.