diff --git a/FORMATTING_GUIDE.md b/FORMATTING_GUIDE.md
index c39ecaf996..ac15540f4f 100644
--- a/FORMATTING_GUIDE.md
+++ b/FORMATTING_GUIDE.md
@@ -12,6 +12,7 @@ This guide provides an overview of the formatted elements commonly used in the O
* [Dashes](#dashes)
* [Horizontal rule](#horizontal-rule)
* [Images](#images)
+ * [Images in line with text](#images-in-line-with-text)
* [Labels](#labels)
* [Links](#links)
* [Lists](#lists)
@@ -150,6 +151,14 @@ Do not place an image next to text or insert artificial line breaks using `
`
If the image is under a list item, place it on a new line with a tab. For more examples, see [Lists with code snippets or images](#lists-with-code-snippets-or-images).
+### Images in line with text
+
+When describing an icon, use the icon's name followed by an inline image in parentheses. Insert the image in line with text using the `nomarkdown` extension and an HTML image:
+
+```
+Choose the play icon ({::nomarkdown}{:/}) on the top right of the request.
+```
+
## Labels
You can use the following labels:
diff --git a/_dashboards/run-queries.md b/_dashboards/run-queries.md
index efe9561cb7..b29068952f 100644
--- a/_dashboards/run-queries.md
+++ b/_dashboards/run-queries.md
@@ -39,7 +39,7 @@ OpenSearch provides autocomplete suggestions for fields, indexes and their alias
## Sending the request
-To send a query to OpenSearch, select the query by placing the cursor anywhere in the query text. Then choose the triangle on the top right of the request or press `Ctrl/Cmd+Enter`:
+To send a query to OpenSearch, select the query by placing the cursor anywhere in the query text. Then choose the play icon ({::nomarkdown}{:/}) on the upper right of the request or press `Ctrl/Cmd+Enter`:
@@ -79,17 +79,17 @@ GET shakespeare/_search
If you paste a `curl` command directly into the console, the command is automatically converted into the format the console uses.
-To import a query in cURL format, select the query, then select the wrench icon and choose **Copy as cURL**:
+To import a query in cURL format, select the query, select the wrench icon ({::nomarkdown}{:/}), and choose **Copy as cURL**:
## Viewing documentation
-To view the OpenSearch documentation, select the wrench icon, and choose **Open documentation**.
+To view the OpenSearch documentation, select the wrench icon ({::nomarkdown}{:/}) and choose **Open documentation**.
## Auto indenting
-To use auto indent, select the queries that you want to format, select the wrench icon, and choose **Auto indent**.
+To use auto indent, select the queries that you want to format, select the wrench icon ({::nomarkdown}{:/}), and choose **Auto indent**.
Auto indenting a collapsed query expands it.
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index b253d6d622..4a0f89b1ba 100755
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -128,6 +128,12 @@ img {
box-shadow: none;
}
+.inline-icon {
+ @extend .no-border;
+ height: 1.2rem;
+ vertical-align: middle;
+}
+
.img-border {
border: 1px solid $grey-lt-300;
}
diff --git a/images/dev-tools/play-icon.png b/images/dev-tools/play-icon.png
new file mode 100644
index 0000000000..80345f65bf
Binary files /dev/null and b/images/dev-tools/play-icon.png differ
diff --git a/images/dev-tools/wrench-icon.png b/images/dev-tools/wrench-icon.png
new file mode 100644
index 0000000000..bb7dc988cf
Binary files /dev/null and b/images/dev-tools/wrench-icon.png differ