diff --git a/src/TwigComponent/CHANGELOG.md b/src/TwigComponent/CHANGELOG.md
index 34d110e3b36..9b41f60cf73 100644
--- a/src/TwigComponent/CHANGELOG.md
+++ b/src/TwigComponent/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.23.0
+
+-  Allow to use `:` as value separator in `props` tag
+
 ## 2.20.0
 
 -  Add Anonymous Component support for 3rd-party bundles #2019
diff --git a/src/TwigComponent/src/Twig/PropsTokenParser.php b/src/TwigComponent/src/Twig/PropsTokenParser.php
index fc3b66405c3..9ff6aa47fb9 100644
--- a/src/TwigComponent/src/Twig/PropsTokenParser.php
+++ b/src/TwigComponent/src/Twig/PropsTokenParser.php
@@ -24,21 +24,20 @@ class PropsTokenParser extends AbstractTokenParser
 {
     public function parse(Token $token): Node
     {
-        $parser = $this->parser;
-        $stream = $parser->getStream();
+        $stream = $this->parser->getStream();
 
         $names = [];
         $values = [];
         while (!$stream->nextIf(Token::BLOCK_END_TYPE)) {
             $name = $stream->expect(Token::NAME_TYPE)->getValue();
 
-            if ($stream->nextIf(Token::OPERATOR_TYPE, '=')) {
-                $values[$name] = $parser->getExpressionParser()->parseExpression();
+            if ($stream->nextIf(Token::OPERATOR_TYPE, '=') || $stream->nextIf(Token::PUNCTUATION_TYPE, ':')) {
+                $values[$name] = $this->parser->getExpressionParser()->parseExpression();
             }
 
             $names[] = $name;
 
-            if (!$stream->nextIf(Token::PUNCTUATION_TYPE)) {
+            if (!$stream->nextIf(Token::PUNCTUATION_TYPE, ',')) {
                 $stream->expect(Token::BLOCK_END_TYPE);
                 break;
             }
diff --git a/src/TwigComponent/tests/Integration/Twig/ComponentPropsParserTest.php b/src/TwigComponent/tests/Integration/Twig/ComponentPropsParserTest.php
index 6f7ac926df3..8fa65e003d8 100644
--- a/src/TwigComponent/tests/Integration/Twig/ComponentPropsParserTest.php
+++ b/src/TwigComponent/tests/Integration/Twig/ComponentPropsParserTest.php
@@ -75,6 +75,13 @@ public static function providePropsData(): iterable
             ],
             ' foo ',
         ];
+        yield 'One Prop with value comma using : as value separator' => [
+            '{% props propA:123 %} foo ',
+            [
+                'propA' => 123,
+            ],
+            ' foo ',
+        ];
         yield 'One Prop without value' => [
             '{% props propA %} foo ',
             [
@@ -98,6 +105,14 @@ public static function providePropsData(): iterable
             ],
             ' foo ',
         ];
+        yield 'All Props with values comma using : as value separator' => [
+            '{% props propA:1, propB:2 %} foo ',
+            [
+                'propA' => 1,
+                'propB' => 2,
+            ],
+            ' foo ',
+        ];
         yield 'Some Props with values' => [
             '{% props propA, propB=2 %} foo ',
             [
@@ -106,6 +121,14 @@ public static function providePropsData(): iterable
             ],
             ' foo ',
         ];
+        yield 'Some Props with values comma using : as value separator' => [
+            '{% props propA, propB:2 %} foo ',
+            [
+                'propA' => null,
+                'propB' => 2,
+            ],
+            ' foo ',
+        ];
         yield 'One Prop with value and trailing comma' => [
             '{% props propA=123, %} foo ',
             [
@@ -113,6 +136,13 @@ public static function providePropsData(): iterable
             ],
             ' foo ',
         ];
+        yield 'One Prop with value and trailing comma using : as value separator' => [
+            '{% props propA:123, %} foo ',
+            [
+                'propA' => 123,
+            ],
+            ' foo ',
+        ];
         yield 'One Prop without value and trailing comma' => [
             '{% props propA, %} foo ',
             [
@@ -136,6 +166,14 @@ public static function providePropsData(): iterable
             ],
             ' foo ',
         ];
+        yield 'All Props with values and trailing comma using : as value separator' => [
+            '{% props propA:1, propB:2, %} foo ',
+            [
+                'propA' => 1,
+                'propB' => 2,
+            ],
+            ' foo ',
+        ];
         yield 'Some Props with values and trailing comma' => [
             '{% props propA, propB=2, %} foo ',
             [
@@ -144,5 +182,13 @@ public static function providePropsData(): iterable
             ],
             ' foo ',
         ];
+        yield 'Some Props with values and trailing comma using : as value separator' => [
+            '{% props propA, propB:2, %} foo ',
+            [
+                'propA' => null,
+                'propB' => 2,
+            ],
+            ' foo ',
+        ];
     }
 }