diff --git a/examples/bootstrap5/app.py b/examples/bootstrap5/app.py
index acb85b23..5e7441d5 100644
--- a/examples/bootstrap5/app.py
+++ b/examples/bootstrap5/app.py
@@ -287,6 +287,11 @@ def new_message():
     return 'Here is the new message page. Return to <a href="/table">table</a>.'
 
 
+@app.route('/image')
+def test_image():
+    return render_template('image.html')
+
+
 @app.route('/icon')
 def test_icon():
     return render_template('icon.html')
diff --git a/examples/bootstrap5/static/rectangle-256x64.png b/examples/bootstrap5/static/rectangle-256x64.png
new file mode 100644
index 00000000..5a2763de
Binary files /dev/null and b/examples/bootstrap5/static/rectangle-256x64.png differ
diff --git a/examples/bootstrap5/static/rectangle-256x64.svg b/examples/bootstrap5/static/rectangle-256x64.svg
new file mode 100644
index 00000000..ea2403f0
--- /dev/null
+++ b/examples/bootstrap5/static/rectangle-256x64.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="64"
+   viewBox="0 0 67.733331 8.4666667"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="rectangle-256x64.svg"
+   inkscape:export-filename="rectangle-256x64.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showborder="false"
+     inkscape:zoom="2.5175"
+     inkscape:cx="200"
+     inkscape:cy="16.087388"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:export-bgcolor="#ffffff00" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="rect1"
+       style="fill:#bbbbbb;fill-opacity:1;stroke:none;stroke-width:0.632888"
+       d="M -9.9999999e-7,-4.2333332 H 67.73333 V 12.7 H -9.9999999e-7 Z"
+       sodipodi:nodetypes="ccccc" />
+    <text
+       xml:space="preserve"
+       style="font-size:4.23333px;line-height:1.25;font-family:quo;-inkscape-font-specification:quo;text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
+       x="33.780884"
+       y="5.3640127"
+       id="text1"><tspan
+         sodipodi:role="line"
+         id="tspan1"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.23333px;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
+         x="33.780884"
+         y="5.3640127">256 × 64 px</tspan></text>
+  </g>
+</svg>
diff --git a/examples/bootstrap5/templates/image.html b/examples/bootstrap5/templates/image.html
new file mode 100644
index 00000000..da6c5551
--- /dev/null
+++ b/examples/bootstrap5/templates/image.html
@@ -0,0 +1,44 @@
+{% extends 'base.html' %}
+{% from 'bootstrap5/utils.html' import render_image, render_figure %}
+
+{% block content %}
+See also <a href="https://getbootstrap.com/docs/5.3/content/images/">https://getbootstrap.com/docs/5.3/content/images/</a>
+and <a href="https://getbootstrap.com/docs/5.3/content/figures/">https://getbootstrap.com/docs/5.3/content/figures/</a>.
+
+<h2>Image</h2>
+<pre>{% raw %}{{ render_image(url_for('static', filename='rectangle-256x64.png'), alt='url_for') }}{% endraw %}</pre>
+Output: {{ render_image(url_for('static', filename='rectangle-256x64.png'), alt='url_for') }}
+
+<h2>Thumbnail</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='thumb', corner='thumbnail') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='thumb', corner='thumbnail') }}
+
+<h2>Image fluid</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='fluid', fluid=True) }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='fluid', fluid=True) }}
+
+<h2>Aligned image</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='center', text_align='center') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='center', text_align='center') }}
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='end', text_align='end') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='end', text_align='end') }}
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='mx-auto', mx_auto=True) }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='mx-auto', mx_auto=True) }}
+
+<h2>Rounded image</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='rounded', corner='rounded') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='rounded', corner='rounded') }}
+
+<h2>Float image</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='float-start', float='start') }}
+{{ render_image('static/rectangle-256x64.png', alt='float-end', float='end') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='float-start', float='start') }}{{ render_image('static/rectangle-256x64.png', alt='float-end', float='end') }}
+
+<h2>Figure</h2>
+<pre>{% raw %}{{ render_figure('static/rectangle-256x64.png', alt='rounded', caption='A caption for the above image.', corner='rounded') }}{% endraw %}</pre>
+Output: {{ render_figure('static/rectangle-256x64.png', alt='rounded', caption='A caption for the above image.', corner='rounded') }}
+<pre>{% raw %}{{ render_figure('static/rectangle-256x64.png', alt='thumb', caption='A caption for the above image.', corner='thumbnail') }}{% endraw %}</pre>
+Output: {{ render_figure('static/rectangle-256x64.png', alt='thumb', caption='A caption for the above image.', corner='thumbnail') }}
+<pre>{% raw %}{{ render_figure('static/rectangle-256x64.png', alt='end', caption='A caption for the above image.', text_align='end') }}{% endraw %}</pre>
+Output: {{ render_figure('static/rectangle-256x64.png', alt='end', caption='A caption for the above image.', text_align='end') }}
+{% endblock %}
diff --git a/examples/bootstrap5/templates/index.html b/examples/bootstrap5/templates/index.html
index f179ed36..2be8d0bc 100644
--- a/examples/bootstrap5/templates/index.html
+++ b/examples/bootstrap5/templates/index.html
@@ -10,6 +10,7 @@ <h1>Bootstrap-Flask Demo Application</h1>
     <li><a href="{{ url_for('test_pagination') }}">Pagination</a></li>
     <li><a href="{{ url_for('test_flash') }}">Flash Messages</a></li>
     <li><a href="{{ url_for('test_table') }}">Table</a></li>
+    <li><a href="{{ url_for('test_image') }}">Image</a></li>
     <li><a href="{{ url_for('test_icon') }}">Icon</a></li>
     <li><a href="{{ url_for('test_icons') }}">Icons</a></li>
 </ul>
diff --git a/flask_bootstrap/templates/bootstrap5/utils.html b/flask_bootstrap/templates/bootstrap5/utils.html
index 98aab6bf..8c49f7f9 100644
--- a/flask_bootstrap/templates/bootstrap5/utils.html
+++ b/flask_bootstrap/templates/bootstrap5/utils.html
@@ -38,3 +38,31 @@
     {% endif -%}
     {% endwith -%}
 {% endmacro -%}
+
+
+{% macro render_image(src, alt, fluid=False, corner=None, text_align=None,
+    float=None, mx_auto=False) -%}
+    {%- if text_align -%}
+    <div class="text-{{ text_align }}">
+    {%- endif -%}
+    <img src="{{ src }}" alt="{{ alt }}"
+    {%- if fluid or float or mx_auto or corner %} class="
+        {%- if fluid %} img-fluid{% endif -%}
+        {%- if float %} float-{{ float }}{% endif -%}
+        {%- if mx_auto %} mx-auto d-block{% endif -%}
+        {%- if corner == 'thumbnail' %} img-thumbnail
+        {%- elif corner == 'rounded' %} rounded{% endif -%}"
+    {%- endif %}>
+    {%- if text_align -%}
+    </div>
+    {%- endif -%}
+{%- endmacro -%}
+
+{% macro render_figure(src, alt, caption, corner=None, text_align=None) -%}
+    <figure class="figure">
+    <img src="{{ src }}" alt="{{ alt }}" class="figure-img img-fluid
+        {%- if corner == 'thumbnail' %} img-thumbnail
+        {%- elif corner == 'rounded' %} rounded{% endif -%}">
+    <figcaption class="figure-caption{% if text_align %} text-{{ text_align }}{% endif %}">{{ caption }}</figcaption>
+    </figure>
+{%- endmacro -%}