diff --git a/app/helpers/colors_helper.rb b/app/helpers/colors_helper.rb
index ac61eaa323ff..a049b8a5abc0 100644
--- a/app/helpers/colors_helper.rb
+++ b/app/helpers/colors_helper.rb
@@ -49,33 +49,41 @@ def selected_color(colored_thing)
   ##
   def color_css
     Color.find_each do |color|
-      set_background_colors_for class_name: ".__hl_inline_color_#{color.id}_dot::before", hexcode: color.hexcode
-      set_foreground_colors_for class_name: ".__hl_inline_color_#{color.id}_text", hexcode: color.hexcode
+      set_background_colors_for(class_name: ".#{hl_inline_class('color', color)}_dot::before", color:)
+      set_foreground_colors_for(class_name: ".#{hl_inline_class('color', color)}_text", color:)
     end
   end
 
   #
   # Styles to display the color of attributes (type, status etc.) for example in the WP view
   ##
-  def resource_color_css(name, scope)
+  def resource_color_css(name, scope, inline_foreground: false)
     scope.includes(:color).find_each do |entry|
       color = entry.color
 
       if color.nil?
-        concat ".__hl_inline_#{name}_#{entry.id}::before { display: none }\n"
+        concat ".#{hl_inline_class(name, entry)}::before { display: none }\n"
         next
       end
 
-      if name === "type"
-        set_foreground_colors_for class_name: ".__hl_inline_#{name}_#{entry.id}", hexcode: color.hexcode
+      if inline_foreground
+        set_foreground_colors_for(class_name: ".#{hl_inline_class(name, entry)}", color:)
       else
-        set_background_colors_for class_name: ".__hl_inline_#{name}_#{entry.id}::before", hexcode: color.hexcode
+        set_background_colors_for(class_name: ".#{hl_inline_class(name, entry)}::before", color:)
       end
 
-      set_background_colors_for class_name: ".__hl_background_#{name}_#{entry.id}", hexcode: color.hexcode
+      set_background_colors_for(class_name: ".#{hl_background_class(name, entry)}", color:)
     end
   end
 
+  def hl_inline_class(name, model)
+    "__hl_inline_#{name}_#{model.id}"
+  end
+
+  def hl_background_class(name, model)
+    "__hl_background_#{name}_#{model.id}"
+  end
+
   def icon_for_color(color, options = {})
     return unless color
 
@@ -90,10 +98,10 @@ def color_by_variable(variable)
     DesignColor.find_by(variable:)&.hexcode
   end
 
-  def set_background_colors_for(class_name:, hexcode:)
+  def set_background_colors_for(class_name:, color:)
     mode = User.current.pref.theme.split("_", 2)[0]
 
-    concat "#{class_name} { #{default_color_styles(hexcode)} }"
+    concat "#{class_name} { #{default_color_styles(color.hexcode)} }"
     if mode == "dark"
       concat "#{class_name} { #{default_variables_dark} }"
       concat "#{class_name} { #{highlighted_background_dark} }"
@@ -103,10 +111,10 @@ def set_background_colors_for(class_name:, hexcode:)
     end
   end
 
-  def set_foreground_colors_for(class_name:, hexcode:)
+  def set_foreground_colors_for(class_name:, color:)
     mode = User.current.pref.theme.split("_", 2)[0]
 
-    concat "#{class_name} { #{default_color_styles(hexcode)} }"
+    concat "#{class_name} { #{default_color_styles(color.hexcode)} }"
     if mode == "dark"
       concat "#{class_name} { #{default_variables_dark} }"
       concat "#{class_name} { #{highlighted_foreground_dark} }"
diff --git a/app/views/highlighting/styles.css.erb b/app/views/highlighting/styles.css.erb
index f140ef23ff0b..8f981cd72f6e 100644
--- a/app/views/highlighting/styles.css.erb
+++ b/app/views/highlighting/styles.css.erb
@@ -1,7 +1,10 @@
 <%# Highlightable resources %>
 <%= resource_color_css('status', ::Status) %>
 <%= resource_color_css('priority', ::IssuePriority) %>
-<%= resource_color_css('type', ::Type) %>
+<%= resource_color_css('type', ::Type, inline_foreground: true) %>
+<%# Color coded icons %>
+<%= resource_color_css('life_cycle_step_definition', Project::LifeCycleStepDefinition, inline_foreground: true) %>
+
 <%= color_css() %>
 
 <%# Overdue tasks %>
diff --git a/frontend/src/global_styles/layout/_colors.sass b/frontend/src/global_styles/layout/_colors.sass
index 915cc7fbdb39..83b3f1db6698 100644
--- a/frontend/src/global_styles/layout/_colors.sass
+++ b/frontend/src/global_styles/layout/_colors.sass
@@ -95,8 +95,8 @@
   font-weight: var(--base-text-weight-bold)
 
 // Inline: all except type
-[class^='__hl_inline_']:not([class^='__hl_inline_type']),
-[class*=' __hl_inline_']:not([class*='__hl_inline_type'])
+[class^='__hl_inline_']:not([class^='__hl_inline_type'], [class^='__hl_inline_life_cycle_step_definition']),
+[class*=' __hl_inline_']:not([class*='__hl_inline_type'], [class*='__hl_inline_life_cycle_step_definition'])
   &::before
     content: ''
     display: inline-block
diff --git a/spec/helpers/colors_helper_spec.rb b/spec/helpers/colors_helper_spec.rb
new file mode 100644
index 000000000000..b5c0236cd221
--- /dev/null
+++ b/spec/helpers/colors_helper_spec.rb
@@ -0,0 +1,45 @@
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2024 the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+# ++
+
+require "spec_helper"
+
+RSpec.describe ColorsHelper do
+  let(:model) { Data.define(:id).new(5) }
+
+  describe "#hl_inline_class" do
+    it "returns the correct class name" do
+      expect(helper.hl_inline_class("foo_bar", model)).to eq("__hl_inline_foo_bar_5")
+    end
+  end
+
+  describe "#hl_background_class" do
+    it "returns the correct class name" do
+      expect(helper.hl_background_class("foo_bar", model)).to eq("__hl_background_foo_bar_5")
+    end
+  end
+end