Images
Add images and icons, including ones with a variable-driven source.
Put content images in public/, then reference them with a path that starts with /.
Basic images
The text in brackets is the image's alt text. Keep it descriptive, since it is read by screen readers and shown if the image fails to load.
Here is how it renders
The Images and Files page walks through adding an image step by step.
Icons
Icons work the same way as any other image: place the file in public/, then reference its path.
public/icons/shield.svgSmall SVGs are the most common choice, since they stay sharp at any size.
You won't insert an icon into page text directly. Instead, certain components take an icon file through an attribute, such as icon on a card or an actor's icon in a sequence diagram.
Images with variables
Sometimes an image's source should come from a reusable value instead of being written directly, for example a logo URL that might change later. See Variables for how to define a variable and use it in an image.