A prefix is a placeholder in design that serves as a temporary marker until the desired item (e.g. icons, flags, avatars, ...) is assigned. The use of prefixes helps with efficient organization and visual identification of elements within the component.

1. Create an element, with a maximum container size (e.g. 24x24px).

2. Wrap it in an auto-layout container with 0px padding and center-align.

3. Set containers' resizing constraints to “Hug”, and prefix to “Fixed”.

4. Create a component out of the element.

5. Set the "✦ prefix-slot" property of the component to 'on.'

6. Swap the prefix with your new component using the "↳ prefix-content" instance swap property.



The following Cosmos web components contain prefix slots in the design in the sizes listed below: