diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 3c31b0318..846e3adc9 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1191,28 +1191,59 @@ input.autocomplete.ajax-loading {
 }
 
 div.flash {margin-top: 8px;}
+div.flash svg.icon-svg, #errorExplanation svg.icon-svg, .conflict svg.icon-svg {
+  margin-right: 4px;
+  margin-left: -26px;
+}
 
 div.flash.error, #errorExplanation {
-  background: url(/exclamation.png) 8px 50% no-repeat;
   background-color: #ffe3e3;
   border-color: #d88;
   color: #880000;
 }
+div.flash.error:not(:has(svg)), #errorExplanation:not(:has(svg)) {
+  background: url(/exclamation.png) 8px 50% no-repeat #ffe3e3;
+}
+div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg {
+  stroke: #880000;
+}
+
+#errorExplanation:has(svg) {
+  position: relative;
+}
+
+#errorExplanation:has(svg) > svg.icon-svg {
+  position: absolute;
+  top: 50%;
+  bottom: 50%;
+  margin-left: -24px;
+  margin-top: -9px;
+}
 
 div.flash.notice {
-  background: url(/true.png) 8px 5px no-repeat;
   background-color: #dfffdf;
   border-color: #9fcf9f;
   color: #005f00;
 }
+div.flash.notice:not(:has(svg)) {
+  background: url(/true.png) 8px 50% no-repeat #dfffdf;
+}
+div.flash.notice svg.icon-svg {
+  stroke: #005f00;
+}
 
 div.flash.warning, .conflict {
-  background: url(/warning.png) 8px 5px no-repeat;
   background-color: #F3EDD1;
   border-color: #eadbbc;
   color: #A6750C;
   text-align: left;
 }
+div.flash.warning:not(:has(svg)), .conflict:not(:has(svg)) {
+  background: url(/warning.png) 8px 5px no-repeat #F3EDD1;
+}
+div.flash.warning svg.icon-svg, .conflict svg.icon-svg {
+  stroke: #A6750C;
+}
 
 .nodata, .warning {
   text-align: center;
diff --git a/app/assets/stylesheets/rtl.css b/app/assets/stylesheets/rtl.css
index 83b08b23b..550071462 100644
--- a/app/assets/stylesheets/rtl.css
+++ b/app/assets/stylesheets/rtl.css
@@ -241,16 +241,21 @@ input.autocomplete {
   padding: 4px 30px 4px 4px;
 }
 
-div.flash.error, #errorExplanation {
-  background: url(/exclamation.png) right 8px top 50% no-repeat;
+div.flash svg.icon-svg, #errorExplanation svg.icon-svg {
+  margin-right: -26px;
+  margin-left: 4px;
 }
 
-div.flash.notice {
-  background: url(/true.png) right 8px top 5px no-repeat;
+div.flash.error:not(:has(svg)), #errorExplanation:not(:has(svg)) {
+  background: url(/exclamation.png) right 8px top 50% no-repeat #ffe3e3;
 }
 
-div.flash.warning, .conflict {
-  background: url(/warning.png) right 8px top 5px no-repeat;
+div.flash.notice:not(:has(svg)) {
+  background: url(/true.png) right 8px top 5px no-repeat #dfffdf;
+}
+
+div.flash.warning:not(:has(svg)), .conflict {
+  background: url(/warning.png) right 8px top 5px no-repeat #F3EDD1;
   text-align:right;
 }
 
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 7e8c764dd..26a1941ac 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -511,7 +511,7 @@ module ApplicationHelper
   def render_flash_messages
     s = +''
     flash.each do |k, v|
-      s << content_tag('div', v.html_safe, :class => "flash #{k}", :id => "flash_#{k}")
+      s << content_tag('div', notice_icon(k) + v.html_safe, :class => "flash #{k}", :id => "flash_#{k}")
     end
     s.html_safe
   end
@@ -1569,7 +1569,9 @@ module ApplicationHelper
   def render_error_messages(errors)
     html = +""
     if errors.present?
-      html << "<div id='errorExplanation'><ul>\n"
+      html << "<div id='errorExplanation'>\n"
+      html << notice_icon('error')
+      html << "<ul>\n"
       errors.each do |error|
         html << "<li>#{h error}</li>\n"
       end
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
index 473f8f780..948f68752 100644
--- a/app/helpers/icons_helper.rb
+++ b/app/helpers/icons_helper.rb
@@ -79,6 +79,17 @@ module IconsHelper
     sprite_icon(icon_name, name, size: 14)
   end
 
+  def notice_icon(type, **options)
+    icon_name = case type
+                when 'notice'
+                  'checked'
+                when 'warning', 'error'
+                  'warning'
+                end
+
+    sprite_icon(icon_name, **options)
+  end
+
   private
 
   def svg_sprite_icon(icon_name, size: DEFAULT_ICON_SIZE, sprite: DEFAULT_SPRITE, css_class: nil)
diff --git a/app/helpers/settings_helper.rb b/app/helpers/settings_helper.rb
index 1fb57b2d7..39a836a03 100644
--- a/app/helpers/settings_helper.rb
+++ b/app/helpers/settings_helper.rb
@@ -48,7 +48,11 @@ module SettingsHelper
     errors.each do |name, message|
       s << content_tag('li', content_tag('b', l("setting_#{name}")) + " " + message)
     end
-    content_tag('div', content_tag('ul', s), :id => 'errorExplanation')
+
+    h = ''.html_safe
+    h << notice_icon('error')
+    h << content_tag('ul', s)
+    content_tag('div', h, :id => 'errorExplanation')
   end
 
   def setting_value(setting)
diff --git a/app/views/common/error.html.erb b/app/views/common/error.html.erb
index 007063f9c..e1c6ef82f 100644
--- a/app/views/common/error.html.erb
+++ b/app/views/common/error.html.erb
@@ -1,7 +1,10 @@
 <h2><%= @status %></h2>
 
 <% if @message.present? %>
-  <p id="errorExplanation"><%= @message %></p>
+  <p id="errorExplanation">
+    <%= notice_icon('error') %>
+    <%= @message %>
+  </p>
 <% end %>
 
 <% if @archived_project && User.current.admin? %>
diff --git a/app/views/issue_relations/_form.html.erb b/app/views/issue_relations/_form.html.erb
index 97fe78cc6..b55e93eac 100644
--- a/app/views/issue_relations/_form.html.erb
+++ b/app/views/issue_relations/_form.html.erb
@@ -2,6 +2,7 @@
 <% if @unsaved_relations && @unsaved_relations.any? %>
   <% unsaved_relations_ids = @unsaved_relations.map(&:issue_to_id).compact.join(", ") %>
   <div id="errorExplanation">
+    <%= notice_icon('error') %>
     <ul>
       <% relation_error_messages(@unsaved_relations).each do |message| %>
         <li><%= message %></li>
diff --git a/app/views/issues/_conflict.html.erb b/app/views/issues/_conflict.html.erb
index ea4c35d7d..596584d14 100644
--- a/app/views/issues/_conflict.html.erb
+++ b/app/views/issues/_conflict.html.erb
@@ -1,4 +1,5 @@
 <div class="conflict">
+  <%= notice_icon('warning') %>
   <%= l(:notice_issue_update_conflict) %> 
   <% if @conflict_journals.present? %>
     <div class="conflict-details">
diff --git a/app/views/issues/bulk_edit.html.erb b/app/views/issues/bulk_edit.html.erb
index a379305be..b8bf87beb 100644
--- a/app/views/issues/bulk_edit.html.erb
+++ b/app/views/issues/bulk_edit.html.erb
@@ -2,6 +2,7 @@
 
 <% if @saved_issues && @unsaved_issues.present? %>
 <div id="errorExplanation">
+  <%= notice_icon('error') %>
   <span>
     <%= l(:notice_failed_to_save_issues,
         :count => @unsaved_issues.size,
@@ -241,6 +242,7 @@
 
 <% if @values_by_custom_field.present? %>
 <div class="flash warning">
+  <%= notice_icon('warning') %>
   <%= l(:warning_fields_cleared_on_bulk_edit) %>:<br />
   <%= safe_join(@values_by_custom_field.map {|field, ids| content_tag "span", "#{field.name} (#{ids.size})"}, ', ') %>
 </div>
diff --git a/app/views/repositories/annotate.html.erb b/app/views/repositories/annotate.html.erb
index db91ef913..e532714e4 100644
--- a/app/views/repositories/annotate.html.erb
+++ b/app/views/repositories/annotate.html.erb
@@ -51,7 +51,10 @@
 </table>
 </div>
 <% else %>
-<p id="errorExplanation"><%= @error_message %></p>
+<p id="errorExplanation">
+  <%= notice_icon('error') %>
+  <%= @error_message %>
+</p>
 <% end %>
 
 <% html_title(l(:button_annotate)) -%>
diff --git a/app/views/timelog/bulk_edit.html.erb b/app/views/timelog/bulk_edit.html.erb
index a4cb0c8af..4f496470a 100644
--- a/app/views/timelog/bulk_edit.html.erb
+++ b/app/views/timelog/bulk_edit.html.erb
@@ -2,6 +2,7 @@
 
 <% if @unsaved_time_entries.present? %>
 <div id="errorExplanation">
+  <%= notice_icon('error') %>
   <span>
     <%= l(:notice_failed_to_save_time_entries,
         :count => @unsaved_time_entries.size,