diff --git a/README.md b/README.md
index 0466fbd353..ff97125dac 100644
--- a/README.md
+++ b/README.md
@@ -429,6 +429,25 @@ Available attributes:
 - `class`: CSS classes to apply
 - `style`: CSS inline styles to apply
 
+#### Icons
+
+If a web interface uses icons, especially as buttons without labels, use
+the `icon` shortcode to inline an SVG file for a visual reference as
+demonstrated below:
+
+```markdown
+Select all nodes ({{< icon "select-all" >}}), then right-click.
+```
+
+Icons are supposed to supplement the text, i.e. not be embedded in sentences.
+They are hidden from screen readers.
+
+To add new icons to the toolchain, save them to `site/content/images/icons/`.
+They are referenced by file name (without extension) in the shortcode.
+
+SVG icon files should not define the attributes `width`, `height`, `aria-hidden`,
+and `focusable` on the `<svg>` tag.
+
 #### Keyboard shortcuts
 
 To document hotkeys and key combinations to press in a terminal or graphical
diff --git a/site/content/3.12/graphs/graph-visualizer.md b/site/content/3.12/graphs/graph-visualizer.md
index 388bbf2a99..82112a7a62 100644
--- a/site/content/3.12/graphs/graph-visualizer.md
+++ b/site/content/3.12/graphs/graph-visualizer.md
@@ -5,38 +5,37 @@ weight: 102
 description: >-
   Visually explore and interact with your ArangoDB graphs through an intuitive interface
 ---
-{{< tag "ArangoDB Platform" >}}
-
 {{< tip >}}
-The ArangoDB Platform & GenAI Suite is available as a pre-release. To get
+The Arango Data Platform & AI Services are available as a pre-release. To get
 exclusive early access, [get in touch](https://arangodb.com/contact/) with
 the ArangoDB team.
 {{< /tip >}}
 
 The **Graph Visualizer** is a browser-based tool integrated into the web interface
-of the ArangoDB Platform. It lets you explore the connections of your named graphs
+of the Arango Data Platform. It lets you explore the connections of your named graphs
 to visually understand the structure as well as to inspect and edit the attributes
 of individual nodes and edges. It also offers query capabilities and you can
 create new nodes (vertices) and edges (relations).
 
 ![A screenshot of the Graph Visualizer user interface showing some persons and movies as circles with arrows indicting who acted in or directed a movie](../../images/graph-visualizer.png)
 
-{{< info >}}
-Graph creation is **not** performed within the Graph Visualizer. Graphs must be
-created in the **Management** section under **Graphs** of the second-level
-navigation in the [web interface](../components/web-interface/graphs.md). Once
-created, you can select a graph from the list for exploration and visualization.
-{{< /info >}}
-
 You can use the Graph Visualizer to do the following:
 
-- Filter and view specific nodes to focus on a subset of your graph.
+- Select and view specific nodes including with custom queries to focus on a
+  subset of your graph.
 - Dynamically expand nodes to show more of their neighborhood to see how
   entities are connected.
 - Inspect the properties of nodes and edges.
 - Modify existing or create new nodes and edges.
-- Rearrange nodes automatically or manually for better visual clarity.
-- Use zoom and pan to explore large graphs more easily.
+- Rearrange nodes automatically or manually as well as assign colors and icons
+  for better visual clarity.
+
+{{< info >}}
+Graph creation is **not** performed within the Graph Visualizer. Graphs must be
+created in the **Management** section under **Graphs** of the second-level
+navigation in the [web interface](../components/web-interface/graphs.md). Once
+created, you can select a graph from the list for exploration and visualization.
+{{< /info >}}
 
 ## View a graph
 
@@ -51,35 +50,41 @@ supported by the Graph Visualizer.
 
 ### Select and load a graph
 
-1. In the ArangoDB Platform web interface, select the database your named graph
-   is stored in.
+1. In the Arango Data Platform web interface, select the database your
+   named graph is stored in.
 2. Click **Graphs** in the main navigation.
 3. Select a graph from the list.
 4. The viewport of the Graph Visualizer opens for exploring the graph.
 
-The main area of the viewport may initially be empty in the following cases:
-
-- You opened a graph for the first time and nothing is selected for displaying yet
-- You used the **Clear Canvas** option
-<!-- TODO: Doesn't it preserve the last state? Can it be lost?
-- Reopening the Graph Visualizer after a previous session
--->
+When you open a graph for the first time or previously used the **Clear graph**
+option, the Graph Visualizer automatically populates the canvas with an initial
+neighborhood. You can right-click the canvas and choose **Clear Canvas** to start
+with an empty canvas.
 
 You can [Add nodes to the canvas manually](#add-nodes-to-the-canvas-manually)
 as well as [Add nodes and edges using a query](#add-nodes-and-edges-using-a-query).
-Afterwards, you can also [Add nodes and edges using a query based on a selection](#add-nodes-and-edges-using-a-query-based-on-a-selection)
+Afterwards, you can also [Add nodes and edges using a query based on a selection](#add-nodes-and-edges-using-a-query-based-on-a-selection-canvas-actions)
 as well as [Remove nodes from the canvas](#remove-nodes-from-the-canvas).
 
+For each graph, the Graph Visualizer remembers the nodes and edges that are on
+the canvas across sessions using the local browser storage. It also remembers
+the theme settings including unsaved visual customizations, but not the specific
+spatial arrangement of the nodes.
+
 ### The viewport
 
 The Graph Visualizer interface is comprised of the following components:
 
+- **Top bar**: The name and type of the graph, as well as a button to get
+  back to the list of named graphs.
 - **Canvas**: The main area of the viewport.
 - **Search & add nodes to canvas** and **Queries**:
   A widget in the top left corner that opens dialogs for selecting nodes and
   edges to display (manually or using queries).
-- [**Customization**](#visual-customization):
-  A sidebar on the right-hand side to adjust the styling.
+- [**Legend**](#legend-and-visual-customization):
+  A panel on the right-hand side that shows you what colors and icons are used
+  for nodes and edges, as well as to adjust the styling, and to select all
+  items of a type.
 - [**Layout and Navigation**](#layouts-and-navigation-tools):
   A minimap and multiple tools for the canvas in the bottom right corner.
 
@@ -90,25 +95,28 @@ displayed.
 
 1. Click **Search & add nodes to canvas**.
 2. Select a **Node type**. This is the name of the collection that stores the
-   node you want to select.
-3. Enter a value into the **Search** field. This searches common attributes
-   as indicated by the placeholder text and finds up to 10 nodes that contain
-   this text in one of these attributes (case-insensitive).
+   nodes you want to select.
+3. Enter a value into the **Search** field. This searches for document IDs
+<!-- TODO: Will this come back?
+This searches common attributes as indicated by the placeholder text and finds
+up to 10 nodes that contain this text in one of these attributes
+-->and finds up to 10 nodes that contain this text (case-insensitive).
 4. Select one or more nodes from the list on the left-hand side.
-5. Optional: You can check the attributes of the selected nodes on the
-   right-hand side. Use the buttons at the bottom to switch between nodes.
-6. Click **Add _n_ vertices**.
+5. Optional: You can inspect the attributes of the selected nodes on the
+   right-hand side. Use the buttons at the bottom
+   ({{< icon "caret-left" >}}, {{< icon "caret-right" >}}) to switch between nodes.
+6. Click **Add # nodes**.
 7. To see the neighbor nodes and the edges that connect them, right-click a node,
-   click **Expand (_n_)** and then **All (_n_)**.
+   click **Expand (#)** and then **All (#)**.
 
 ![A screenshot of the dialog for adding nodes with two persons selected](../../images/graph-visualizer-add-nodes.png)
 
 ### Add nodes and edges using a query
 
-You can run an AQL query to add a nodes, edges, or paths of the graph to the canvas.
+You can run an AQL query to add nodes, edges, or paths of the graph to the canvas.
 
 1. Click **Queries** of the top-left widget.
-2. Click **New query**.
+2. On the **Queries** tab, click **New query**.
 3. Enter an AQL query that returns nodes, edges, or paths
    (e.g. a graph traversal query), for example:
    ```aql
@@ -128,25 +136,40 @@ You can run an AQL query to add a nodes, edges, or paths of the graph to the can
 You can save queries for future use: 
 
 1. Click **Queries** of the top-left widget.
-2. Click **New query**.
+2. On the **Queries** tab, click **New query**.
 3. Enter or edit the AQL query you want to save. You can optionally use
-   bind variables to parameterize saved queries.
+   bind variables (like `@var`, `@@coll`) to parameterize saved queries.
 4. Enter a name and optionally a description, then click **Save**.
 5. To run a saved query, click **Queries** of the top-left widget.
 6. Select a query from the list. The following actions are available for each query:
+  - Copy ({{< icon "duplicate" >}}) the query string to the clipboard.
   - **Bind Variables** to set for the query.
-  - **Run** the query.
-  - **Copy** the query string to the clipboard.
-  - **Delete** a no longer needed query.
+  - Edit ({{< icon "edit-square" >}}) the query.
+  - Delete ({{< icon "delete" >}}) a no longer needed query.
+  - Run ({{< icon "run" >}}) the query.
 {{< /tip >}}
 
 ![A screenshot of the dialog with a query expanded and a bind variable filled in](../../images/graph-visualizer-queries.png)
 
-### Add nodes and edges using a query based on a selection
+### Add nodes and edges using a query based on a selection (Canvas Actions)
+
+**Canvas Actions** are stored AQL queries that work with your current selection
+of nodes and edges on the canvas. Think of them as tools that let you discover
+related data for what you have selected. Unlike regular queries that work on the
+entire graph, Canvas Actions use special bind variables (`@nodes` and `@edges`)
+in their AQL query to reference your selected items, making them context-aware
+and interactive.
 
-You can select nodes and edges on the canvas and then use a **Canvas Action**.
+You can select nodes, edges, or both on the canvas and then use a **Canvas Action**.
 This runs an AQL query to add nodes, edges, or paths of the graph to the canvas.
-The query has access to the current selection via special bind variables.
+For example, you could select a movie and use a Canvas Action that adds all
+other movies with the same runtime as the one you selected. Or you could select
+two persons and use a Canvas Action to add all movies and persons that are on
+the shortest paths between the selected persons.
+
+The query of a Canvas Action has access to the current selection via the
+`@nodes` and `@edges` bind variables. Both are arrays with the document IDs of
+the currently selected nodes respectively edges.
 
 1. Create a selection. You have different options:
    - Click a node or edge to select only this element.
@@ -156,9 +179,12 @@ The query has access to the current selection via special bind variables.
 3. Depending on the query, additional nodes or edges with their nodes are added
    to the canvas.
 4. To create a custom Canvas Action query, click **Queries** of the top-left widget.
-5. Click **Canvas Actions**, then **New action**.
+5. Go to the **Canvas actions** tab and click **New action**.
 6. Enter an AQL query that makes use of the special bind variable `@nodes`,
-   `@edges`, or both and returns nodes, edges, or paths. Examples:
+   `@edges`, or both and returns nodes, edges, or paths. For example, iterate
+   over the document IDs of the selected nodes, perform a graph traversal for
+   each node, filter and limit the results, and add all of the items on the path
+   to the canvas:
    ```aql
    FOR selectedNode IN @nodes
      FOR v, e, p IN 1..3 ANY selectedNode GRAPH "myGraph"
@@ -170,6 +196,25 @@ The query has access to the current selection via special bind variables.
 
 ![A screenshot of the context menu for a node showing the available Canvas Actions](../../images/graph-visualizer-menu-canvas-action.png)
 
+### Explore connections
+
+You can explore the connections between entities of your graph in the following
+ways:
+
+- **Expand a node**: Right-click a node, then click **Expand (#)** and **All (#)**.
+  This adds the direct neighbor nodes as well as the connecting edges to the canvas.
+
+- **Shortest Path**: Select exactly two nodes, right-click one of them, and click
+  **Shortest Path**. If there is a path between both nodes, the nodes and edges
+  of one shortest path between them are added to the canvas.
+
+- [**Queries**](#add-nodes-and-edges-using-a-query) and
+  [**Canvas Actions**](#add-nodes-and-edges-using-a-query-based-on-a-selection-canvas-actions):
+  You can run AQL graph queries (also based on the selection) to add connected
+  nodes to the canvas. For example, you can use traversals to expand multiple
+  levels of a node at once, or use path searches like `ALL_SHORTEST_PATHS`.
+  This can be selective if you use `FILTER` operations.
+
 ### Remove nodes from the canvas
 
 You can dismiss nodes to show less nodes and edges on the canvas to focus on the
@@ -182,37 +227,52 @@ dismissed nodes and their edges back to the canvas later on.
    - Right-click a single node to select only this node.
    - Hold the {{< kbd "Shift" >}} or {{< kbd "Ctrl" >}} key and click multiple nodes or drag the
      mouse to perform a box selection, then right-click one of the selected nodes.
-2. In the context menu, click **Dismiss _n_ nodes** to hide the selected nodes,
+2. In the context menu, click **Dismiss # nodes** to hide the selected nodes,
    or click **Dismiss other nodes** to only keep the selection.
 3. The canvas updates to only display the remaining nodes, with no dangling edges.
 
 ### View node and edge properties
 
-You can inspect the document attributes of node or edge as follows:
+You can inspect (and edit) the document attributes of a node or edge via a
+properties dialog that you can open as follows:
 
-- Double-click a node or edge to open a dialog with the properties.
-- Right-click a node to open the context menu and click **View Node** to open
-  the dialog with the properties.
+- Double-click a node or edge.
+- Right-click a node to open the context menu and click **View node**.
+- Right-click an edge to open the context menu and click **View edge**.
 
 ![A screenshot of the properties dialog with the keys and values of a node](../../images/graph-visualizer-node-properties.png)
 
 ### Layouts and navigation tools
 
-These features allow you to clear, zoom, and pan the canvas, as well as rearrange
-the displayed graph data for a better spatial understanding of node clusters,
-hierarchies, and relationship flows.
+These features located in the bottom right of the viewport allow you to clear,
+zoom, and pan the canvas, as well as rearrange the displayed graph data for a
+better spatial understanding of node clusters, hierarchies, and relationship
+flows. You can also download an image of what is displayed.
+
+- **Minimap**: A small overview for easier canvas navigation.
+  You can optionally hide it ({{< icon "caret-right" >}}).
 
-- **Minimap**: A small overview to easier navigate the canvas.
+- **Clear graph**: Remove all nodes and edges from the canvas ({{< icon "clear" >}}).
+  This only affects what is displayed and does not delete the underlying documents.
 
-- **Zoom Controls**: Zoom in/out or reset the zoom to 100%.
+- **Fit to Screen**: Resize and center the canvas so you can see everything
+  ({{< icon "fit" >}}).
 
-- **Fit to Screen**: Resize and center the canvas so you can see everything.
+- **Zoom Controls**: Zoom in ({{< icon "zoom-in" >}}), zoom out
+  ({{< icon "zoom-out" >}}), or reset the zoom to 100%.
 
-- **Re-run Layout**: Automatically rearrange the nodes using the selected algorithm.
+- **Download screenshot**: Save a PNG image of what is currently displayed on
+  the canvas ({{< icon "download" >}}).
+
+- **Re-run Layout**: Automatically rearrange the nodes using the selected
+  algorithm ({{< icon "rerun" >}}).
 
 - **Layout Algorithms**: Choose between different ways of arranging the nodes.
   Which algorithm to use depends on the situation and the graph topology.
 
+  You can also move nodes around manually by clicking and dragging them on the
+  canvas.
+
 ## Edit graph data
 
 While the Graph Visualizer is primarily designed for exploring graph data, you
@@ -225,31 +285,38 @@ You need to have write access for the database and the collections for this.
 You can add nodes to the graph's document collections directly from the
 canvas. This allows you to create additional entities to the graph.
 
-1. In the **Graphs** section of the ArangoDB web interface, select your graph.
-2. Right-click on the canvas and choose **Create Node**.
+1. In the **Graphs** section of the Arango Data Platform web interface,
+   select your graph.
+2. Right-click the canvas, **Create node**, and choose a node collection to
+   store the new node in.
 3. A dialog opens with the following options:
-   - Select the target collection (**Node Type**).
+   - Select the vertex collection (**Node Type**).
    - Optionally specify a unique identifier (**Node ID**).
+   - Optionally provide a JSON body to use as the document content.
 4. Click **Create** to add the node to the canvas and database.
 
-### Create New Edges
+### Create new edges
 
 You can add edges to the graph's edge collections directly from the canvas.
 This allows you to create additional connections between nodes.
 
-1. In the **Graphs** section of the ArangoDB web interface, select your graph.
-2. Right-click on the canvas and choose **Create Edge**.
-3. In the dialog:
-   - Select the target collection (**Edge Type**, which corresponds to an edge collection).
-   - Set the `_from` and `_to` fields by selecting the source and target nodes.
+1. In the **Graphs** section of the Arango Data Platform web interface,
+   select your graph.
+2. Right-click the canvas, **Create edge**, and choose an edge collection to
+   store the new edge in.
+3. A dialog opens with the following options:
+   - Select the edge collection (**Edge Type**).
+   - Set the **From** and **To** fields by selecting the source and target nodes.
    - Optionally specify a unique identifier (**Edge ID**).
+   - Optionally provide a JSON body to use as the document content.
 4. Click **Create** to add the edge to the canvas and database.
 
-{{< info >}}
-If you select two nodes before right-clicking to open the edge creation
-dialog, the `_from` and `_to` fields are automatically pre-filled.
-You may need to swap the IDs as the order is not based on your selection sequence.
-{{< /info >}}
+{{< tip >}}
+If you select two nodes before right-clicking the canvas and opening the edge
+creation dialog, the **From** and **To** fields are automatically pre-filled.
+You may need to swap the IDs ({{< icon "swap" >}}) as the order is not based on
+your selection sequence.
+{{< /tip >}}
 
 ![A screenshot of the dialog for creating an edge with the From and To fields filled in](../../images/graph-visualizer-create-edge.png)
 
@@ -259,7 +326,11 @@ You can modify the document attributes of nodes and edges from the canvas as fol
 
 1. Double-click a node or edge.
 2. In the properties dialog that opens, click **Edit**.
-3. Change the properties and click **Save**. <!-- TODO: Can't change system attributes, even though _from and _to are generally mutable -->
+3. You can switch between a **Form** and **JSON** editing mode.
+4. Change or delete ({{< icon "delete" >}}) existing properties.
+5. In the **Form** mode, you can add new properties by scrolling to the bottom
+   and clicking **Add Property**.
+6. Click **Save** to store the changes, or **Cancel** to abort. <!-- TODO: Can't change system attributes, even though _from and _to are generally mutable -->
 
 ### Delete nodes
 
@@ -277,23 +348,82 @@ You can delete individual nodes which deletes the corresponding document.
 2. Click **Delete Edge**.
 3. Confirm the deletion by clicking **Delete**.
 
-## Visual customization
+## Legend and visual customization
 
-You can adjust how the graph data is displayed, like the color, opacity, and
-labels. All styling changes are visual-only and do not affect the underlying data.
+The legend panel lists the collections of the nodes and edges that are currently
+on the canvas, how many there are of each type, and you can select all elements
+of a type.
 
-1. Optional: Reset to default styling if desired.
-2. Click the _palette_ icon in the top right to open the **Customization** panel
+It also lets you adjust how the graph data is displayed, like the colors and
+labels. You can create and select different themes for these visual
+customizations. All styling changes are visual-only and do not affect the
+underlying data.
+
+### Customize the appearance of nodes
+
+1. Click the **Legend** button in the top right to open the **Legend** panel
+   if it's closed.
+2. Select the **Nodes (#)** tab and click one of the node collections.
+   You can filter by name if there are many.
+3. You have the following theming options for nodes:
+   - **Color**: Select a fill color for the circles that depict nodes.
+     This lets you distinguish between different types of nodes at a glance.
+   - **Icon**: Select a pictogram to be drawn inside the circles that resembles
+     the kind of entity you store in a node collection. This allows you to
+     quickly tell what type of node you look at.
+   - **Display**: Select what attribute to use for the **Label** that is shown
+     below a node, and what information to show in the tooltip when hovering
+     over a node (**Hover info**). These options let you view a part of the
+     node properties more quickly without opening the full
+     [properties dialog](#view-node-and-edge-properties).
+
+![A screenshot of the Legend panel and a node styling dialog](../../images/graph-visualizer-customization.png)
+
+### Customize the appearance of edges
+
+1. Click the **Legend** button in the top right to open the **Legend** panel
+   if it's closed.
+2. Select the **Edges (#)** tab and click one of the edge collections.
+   You can filter by name if there are many.
+3. You have the following theming options for edges:
+   - **Color**: Select a stroke color for the lines that depict edges.
+     This lets you distinguish between different types of edges at a glance.
+   - **Line Style**: Adjust the stroke **Thickness** and the arrowheads of lines
+     (**Source arrow** and **Target arrow**). These options let you customize
+     how prominent edges are drawn and let you better tell different types of
+     edges apart, especially when the label is not visible.
+   - **Label**: What attribute to use for the **Label** that is shown along an
+     edge, and what information to show in the tooltip when hovering an edge
+     (**Hover info**). These options let you view a part of the edge properties
+     more quickly without opening the full [properties dialog](#view-node-and-edge-properties).
+
+### Save and manage themes
+
+Themes are stored settings for the node and edge appearance. They are stored
+per graph. You can switch between multiple themes to highlight different
+aspects of the graph data.
+
+1. If the **Legend** panel is closed, click the **Legend** button in the
+   top right corner.
+2. Open the drop-down menu at the top of the **Legend** panel.
+3. To save visual customizations as a new theme, click **Add new theme**.
+4. Enter a **Name** and optionally a **Description**.
+5. Leave **Start with** set to **Current theme** to use the current settings.
+6. Click **Save**. After additional customizations, you can save the changes to
+   the theme you created via the drop-down menu ({{< icon "save" >}}).
+7. You can revert unsaved customizations of a specific collection via the
+   collection list or customization panel ({{< icon "reset" >}}), or revert all
+   unsaved changes via the theme drop-down menu ({{< icon "reset-all" >}}).
+8. To switch to a different theme, click its name in the theme drop-down menu.
+
+### Select all nodes or edges of a type
+
+1. Click the **Legend** button in the top right to open the **Legend** panel
    if it's closed.
-3. Adjust the styling for nodes or edges:
-   - Select a **Label Attribute** to display a custom top-level field
-     (e.g. `name` or `type`) instead of `_id`.
-   - Assign a specific **Color** to highlight and distinguish elements.
-   - Adjust how transparent elements are with the **Opacity**.
-   - Set the **Line Thickness** (edges only).
-   - Choose different **Arrowhead Styles** (edges only).
-4. You can also do the following:
-   - Clear the styling modifications.
-   - See the number of nodes respectively edges on the canvas (by collection).
-
-![A screenshot of the Customization panel with a popover dialog for edge styling open](../../images/graph-visualizer-customization.png)
+2. Select the **Nodes (#)** or **Edges (#)** tab.
+3. You can see the number of nodes and edges (per collection) that are on the canvas.
+4. You can sort the collection list by the number instead of name by clicking the icon
+   in the filter input field ({{< icon "sort-by" >}}) and selecting **Count**.
+5. Click the icon ({{< icon "select-all" >}}) next to the number to select all
+   nodes or edges that belong to the respective collection. This clears any
+   previous selection.
diff --git a/site/content/3.13/graphs/graph-visualizer.md b/site/content/3.13/graphs/graph-visualizer.md
index 388bbf2a99..82112a7a62 100644
--- a/site/content/3.13/graphs/graph-visualizer.md
+++ b/site/content/3.13/graphs/graph-visualizer.md
@@ -5,38 +5,37 @@ weight: 102
 description: >-
   Visually explore and interact with your ArangoDB graphs through an intuitive interface
 ---
-{{< tag "ArangoDB Platform" >}}
-
 {{< tip >}}
-The ArangoDB Platform & GenAI Suite is available as a pre-release. To get
+The Arango Data Platform & AI Services are available as a pre-release. To get
 exclusive early access, [get in touch](https://arangodb.com/contact/) with
 the ArangoDB team.
 {{< /tip >}}
 
 The **Graph Visualizer** is a browser-based tool integrated into the web interface
-of the ArangoDB Platform. It lets you explore the connections of your named graphs
+of the Arango Data Platform. It lets you explore the connections of your named graphs
 to visually understand the structure as well as to inspect and edit the attributes
 of individual nodes and edges. It also offers query capabilities and you can
 create new nodes (vertices) and edges (relations).
 
 ![A screenshot of the Graph Visualizer user interface showing some persons and movies as circles with arrows indicting who acted in or directed a movie](../../images/graph-visualizer.png)
 
-{{< info >}}
-Graph creation is **not** performed within the Graph Visualizer. Graphs must be
-created in the **Management** section under **Graphs** of the second-level
-navigation in the [web interface](../components/web-interface/graphs.md). Once
-created, you can select a graph from the list for exploration and visualization.
-{{< /info >}}
-
 You can use the Graph Visualizer to do the following:
 
-- Filter and view specific nodes to focus on a subset of your graph.
+- Select and view specific nodes including with custom queries to focus on a
+  subset of your graph.
 - Dynamically expand nodes to show more of their neighborhood to see how
   entities are connected.
 - Inspect the properties of nodes and edges.
 - Modify existing or create new nodes and edges.
-- Rearrange nodes automatically or manually for better visual clarity.
-- Use zoom and pan to explore large graphs more easily.
+- Rearrange nodes automatically or manually as well as assign colors and icons
+  for better visual clarity.
+
+{{< info >}}
+Graph creation is **not** performed within the Graph Visualizer. Graphs must be
+created in the **Management** section under **Graphs** of the second-level
+navigation in the [web interface](../components/web-interface/graphs.md). Once
+created, you can select a graph from the list for exploration and visualization.
+{{< /info >}}
 
 ## View a graph
 
@@ -51,35 +50,41 @@ supported by the Graph Visualizer.
 
 ### Select and load a graph
 
-1. In the ArangoDB Platform web interface, select the database your named graph
-   is stored in.
+1. In the Arango Data Platform web interface, select the database your
+   named graph is stored in.
 2. Click **Graphs** in the main navigation.
 3. Select a graph from the list.
 4. The viewport of the Graph Visualizer opens for exploring the graph.
 
-The main area of the viewport may initially be empty in the following cases:
-
-- You opened a graph for the first time and nothing is selected for displaying yet
-- You used the **Clear Canvas** option
-<!-- TODO: Doesn't it preserve the last state? Can it be lost?
-- Reopening the Graph Visualizer after a previous session
--->
+When you open a graph for the first time or previously used the **Clear graph**
+option, the Graph Visualizer automatically populates the canvas with an initial
+neighborhood. You can right-click the canvas and choose **Clear Canvas** to start
+with an empty canvas.
 
 You can [Add nodes to the canvas manually](#add-nodes-to-the-canvas-manually)
 as well as [Add nodes and edges using a query](#add-nodes-and-edges-using-a-query).
-Afterwards, you can also [Add nodes and edges using a query based on a selection](#add-nodes-and-edges-using-a-query-based-on-a-selection)
+Afterwards, you can also [Add nodes and edges using a query based on a selection](#add-nodes-and-edges-using-a-query-based-on-a-selection-canvas-actions)
 as well as [Remove nodes from the canvas](#remove-nodes-from-the-canvas).
 
+For each graph, the Graph Visualizer remembers the nodes and edges that are on
+the canvas across sessions using the local browser storage. It also remembers
+the theme settings including unsaved visual customizations, but not the specific
+spatial arrangement of the nodes.
+
 ### The viewport
 
 The Graph Visualizer interface is comprised of the following components:
 
+- **Top bar**: The name and type of the graph, as well as a button to get
+  back to the list of named graphs.
 - **Canvas**: The main area of the viewport.
 - **Search & add nodes to canvas** and **Queries**:
   A widget in the top left corner that opens dialogs for selecting nodes and
   edges to display (manually or using queries).
-- [**Customization**](#visual-customization):
-  A sidebar on the right-hand side to adjust the styling.
+- [**Legend**](#legend-and-visual-customization):
+  A panel on the right-hand side that shows you what colors and icons are used
+  for nodes and edges, as well as to adjust the styling, and to select all
+  items of a type.
 - [**Layout and Navigation**](#layouts-and-navigation-tools):
   A minimap and multiple tools for the canvas in the bottom right corner.
 
@@ -90,25 +95,28 @@ displayed.
 
 1. Click **Search & add nodes to canvas**.
 2. Select a **Node type**. This is the name of the collection that stores the
-   node you want to select.
-3. Enter a value into the **Search** field. This searches common attributes
-   as indicated by the placeholder text and finds up to 10 nodes that contain
-   this text in one of these attributes (case-insensitive).
+   nodes you want to select.
+3. Enter a value into the **Search** field. This searches for document IDs
+<!-- TODO: Will this come back?
+This searches common attributes as indicated by the placeholder text and finds
+up to 10 nodes that contain this text in one of these attributes
+-->and finds up to 10 nodes that contain this text (case-insensitive).
 4. Select one or more nodes from the list on the left-hand side.
-5. Optional: You can check the attributes of the selected nodes on the
-   right-hand side. Use the buttons at the bottom to switch between nodes.
-6. Click **Add _n_ vertices**.
+5. Optional: You can inspect the attributes of the selected nodes on the
+   right-hand side. Use the buttons at the bottom
+   ({{< icon "caret-left" >}}, {{< icon "caret-right" >}}) to switch between nodes.
+6. Click **Add # nodes**.
 7. To see the neighbor nodes and the edges that connect them, right-click a node,
-   click **Expand (_n_)** and then **All (_n_)**.
+   click **Expand (#)** and then **All (#)**.
 
 ![A screenshot of the dialog for adding nodes with two persons selected](../../images/graph-visualizer-add-nodes.png)
 
 ### Add nodes and edges using a query
 
-You can run an AQL query to add a nodes, edges, or paths of the graph to the canvas.
+You can run an AQL query to add nodes, edges, or paths of the graph to the canvas.
 
 1. Click **Queries** of the top-left widget.
-2. Click **New query**.
+2. On the **Queries** tab, click **New query**.
 3. Enter an AQL query that returns nodes, edges, or paths
    (e.g. a graph traversal query), for example:
    ```aql
@@ -128,25 +136,40 @@ You can run an AQL query to add a nodes, edges, or paths of the graph to the can
 You can save queries for future use: 
 
 1. Click **Queries** of the top-left widget.
-2. Click **New query**.
+2. On the **Queries** tab, click **New query**.
 3. Enter or edit the AQL query you want to save. You can optionally use
-   bind variables to parameterize saved queries.
+   bind variables (like `@var`, `@@coll`) to parameterize saved queries.
 4. Enter a name and optionally a description, then click **Save**.
 5. To run a saved query, click **Queries** of the top-left widget.
 6. Select a query from the list. The following actions are available for each query:
+  - Copy ({{< icon "duplicate" >}}) the query string to the clipboard.
   - **Bind Variables** to set for the query.
-  - **Run** the query.
-  - **Copy** the query string to the clipboard.
-  - **Delete** a no longer needed query.
+  - Edit ({{< icon "edit-square" >}}) the query.
+  - Delete ({{< icon "delete" >}}) a no longer needed query.
+  - Run ({{< icon "run" >}}) the query.
 {{< /tip >}}
 
 ![A screenshot of the dialog with a query expanded and a bind variable filled in](../../images/graph-visualizer-queries.png)
 
-### Add nodes and edges using a query based on a selection
+### Add nodes and edges using a query based on a selection (Canvas Actions)
+
+**Canvas Actions** are stored AQL queries that work with your current selection
+of nodes and edges on the canvas. Think of them as tools that let you discover
+related data for what you have selected. Unlike regular queries that work on the
+entire graph, Canvas Actions use special bind variables (`@nodes` and `@edges`)
+in their AQL query to reference your selected items, making them context-aware
+and interactive.
 
-You can select nodes and edges on the canvas and then use a **Canvas Action**.
+You can select nodes, edges, or both on the canvas and then use a **Canvas Action**.
 This runs an AQL query to add nodes, edges, or paths of the graph to the canvas.
-The query has access to the current selection via special bind variables.
+For example, you could select a movie and use a Canvas Action that adds all
+other movies with the same runtime as the one you selected. Or you could select
+two persons and use a Canvas Action to add all movies and persons that are on
+the shortest paths between the selected persons.
+
+The query of a Canvas Action has access to the current selection via the
+`@nodes` and `@edges` bind variables. Both are arrays with the document IDs of
+the currently selected nodes respectively edges.
 
 1. Create a selection. You have different options:
    - Click a node or edge to select only this element.
@@ -156,9 +179,12 @@ The query has access to the current selection via special bind variables.
 3. Depending on the query, additional nodes or edges with their nodes are added
    to the canvas.
 4. To create a custom Canvas Action query, click **Queries** of the top-left widget.
-5. Click **Canvas Actions**, then **New action**.
+5. Go to the **Canvas actions** tab and click **New action**.
 6. Enter an AQL query that makes use of the special bind variable `@nodes`,
-   `@edges`, or both and returns nodes, edges, or paths. Examples:
+   `@edges`, or both and returns nodes, edges, or paths. For example, iterate
+   over the document IDs of the selected nodes, perform a graph traversal for
+   each node, filter and limit the results, and add all of the items on the path
+   to the canvas:
    ```aql
    FOR selectedNode IN @nodes
      FOR v, e, p IN 1..3 ANY selectedNode GRAPH "myGraph"
@@ -170,6 +196,25 @@ The query has access to the current selection via special bind variables.
 
 ![A screenshot of the context menu for a node showing the available Canvas Actions](../../images/graph-visualizer-menu-canvas-action.png)
 
+### Explore connections
+
+You can explore the connections between entities of your graph in the following
+ways:
+
+- **Expand a node**: Right-click a node, then click **Expand (#)** and **All (#)**.
+  This adds the direct neighbor nodes as well as the connecting edges to the canvas.
+
+- **Shortest Path**: Select exactly two nodes, right-click one of them, and click
+  **Shortest Path**. If there is a path between both nodes, the nodes and edges
+  of one shortest path between them are added to the canvas.
+
+- [**Queries**](#add-nodes-and-edges-using-a-query) and
+  [**Canvas Actions**](#add-nodes-and-edges-using-a-query-based-on-a-selection-canvas-actions):
+  You can run AQL graph queries (also based on the selection) to add connected
+  nodes to the canvas. For example, you can use traversals to expand multiple
+  levels of a node at once, or use path searches like `ALL_SHORTEST_PATHS`.
+  This can be selective if you use `FILTER` operations.
+
 ### Remove nodes from the canvas
 
 You can dismiss nodes to show less nodes and edges on the canvas to focus on the
@@ -182,37 +227,52 @@ dismissed nodes and their edges back to the canvas later on.
    - Right-click a single node to select only this node.
    - Hold the {{< kbd "Shift" >}} or {{< kbd "Ctrl" >}} key and click multiple nodes or drag the
      mouse to perform a box selection, then right-click one of the selected nodes.
-2. In the context menu, click **Dismiss _n_ nodes** to hide the selected nodes,
+2. In the context menu, click **Dismiss # nodes** to hide the selected nodes,
    or click **Dismiss other nodes** to only keep the selection.
 3. The canvas updates to only display the remaining nodes, with no dangling edges.
 
 ### View node and edge properties
 
-You can inspect the document attributes of node or edge as follows:
+You can inspect (and edit) the document attributes of a node or edge via a
+properties dialog that you can open as follows:
 
-- Double-click a node or edge to open a dialog with the properties.
-- Right-click a node to open the context menu and click **View Node** to open
-  the dialog with the properties.
+- Double-click a node or edge.
+- Right-click a node to open the context menu and click **View node**.
+- Right-click an edge to open the context menu and click **View edge**.
 
 ![A screenshot of the properties dialog with the keys and values of a node](../../images/graph-visualizer-node-properties.png)
 
 ### Layouts and navigation tools
 
-These features allow you to clear, zoom, and pan the canvas, as well as rearrange
-the displayed graph data for a better spatial understanding of node clusters,
-hierarchies, and relationship flows.
+These features located in the bottom right of the viewport allow you to clear,
+zoom, and pan the canvas, as well as rearrange the displayed graph data for a
+better spatial understanding of node clusters, hierarchies, and relationship
+flows. You can also download an image of what is displayed.
+
+- **Minimap**: A small overview for easier canvas navigation.
+  You can optionally hide it ({{< icon "caret-right" >}}).
 
-- **Minimap**: A small overview to easier navigate the canvas.
+- **Clear graph**: Remove all nodes and edges from the canvas ({{< icon "clear" >}}).
+  This only affects what is displayed and does not delete the underlying documents.
 
-- **Zoom Controls**: Zoom in/out or reset the zoom to 100%.
+- **Fit to Screen**: Resize and center the canvas so you can see everything
+  ({{< icon "fit" >}}).
 
-- **Fit to Screen**: Resize and center the canvas so you can see everything.
+- **Zoom Controls**: Zoom in ({{< icon "zoom-in" >}}), zoom out
+  ({{< icon "zoom-out" >}}), or reset the zoom to 100%.
 
-- **Re-run Layout**: Automatically rearrange the nodes using the selected algorithm.
+- **Download screenshot**: Save a PNG image of what is currently displayed on
+  the canvas ({{< icon "download" >}}).
+
+- **Re-run Layout**: Automatically rearrange the nodes using the selected
+  algorithm ({{< icon "rerun" >}}).
 
 - **Layout Algorithms**: Choose between different ways of arranging the nodes.
   Which algorithm to use depends on the situation and the graph topology.
 
+  You can also move nodes around manually by clicking and dragging them on the
+  canvas.
+
 ## Edit graph data
 
 While the Graph Visualizer is primarily designed for exploring graph data, you
@@ -225,31 +285,38 @@ You need to have write access for the database and the collections for this.
 You can add nodes to the graph's document collections directly from the
 canvas. This allows you to create additional entities to the graph.
 
-1. In the **Graphs** section of the ArangoDB web interface, select your graph.
-2. Right-click on the canvas and choose **Create Node**.
+1. In the **Graphs** section of the Arango Data Platform web interface,
+   select your graph.
+2. Right-click the canvas, **Create node**, and choose a node collection to
+   store the new node in.
 3. A dialog opens with the following options:
-   - Select the target collection (**Node Type**).
+   - Select the vertex collection (**Node Type**).
    - Optionally specify a unique identifier (**Node ID**).
+   - Optionally provide a JSON body to use as the document content.
 4. Click **Create** to add the node to the canvas and database.
 
-### Create New Edges
+### Create new edges
 
 You can add edges to the graph's edge collections directly from the canvas.
 This allows you to create additional connections between nodes.
 
-1. In the **Graphs** section of the ArangoDB web interface, select your graph.
-2. Right-click on the canvas and choose **Create Edge**.
-3. In the dialog:
-   - Select the target collection (**Edge Type**, which corresponds to an edge collection).
-   - Set the `_from` and `_to` fields by selecting the source and target nodes.
+1. In the **Graphs** section of the Arango Data Platform web interface,
+   select your graph.
+2. Right-click the canvas, **Create edge**, and choose an edge collection to
+   store the new edge in.
+3. A dialog opens with the following options:
+   - Select the edge collection (**Edge Type**).
+   - Set the **From** and **To** fields by selecting the source and target nodes.
    - Optionally specify a unique identifier (**Edge ID**).
+   - Optionally provide a JSON body to use as the document content.
 4. Click **Create** to add the edge to the canvas and database.
 
-{{< info >}}
-If you select two nodes before right-clicking to open the edge creation
-dialog, the `_from` and `_to` fields are automatically pre-filled.
-You may need to swap the IDs as the order is not based on your selection sequence.
-{{< /info >}}
+{{< tip >}}
+If you select two nodes before right-clicking the canvas and opening the edge
+creation dialog, the **From** and **To** fields are automatically pre-filled.
+You may need to swap the IDs ({{< icon "swap" >}}) as the order is not based on
+your selection sequence.
+{{< /tip >}}
 
 ![A screenshot of the dialog for creating an edge with the From and To fields filled in](../../images/graph-visualizer-create-edge.png)
 
@@ -259,7 +326,11 @@ You can modify the document attributes of nodes and edges from the canvas as fol
 
 1. Double-click a node or edge.
 2. In the properties dialog that opens, click **Edit**.
-3. Change the properties and click **Save**. <!-- TODO: Can't change system attributes, even though _from and _to are generally mutable -->
+3. You can switch between a **Form** and **JSON** editing mode.
+4. Change or delete ({{< icon "delete" >}}) existing properties.
+5. In the **Form** mode, you can add new properties by scrolling to the bottom
+   and clicking **Add Property**.
+6. Click **Save** to store the changes, or **Cancel** to abort. <!-- TODO: Can't change system attributes, even though _from and _to are generally mutable -->
 
 ### Delete nodes
 
@@ -277,23 +348,82 @@ You can delete individual nodes which deletes the corresponding document.
 2. Click **Delete Edge**.
 3. Confirm the deletion by clicking **Delete**.
 
-## Visual customization
+## Legend and visual customization
 
-You can adjust how the graph data is displayed, like the color, opacity, and
-labels. All styling changes are visual-only and do not affect the underlying data.
+The legend panel lists the collections of the nodes and edges that are currently
+on the canvas, how many there are of each type, and you can select all elements
+of a type.
 
-1. Optional: Reset to default styling if desired.
-2. Click the _palette_ icon in the top right to open the **Customization** panel
+It also lets you adjust how the graph data is displayed, like the colors and
+labels. You can create and select different themes for these visual
+customizations. All styling changes are visual-only and do not affect the
+underlying data.
+
+### Customize the appearance of nodes
+
+1. Click the **Legend** button in the top right to open the **Legend** panel
+   if it's closed.
+2. Select the **Nodes (#)** tab and click one of the node collections.
+   You can filter by name if there are many.
+3. You have the following theming options for nodes:
+   - **Color**: Select a fill color for the circles that depict nodes.
+     This lets you distinguish between different types of nodes at a glance.
+   - **Icon**: Select a pictogram to be drawn inside the circles that resembles
+     the kind of entity you store in a node collection. This allows you to
+     quickly tell what type of node you look at.
+   - **Display**: Select what attribute to use for the **Label** that is shown
+     below a node, and what information to show in the tooltip when hovering
+     over a node (**Hover info**). These options let you view a part of the
+     node properties more quickly without opening the full
+     [properties dialog](#view-node-and-edge-properties).
+
+![A screenshot of the Legend panel and a node styling dialog](../../images/graph-visualizer-customization.png)
+
+### Customize the appearance of edges
+
+1. Click the **Legend** button in the top right to open the **Legend** panel
+   if it's closed.
+2. Select the **Edges (#)** tab and click one of the edge collections.
+   You can filter by name if there are many.
+3. You have the following theming options for edges:
+   - **Color**: Select a stroke color for the lines that depict edges.
+     This lets you distinguish between different types of edges at a glance.
+   - **Line Style**: Adjust the stroke **Thickness** and the arrowheads of lines
+     (**Source arrow** and **Target arrow**). These options let you customize
+     how prominent edges are drawn and let you better tell different types of
+     edges apart, especially when the label is not visible.
+   - **Label**: What attribute to use for the **Label** that is shown along an
+     edge, and what information to show in the tooltip when hovering an edge
+     (**Hover info**). These options let you view a part of the edge properties
+     more quickly without opening the full [properties dialog](#view-node-and-edge-properties).
+
+### Save and manage themes
+
+Themes are stored settings for the node and edge appearance. They are stored
+per graph. You can switch between multiple themes to highlight different
+aspects of the graph data.
+
+1. If the **Legend** panel is closed, click the **Legend** button in the
+   top right corner.
+2. Open the drop-down menu at the top of the **Legend** panel.
+3. To save visual customizations as a new theme, click **Add new theme**.
+4. Enter a **Name** and optionally a **Description**.
+5. Leave **Start with** set to **Current theme** to use the current settings.
+6. Click **Save**. After additional customizations, you can save the changes to
+   the theme you created via the drop-down menu ({{< icon "save" >}}).
+7. You can revert unsaved customizations of a specific collection via the
+   collection list or customization panel ({{< icon "reset" >}}), or revert all
+   unsaved changes via the theme drop-down menu ({{< icon "reset-all" >}}).
+8. To switch to a different theme, click its name in the theme drop-down menu.
+
+### Select all nodes or edges of a type
+
+1. Click the **Legend** button in the top right to open the **Legend** panel
    if it's closed.
-3. Adjust the styling for nodes or edges:
-   - Select a **Label Attribute** to display a custom top-level field
-     (e.g. `name` or `type`) instead of `_id`.
-   - Assign a specific **Color** to highlight and distinguish elements.
-   - Adjust how transparent elements are with the **Opacity**.
-   - Set the **Line Thickness** (edges only).
-   - Choose different **Arrowhead Styles** (edges only).
-4. You can also do the following:
-   - Clear the styling modifications.
-   - See the number of nodes respectively edges on the canvas (by collection).
-
-![A screenshot of the Customization panel with a popover dialog for edge styling open](../../images/graph-visualizer-customization.png)
+2. Select the **Nodes (#)** or **Edges (#)** tab.
+3. You can see the number of nodes and edges (per collection) that are on the canvas.
+4. You can sort the collection list by the number instead of name by clicking the icon
+   in the filter input field ({{< icon "sort-by" >}}) and selecting **Count**.
+5. Click the icon ({{< icon "select-all" >}}) next to the number to select all
+   nodes or edges that belong to the respective collection. This clears any
+   previous selection.
diff --git a/site/content/images/graph-visualizer-add-nodes.png b/site/content/images/graph-visualizer-add-nodes.png
index c0a23ed677..2644a3cba4 100644
Binary files a/site/content/images/graph-visualizer-add-nodes.png and b/site/content/images/graph-visualizer-add-nodes.png differ
diff --git a/site/content/images/graph-visualizer-create-edge.png b/site/content/images/graph-visualizer-create-edge.png
index cb3e497b8e..a7dcfc7313 100644
Binary files a/site/content/images/graph-visualizer-create-edge.png and b/site/content/images/graph-visualizer-create-edge.png differ
diff --git a/site/content/images/graph-visualizer-customization.png b/site/content/images/graph-visualizer-customization.png
index 0c808278ae..5605b8360a 100644
Binary files a/site/content/images/graph-visualizer-customization.png and b/site/content/images/graph-visualizer-customization.png differ
diff --git a/site/content/images/graph-visualizer-menu-canvas-action.png b/site/content/images/graph-visualizer-menu-canvas-action.png
index bea7643755..831b1d387f 100644
Binary files a/site/content/images/graph-visualizer-menu-canvas-action.png and b/site/content/images/graph-visualizer-menu-canvas-action.png differ
diff --git a/site/content/images/graph-visualizer-node-properties.png b/site/content/images/graph-visualizer-node-properties.png
index 83a8f731a0..e4bea6dd20 100644
Binary files a/site/content/images/graph-visualizer-node-properties.png and b/site/content/images/graph-visualizer-node-properties.png differ
diff --git a/site/content/images/graph-visualizer-queries.png b/site/content/images/graph-visualizer-queries.png
index dbee79d2ec..7e4057d5da 100644
Binary files a/site/content/images/graph-visualizer-queries.png and b/site/content/images/graph-visualizer-queries.png differ
diff --git a/site/content/images/graph-visualizer.png b/site/content/images/graph-visualizer.png
index 52e3e30eaf..4bdee4f799 100644
Binary files a/site/content/images/graph-visualizer.png and b/site/content/images/graph-visualizer.png differ
diff --git a/site/content/images/icons/caret-left.svg b/site/content/images/icons/caret-left.svg
new file mode 100644
index 0000000000..04c267bdc2
--- /dev/null
+++ b/site/content/images/icons/caret-left.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/caret-right.svg b/site/content/images/icons/caret-right.svg
new file mode 100644
index 0000000000..5fef8a8723
--- /dev/null
+++ b/site/content/images/icons/caret-right.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/clear.svg b/site/content/images/icons/clear.svg
new file mode 100644
index 0000000000..a64d8dee58
--- /dev/null
+++ b/site/content/images/icons/clear.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="m2 2 20 20"></path><path d="M8.35 2.69A10 10 0 0 1 21.3 15.65"></path><path d="M19.08 19.08A10 10 0 1 1 4.92 4.92"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/delete.svg b/site/content/images/icons/delete.svg
new file mode 100644
index 0000000000..c9a6b955ba
--- /dev/null
+++ b/site/content/images/icons/delete.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M19.452 7.5H4.547a.5.5 0 00-.5.545l1.287 14.136A2 2 0 007.326 24h9.347a2 2 0 001.992-1.819L19.95 8.045a.5.5 0 00-.129-.382.5.5 0 00-.369-.163zm-9.2 13a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zm5 0a.75.75 0 01-1.5 0v-9a.75.75 0 011.5 0zM22 4h-4.75a.25.25 0 01-.25-.25V2.5A2.5 2.5 0 0014.5 0h-5A2.5 2.5 0 007 2.5v1.25a.25.25 0 01-.25.25H2a1 1 0 000 2h20a1 1 0 000-2zM9 3.75V2.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v1.25a.25.25 0 01-.25.25h-5.5A.25.25 0 019 3.75z"></path></g></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/download.svg b/site/content/images/icons/download.svg
new file mode 100644
index 0000000000..a2f286d021
--- /dev/null
+++ b/site/content/images/icons/download.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/duplicate.svg b/site/content/images/icons/duplicate.svg
new file mode 100644
index 0000000000..0e8aa6490f
--- /dev/null
+++ b/site/content/images/icons/duplicate.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/edit-square.svg b/site/content/images/icons/edit-square.svg
new file mode 100644
index 0000000000..1bc7f0eaad
--- /dev/null
+++ b/site/content/images/icons/edit-square.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></g></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/edit.svg b/site/content/images/icons/edit.svg
new file mode 100644
index 0000000000..860bab7fcb
--- /dev/null
+++ b/site/content/images/icons/edit.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/fit.svg b/site/content/images/icons/fit.svg
new file mode 100644
index 0000000000..96c8d4a592
--- /dev/null
+++ b/site/content/images/icons/fit.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="chakra-icon css-13otjrl" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 4h3c1.1 0 2 .9 2 2v2h-2V6h-3V4zM4 8V6h3V4H4c-1.1 0-2 .9-2 2v2h2zm16 8v2h-3v2h3c1.1 0 2-.9 2-2v-2h-2zM7 18H4v-2H2v2c0 1.1.9 2 2 2h3v-2zM18 8H6v8h12V8z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/rerun.svg b/site/content/images/icons/rerun.svg
new file mode 100644
index 0000000000..105e191dca
--- /dev/null
+++ b/site/content/images/icons/rerun.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M10.319,4.936a7.239,7.239,0,0,1,7.1,2.252,1.25,1.25,0,1,0,1.872-1.657A9.737,9.737,0,0,0,9.743,2.5,10.269,10.269,0,0,0,2.378,9.61a.249.249,0,0,1-.271.178l-1.033-.13A.491.491,0,0,0,.6,9.877a.5.5,0,0,0-.019.526l2.476,4.342a.5.5,0,0,0,.373.248.43.43,0,0,0,.062,0,.5.5,0,0,0,.359-.152l3.477-3.593a.5.5,0,0,0-.3-.844L5.15,10.172a.25.25,0,0,1-.2-.333A7.7,7.7,0,0,1,10.319,4.936Z"></path><path d="M23.406,14.1a.5.5,0,0,0,.015-.526l-2.5-4.329A.5.5,0,0,0,20.546,9a.489.489,0,0,0-.421.151l-3.456,3.614a.5.5,0,0,0,.3.842l1.848.221a.249.249,0,0,1,.183.117.253.253,0,0,1,.023.216,7.688,7.688,0,0,1-5.369,4.9,7.243,7.243,0,0,1-7.1-2.253,1.25,1.25,0,1,0-1.872,1.656,9.74,9.74,0,0,0,9.549,3.03,10.261,10.261,0,0,0,7.369-7.12.251.251,0,0,1,.27-.179l1.058.127a.422.422,0,0,0,.06,0A.5.5,0,0,0,23.406,14.1Z"></path></g></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/reset-all.svg b/site/content/images/icons/reset-all.svg
new file mode 100644
index 0000000000..2ce6116179
--- /dev/null
+++ b/site/content/images/icons/reset-all.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/reset.svg b/site/content/images/icons/reset.svg
new file mode 100644
index 0000000000..c7280681c6
--- /dev/null
+++ b/site/content/images/icons/reset.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.85355 2.14645C5.04882 2.34171 5.04882 2.65829 4.85355 2.85355L3.70711 4H9C11.4853 4 13.5 6.01472 13.5 8.5C13.5 10.9853 11.4853 13 9 13H5C4.72386 13 4.5 12.7761 4.5 12.5C4.5 12.2239 4.72386 12 5 12H9C10.933 12 12.5 10.433 12.5 8.5C12.5 6.567 10.933 5 9 5H3.70711L4.85355 6.14645C5.04882 6.34171 5.04882 6.65829 4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355L2.14645 4.85355C1.95118 4.65829 1.95118 4.34171 2.14645 4.14645L4.14645 2.14645C4.34171 1.95118 4.65829 1.95118 4.85355 2.14645Z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/run.svg b/site/content/images/icons/run.svg
new file mode 100644
index 0000000000..fdb9a8f624
--- /dev/null
+++ b/site/content/images/icons/run.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M8 5v14l11-7z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/save.svg b/site/content/images/icons/save.svg
new file mode 100644
index 0000000000..bd2f015bdd
--- /dev/null
+++ b/site/content/images/icons/save.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/select-all.svg b/site/content/images/icons/select-all.svg
new file mode 100644
index 0000000000..63faa72aa5
--- /dev/null
+++ b/site/content/images/icons/select-all.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/settings.svg b/site/content/images/icons/settings.svg
new file mode 100644
index 0000000000..2ead9c7514
--- /dev/null
+++ b/site/content/images/icons/settings.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M 15,8.77 V 7.17 L 13.06,6.53 12.61,5.44 13.49,3.6 12.36,2.47 10.55,3.38 9.46,2.93 8.77,1.01 H 7.17 L 6.54,2.95 5.43,3.4 3.59,2.52 2.46,3.65 3.37,5.46 2.92,6.55 1,7.23 v 1.59 l 1.94,0.64 0.45,1.09 -0.88,1.84 1.13,1.13 1.81,-0.91 1.09,0.45 0.69,1.92 h 1.59 l 0.63,-1.94 1.11,-0.45 1.84,0.88 1.13,-1.13 L 12.61,10.53 13.08,9.44 15,8.75 Z M 8,11 C 6.34,11 5,9.66 5,8 5,6.34 6.34,5 8,5 c 1.66,0 3,1.34 3,3 0,1.66 -1.34,3 -3,3 z"></path>
+</svg>
diff --git a/site/content/images/icons/sort-by.svg b/site/content/images/icons/sort-by.svg
new file mode 100644
index 0000000000..03e32dac5d
--- /dev/null
+++ b/site/content/images/icons/sort-by.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 16H4l6 6V2H8zm6-11v17h2V8h4l-6-6z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/swap.svg b/site/content/images/icons/swap.svg
new file mode 100644
index 0000000000..1fdf5372b1
--- /dev/null
+++ b/site/content/images/icons/swap.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3 5 6.99h3V14h2V6.99h3L9 3z"></path></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/zoom-in.svg b/site/content/images/icons/zoom-in.svg
new file mode 100644
index 0000000000..4ec4fb63c8
--- /dev/null
+++ b/site/content/images/icons/zoom-in.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line><line x1="11" x2="11" y1="8" y2="14"></line><line x1="8" x2="14" y1="11" y2="11"></line></svg>
\ No newline at end of file
diff --git a/site/content/images/icons/zoom-out.svg b/site/content/images/icons/zoom-out.svg
new file mode 100644
index 0000000000..e8dc090236
--- /dev/null
+++ b/site/content/images/icons/zoom-out.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line><line x1="8" x2="14" y1="11" y2="11"></line></svg>
\ No newline at end of file
diff --git a/site/themes/arangodb-docs-theme/layouts/shortcodes/icon.html b/site/themes/arangodb-docs-theme/layouts/shortcodes/icon.html
new file mode 100644
index 0000000000..d45f7c345c
--- /dev/null
+++ b/site/themes/arangodb-docs-theme/layouts/shortcodes/icon.html
@@ -0,0 +1,10 @@
+<span class="inline-icon" aria-hidden="true">
+  {{- $iconName := .Get 0 }}
+  {{- $iconPath := printf "content/images/icons/%s.svg" $iconName }}
+  {{- $iconSvg := readFile $iconPath }}
+  {{- if $iconSvg }}
+    {{- $iconSvg | safeHTML }}
+  {{- else }}
+    {{- errorf "Icon '%v' not found for '%v'" $iconName .Page.File.Path }}
+  {{- end -}}
+</span>
\ No newline at end of file
diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css
index 09be3245c1..743724c243 100644
--- a/site/themes/arangodb-docs-theme/static/css/theme.css
+++ b/site/themes/arangodb-docs-theme/static/css/theme.css
@@ -315,6 +315,19 @@ img {
     margin-bottom: 20px;
 }
 
+.inline-icon {
+    display: inline-block;
+    width: var(--TYPOGRAPHY-BODY-TEXT);
+    height: var(--TYPOGRAPHY-BODY-TEXT);
+    margin: 0 .1rem;
+    position: relative;
+    top: .2rem;
+}
+
+.inline-icon svg {
+    margin: 0;
+}
+
 /* end Images */
 
 /* Tables */