> ## Documentation Index
> Fetch the complete documentation index at: https://docs.presenton.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Images and icons

> Add and edit image content.

## Add an image layout

Open **Images**, then choose **Image**, **Image + Text**, or **Image Grid**.

<video className="doc-video" controls preload="metadata" playsInline src="https://mintcdn.com/presenton-521d9e2f/ajRRt4DeFK4Rgl49/images/user-guide/working-with-content/image-layout-picker.mp4?fit=max&auto=format&n=ajRRt4DeFK4Rgl49&q=85&s=0544f2e321a6e0b367660fc7f3f64080" data-path="images/user-guide/working-with-content/image-layout-picker.mp4">
  Your browser does not support the video tag.
</video>

<div className="guide-media guide-media--panel">
  <p className="guide-media-label">Image layouts available from the editor rail</p>

  <div className="guide-media-viewport">
    <img src="https://mintcdn.com/presenton-521d9e2f/isevrd3o6JPIkznF/images/user-guide/editing-and-refining/canvas/image-library-panel.png?fit=max&auto=format&n=isevrd3o6JPIkznF&q=85&s=5e1460578fd6d597790ba85907906cdb" alt="Images panel with Image, Image plus Text, and Image Grid options" width="383" height="170" data-path="images/user-guide/editing-and-refining/canvas/image-library-panel.png" />
  </div>
</div>

## Edit an image

<div className="guide-media guide-media--workflow">
  <p className="guide-media-label">Add an image, replace its content, and adjust its presentation</p>

  <div className="guide-media-viewport">
    <video className="doc-video" controls preload="metadata" src="https://mintcdn.com/presenton-521d9e2f/ajRRt4DeFK4Rgl49/images/user-guide/editing-and-refining/canvas/image-editing.mp4?fit=max&auto=format&n=ajRRt4DeFK4Rgl49&q=85&s=c856c08114c645e429ab8693d50c5424" data-path="images/user-guide/editing-and-refining/canvas/image-editing.mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</div>

1. Select the image element.
2. Use the image controls shown for the selection to replace or adjust it.
3. Resize or reposition the frame when needed.
4. Confirm the subject remains visible and the image does not cover nearby content.

## Edit an icon

Select an icon to change its color. Choose **Change Icon** to search for a more appropriate symbol, compare the available weights, and apply the replacement.

<div className="guide-media guide-media--workflow">
  <p className="guide-media-label">Recolor and replace an icon</p>

  <div className="guide-media-viewport">
    <video className="doc-video" controls preload="metadata" playsInline src="https://mintcdn.com/presenton-521d9e2f/ajRRt4DeFK4Rgl49/images/user-guide/working-with-content/edit-icons.mp4?fit=max&auto=format&n=ajRRt4DeFK4Rgl49&q=85&s=af545864b3e08f8e4b14a6edecfed85c" data-path="images/user-guide/working-with-content/edit-icons.mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</div>