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..6d7ca7b2
--- /dev/null
+++ b/examples/bootstrap5/templates/image.html
@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+{% from 'bootstrap5/utils.html' import render_image %}
+
+{% block content %}
+<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>Centered image</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='center', center=True) }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='center', center=True) }}
+<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') }}
+{% 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..bb05591f 100644
--- a/flask_bootstrap/templates/bootstrap5/utils.html
+++ b/flask_bootstrap/templates/bootstrap5/utils.html
@@ -38,3 +38,22 @@
     {% endif -%}
     {% endwith -%}
 {% endmacro -%}
+
+
+{% macro render_image(src, alt, fluid=False, corner=None, center=False,
+    float=None, mx_auto=None) -%}
+    {%- if center -%}
+    <div class="text-center">
+    {%- 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 center -%}
+    </div>
+    {%- endif -%}
+{%- endmacro -%}