diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
index 7061ba1bc..214eed405 100644
--- a/playroom/snippets.tsx
+++ b/playroom/snippets.tsx
@@ -2900,8 +2900,8 @@ const alertSnippets = [
       title: fruit,
       description: "Description",
       asset: (
-        <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
-          <IconMobileDeviceRegular color={skinVars.colors.brand} />
+        <Circle backgroundColor={colors.brandLow} size={40}>
+          <IconMobileDeviceRegular color={colors.brand} />
         </Circle>
       ),
     }))}
@@ -3326,8 +3326,8 @@ const gridSnippets = [
   <GridItem>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 1"
@@ -3337,8 +3337,8 @@ const gridSnippets = [
   <GridItem rowSpan={2}>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 2"
@@ -3348,8 +3348,8 @@ const gridSnippets = [
   <GridItem>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 3"
@@ -3359,8 +3359,8 @@ const gridSnippets = [
   <GridItem columnSpan={2}>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 4"
@@ -3640,12 +3640,90 @@ const timerSnippets: Array<Snippet> = [
     },
 ];
 
+const ratingSnippets: Array<Snippet> = [
+    {
+        group: 'Rating',
+        name: 'InfoRating',
+        code: `
+          <InfoRating
+            aria-label="info rating"
+            size={24}
+            value={3}
+            count={6}
+            icon={{
+              ActiveIcon: IconStarFilled,
+              InactiveIcon: IconStarRegular,
+              color: colors.warning,
+            }}
+          />
+        `,
+    },
+    {
+        group: 'Rating',
+        name: 'Rating quantitative',
+        code: `
+          <Rating
+            aria-label="quantitative rating"
+            type="quantitative"
+            size={32}
+            defaultValue={3}
+            count={5}
+            icon={{
+              ActiveIcon: IconStarFilled,
+              InactiveIcon: IconStarRegular,
+              color: colors.controlActivated,
+            }}
+          />
+        `,
+    },
+    {
+        group: 'Rating',
+        name: 'Rating qualitative',
+        code: `
+          <Rating
+            aria-label="qualitative rating"
+            type="qualitative"
+            size={32}
+            valueLabels={["very bad", "bad", "regular", "good", "very good"]}
+            icons={[
+              {
+                  ActiveIcon: IconFaceSadFilled,
+                  InactiveIcon: IconFaceSadRegular,
+                  color: colors.errorHigh,
+              },
+              {
+                  ActiveIcon: IconFaceSlightlySadFilled,
+                  InactiveIcon: IconFaceSlightlySadRegular,
+                  color: colors.error,
+              },
+              {
+                  ActiveIcon: IconFaceNeutralFilled,
+                  InactiveIcon: IconFaceNeutralRegular,
+                  color: colors.warning,
+              },
+              {
+                  ActiveIcon: IconFaceHappyFilled,
+                  InactiveIcon: IconFaceHappyRegular,
+                  color: colors.success,
+              },
+              {
+                  ActiveIcon: IconFaceSuperHappyFilled,
+                  InactiveIcon: IconFaceSuperHappyRegular,
+                  color: colors.successHigh,
+              },
+            ]}
+          />
+        `,
+    },
+];
+
 export default [
     ...buttonSnippets,
     ...formSnippets,
     ...feedbackSnippets,
     ...skeletonSnippets,
     ...timerSnippets,
+    ...ratingSnippets,
     {group: 'Feedbacks', name: 'Snackbar', code: '<Snackbar message="Some message here" />'},
     ...layoutSnippets,
     {
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-custom-icons-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-custom-icons-1-snap.png
new file mode 100644
index 000000000..7bf5174ef
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-custom-icons-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-inverse-1-snap.png
new file mode 100644
index 000000000..d7806a29c
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-inverse-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-16-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-16-1-snap.png
new file mode 100644
index 000000000..ac28fb674
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-16-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-24-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-24-1-snap.png
new file mode 100644
index 000000000..2f2f7a5e3
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-24-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-48-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-48-1-snap.png
new file mode 100644
index 000000000..bc6498cf3
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-size-48-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-0-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-0-1-snap.png
new file mode 100644
index 000000000..ac28fb674
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-0-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-1-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-1-1-snap.png
new file mode 100644
index 000000000..600a97884
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-1-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-2-1-snap.png
new file mode 100644
index 000000000..d812baca9
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-2-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-3-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-3-1-snap.png
new file mode 100644
index 000000000..d6e26dce9
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-3-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-1-snap.png
new file mode 100644
index 000000000..2449ad5b6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-5-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-5-1-snap.png
new file mode 100644
index 000000000..2449ad5b6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-5-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-51-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-51-1-snap.png
new file mode 100644
index 000000000..32695fbf7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-4-51-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-5-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-5-1-snap.png
new file mode 100644
index 000000000..32695fbf7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-value-5-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-0-74-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-0-74-1-snap.png
new file mode 100644
index 000000000..237a38e93
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-0-74-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-0-75-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-0-75-1-snap.png
new file mode 100644
index 000000000..600a97884
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-0-75-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-1-24-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-1-24-1-snap.png
new file mode 100644
index 000000000..600a97884
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-1-24-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-4-25-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-4-25-1-snap.png
new file mode 100644
index 000000000..bb651013a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-4-25-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-4-5-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-4-5-1-snap.png
new file mode 100644
index 000000000..bb651013a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-info-rating-with-half-value-and-value-4-5-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-inverse-1-snap.png
new file mode 100644
index 000000000..2f90e3c58
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-inverse-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-1-snap.png
new file mode 100644
index 000000000..80e54e624
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-2-snap.png
new file mode 100644
index 000000000..5c6741efc
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-3-snap.png
new file mode 100644
index 000000000..d62a2bad0
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-4-snap.png
new file mode 100644
index 000000000..4ce878fd7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-5-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-5-snap.png
new file mode 100644
index 000000000..c40ac5827
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-5-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-6-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-6-snap.png
new file mode 100644
index 000000000..59fc23954
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-6-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-inverse-1-snap.png
new file mode 100644
index 000000000..e0f5717cf
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-inverse-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-inverse-2-snap.png
new file mode 100644
index 000000000..94a47c345
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-1-snap.png
new file mode 100644
index 000000000..40de86daf
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-2-snap.png
new file mode 100644
index 000000000..fa6d3c0c0
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-3-snap.png
new file mode 100644
index 000000000..0aa64324b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-4-snap.png
new file mode 100644
index 000000000..803507fac
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-5-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-5-snap.png
new file mode 100644
index 000000000..0c80624bd
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-qualitative-with-custom-icons-5-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-1-snap.png
new file mode 100644
index 000000000..5ccceadf0
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-2-snap.png
new file mode 100644
index 000000000..9ba3eaffb
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-with-custom-icons-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-with-custom-icons-1-snap.png
new file mode 100644
index 000000000..8477eaf63
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-with-custom-icons-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-with-custom-icons-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-with-custom-icons-2-snap.png
new file mode 100644
index 000000000..748cf099f
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-quantitative-with-custom-icons-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-24-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-24-1-snap.png
new file mode 100644
index 000000000..403632147
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-24-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-48-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-48-1-snap.png
new file mode 100644
index 000000000..0a6147fa8
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-48-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-8-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-8-1-snap.png
new file mode 100644
index 000000000..0918b3c73
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/rating-screenshot-test-tsx-rating-size-8-1-snap.png differ
diff --git a/src/__screenshot_tests__/rating-screenshot-test.tsx b/src/__screenshot_tests__/rating-screenshot-test.tsx
new file mode 100644
index 000000000..853c724ad
--- /dev/null
+++ b/src/__screenshot_tests__/rating-screenshot-test.tsx
@@ -0,0 +1,179 @@
+import {openStoryPage, screen} from '../test-utils';
+
+test.each([0, 1, 2, 3, 4, 5, 4.5, 4.51])('InfoRating - value = %s', async (value) => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {value},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test.each([4.5, 0.74, 0.75, 1.24, 4.25])('InfoRating - with half value and value = %s', async (value) => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {value, withHalfValue: true},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test.each([16, 24, 48])('InfoRating - size = %s', async (size) => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {size},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test('InfoRating - inverse', async () => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {inverse: true, value: 3},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test('InfoRating - custom icons', async () => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {value: 3.5, customIcons: true, withHalfValue: true},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - quantitative', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'quantitative'},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - quantitative with custom icons', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'quantitative', customIcons: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - qualitative', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'qualitative'},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const labels = ['muy malo', 'malo', 'regular', 'bueno', 'muy bueno'];
+
+    for (const label of labels) {
+        const currentIcon = await screen.findByRole('radio', {name: label});
+        await page.click(currentIcon);
+        expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+    }
+});
+
+test('Rating - qualitative with custom icons', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'qualitative', customIcons: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const labels = ['no battery', 'low battery', 'mid battery', 'full battery'];
+
+    for (const label of labels) {
+        const currentIcon = await screen.findByRole('radio', {name: label});
+        await page.click(currentIcon);
+        expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+    }
+});
+
+test('Rating - qualitative inverse', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'qualitative', inverse: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const thirdIcon = await screen.findByRole('radio', {name: 'regular'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test.each([8, 24, 48])('Rating - size = %s', async (size) => {
+    await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {size},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - inverse', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {inverse: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
diff --git a/src/__stories__/rating-story.tsx b/src/__stories__/rating-story.tsx
new file mode 100644
index 000000000..b63a2fad9
--- /dev/null
+++ b/src/__stories__/rating-story.tsx
@@ -0,0 +1,183 @@
+import * as React from 'react';
+import {
+    Box,
+    IconBatteryChargingFilled,
+    IconBatteryChargingRegular,
+    IconBatteryFullFilled,
+    IconBatteryFullRegular,
+    IconBatteryLowFilled,
+    IconBatteryLowRegular,
+    IconBatteryMediumFilled,
+    IconBatteryMediumRegular,
+    IconCheckedFilled,
+    IconCheckedRegular,
+    InfoRating,
+    Rating,
+    ResponsiveLayout,
+} from '..';
+import {vars} from '../skins/skin-contract.css';
+
+export default {
+    title: 'Components/Rating',
+    parameters: {fullScreen: true},
+};
+
+type RatingArgs = {
+    inverse: boolean;
+    count: number;
+    size: number;
+    type: 'quantitative' | 'qualitative';
+    disabled: boolean;
+    customIcons: boolean;
+};
+
+export const RatingStory: StoryComponent<RatingArgs> = ({
+    inverse,
+    count,
+    size,
+    type,
+    disabled,
+    customIcons,
+}) => {
+    return (
+        <ResponsiveLayout fullWidth isInverse={inverse}>
+            <Box padding={16}>
+                <div data-testid="rating-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Rating
+                        size={size}
+                        disabled={disabled}
+                        {...(type === 'qualitative'
+                            ? {
+                                  type,
+                                  valueLabels: customIcons
+                                      ? ['no battery', 'low battery', 'mid battery', 'full battery']
+                                      : undefined,
+                                  icons: customIcons
+                                      ? [
+                                            {
+                                                ActiveIcon: IconBatteryChargingFilled,
+                                                InactiveIcon: IconBatteryChargingRegular,
+                                                color: vars.colors.controlActivated,
+                                            },
+                                            {
+                                                ActiveIcon: IconBatteryLowFilled,
+                                                InactiveIcon: IconBatteryLowRegular,
+                                                color: vars.colors.error,
+                                            },
+                                            {
+                                                ActiveIcon: IconBatteryMediumFilled,
+                                                InactiveIcon: IconBatteryMediumRegular,
+                                                color: vars.colors.warning,
+                                            },
+
+                                            {
+                                                ActiveIcon: IconBatteryFullFilled,
+                                                InactiveIcon: IconBatteryFullRegular,
+                                                color: vars.colors.success,
+                                            },
+                                        ]
+                                      : undefined,
+                              }
+                            : {
+                                  type,
+                                  count,
+                                  icon: customIcons
+                                      ? {
+                                            ActiveIcon: IconCheckedFilled,
+                                            InactiveIcon: IconCheckedRegular,
+                                            color: vars.colors.success,
+                                        }
+                                      : undefined,
+                              })}
+                    />
+                </div>
+            </Box>
+        </ResponsiveLayout>
+    );
+};
+
+RatingStory.storyName = 'Rating';
+
+RatingStory.args = {
+    type: 'quantitative',
+    count: 5,
+    size: 32,
+    disabled: false,
+    inverse: false,
+    customIcons: false,
+};
+
+RatingStory.argTypes = {
+    type: {
+        options: ['quantitative', 'qualitative'],
+        control: {type: 'select'},
+    },
+    count: {
+        control: {type: 'range', min: 1, max: 5},
+        if: {arg: 'type', eq: 'quantitative'},
+    },
+    size: {
+        control: {type: 'range', min: 16, max: 64, step: 4},
+    },
+};
+
+type InfoRatingArgs = {
+    inverse: boolean;
+    count: number;
+    value: number;
+    size: number;
+    withHalfValue: boolean;
+    customIcons: boolean;
+};
+
+export const InfoRatingStory: StoryComponent<InfoRatingArgs> = ({
+    inverse,
+    count,
+    value,
+    size,
+    withHalfValue,
+    customIcons,
+}) => {
+    return (
+        <ResponsiveLayout fullWidth isInverse={inverse}>
+            <Box padding={16}>
+                <InfoRating
+                    value={value}
+                    count={count}
+                    size={size}
+                    withHalfValue={withHalfValue}
+                    icon={
+                        customIcons
+                            ? {
+                                  ActiveIcon: IconCheckedFilled,
+                                  InactiveIcon: IconCheckedRegular,
+                                  color: vars.colors.success,
+                              }
+                            : undefined
+                    }
+                    dataAttributes={{testid: 'info-rating'}}
+                />
+            </Box>
+        </ResponsiveLayout>
+    );
+};
+
+InfoRatingStory.storyName = 'InfoRating';
+
+InfoRatingStory.args = {
+    inverse: false,
+    withHalfValue: false,
+    count: 5,
+    size: 16,
+    value: 0,
+    customIcons: false,
+};
+
+InfoRatingStory.argTypes = {
+    count: {
+        control: {type: 'range', min: 1, max: 5},
+    },
+    size: {
+        control: {type: 'range', min: 16, max: 64, step: 4},
+    },
+};
diff --git a/src/__tests__/rating-test.tsx b/src/__tests__/rating-test.tsx
new file mode 100644
index 000000000..85a228184
--- /dev/null
+++ b/src/__tests__/rating-test.tsx
@@ -0,0 +1,217 @@
+import * as React from 'react';
+import {render, screen, within} from '@testing-library/react';
+import {Rating, InfoRating} from '../rating';
+import userEvent from '@testing-library/user-event';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import IconStarRegular from '../generated/mistica-icons/icon-star-regular';
+import IconStarFilled from '../generated/mistica-icons/icon-star-filled';
+import IconLightningRegular from '../generated/mistica-icons/icon-lightning-regular';
+import IconLightningFilled from '../generated/mistica-icons/icon-lightning-filled';
+import {vars} from '../skins/skin-contract.css';
+import {Text2} from '../text';
+
+test('InfoRating is accessible', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <InfoRating value={3} />
+        </ThemeContextProvider>
+    );
+
+    await screen.findByRole('img', {name: '3 de 5'});
+});
+
+test('InfoRating is accessible with custom label', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <InfoRating aria-label="info rating" />
+        </ThemeContextProvider>
+    );
+
+    await screen.findByRole('img', {name: 'info rating'});
+});
+
+test('InfoRating is accessible with aria-labelledby', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Text2 regular id="label">
+                This is a label
+            </Text2>
+            <InfoRating value={3} aria-labelledby="label" />
+        </ThemeContextProvider>
+    );
+
+    await screen.findByRole('img', {name: 'This is a label'});
+});
+
+test('Rating quantitative is accessible', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Rating aria-label="rating" />
+        </ThemeContextProvider>
+    );
+
+    const rating = await screen.findByRole('radiogroup', {name: 'rating'});
+    const icons = within(rating).getAllByRole('radio');
+
+    // 5 icons by default
+    expect(icons).toHaveLength(5);
+
+    // Initially no value is defined
+    icons.forEach((icon) => expect(icon).not.toBeChecked());
+
+    const firstIcon = await within(rating).findByRole('radio', {name: '1 de 5'});
+    await userEvent.click(firstIcon);
+    expect(icons[0]).toBeChecked();
+
+    const thirdIcon = await within(rating).findByRole('radio', {name: '3 de 5'});
+    await userEvent.click(thirdIcon);
+    expect(icons[0]).not.toBeChecked();
+    expect(icons[2]).toBeChecked();
+});
+
+test('Rating qualitative is accessible', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Rating aria-label="rating" type="qualitative" />
+        </ThemeContextProvider>
+    );
+
+    const rating = await screen.findByRole('radiogroup', {name: 'rating'});
+    const icons = within(rating).getAllByRole('radio');
+
+    // 5 icons by default
+    expect(icons).toHaveLength(5);
+
+    // Initially no value is defined
+    icons.forEach((icon) => expect(icon).not.toBeChecked());
+
+    const firstIcon = await within(rating).findByRole('radio', {name: 'muy malo'});
+    await userEvent.click(firstIcon);
+    expect(icons[0]).toBeChecked();
+
+    const thirdIcon = await within(rating).findByRole('radio', {name: 'regular'});
+    await userEvent.click(thirdIcon);
+    expect(icons[0]).not.toBeChecked();
+    expect(icons[2]).toBeChecked();
+});
+
+test('Rating is accessible with aria-labelledby', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Text2 regular id="label">
+                This is a label
+            </Text2>
+            <Rating value={3} aria-labelledby="label" />
+        </ThemeContextProvider>
+    );
+
+    await screen.findByRole('radiogroup', {name: 'This is a label'});
+});
+
+test('Rating with uncontrolled value', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Rating aria-label="rating" defaultValue={2} />
+        </ThemeContextProvider>
+    );
+
+    const secondIcon = await screen.findByRole('radio', {name: '2 de 5'});
+    expect(secondIcon).toBeChecked();
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await userEvent.click(thirdIcon);
+    expect(secondIcon).not.toBeChecked();
+    expect(thirdIcon).toBeChecked();
+});
+
+test('Rating with controlled value', async () => {
+    const ControlledRating = () => {
+        const [value, setValue] = React.useState(2);
+        return <Rating aria-label="rating" value={value} onChangeValue={setValue} />;
+    };
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <ControlledRating />
+        </ThemeContextProvider>
+    );
+
+    const secondIcon = await screen.findByRole('radio', {name: '2 de 5'});
+    expect(secondIcon).toBeChecked();
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await userEvent.click(thirdIcon);
+    expect(secondIcon).not.toBeChecked();
+    expect(thirdIcon).toBeChecked();
+});
+
+test('Rating quantitative with 3 icons and custom labels', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Rating aria-label="rating" count={3} valueLabels={['first', 'second', 'third']} />
+        </ThemeContextProvider>
+    );
+
+    const rating = await screen.findByRole('radiogroup', {name: 'rating'});
+    const icons = within(rating).getAllByRole('radio');
+
+    expect(icons).toHaveLength(3);
+
+    // Initially no value is defined
+    icons.forEach((icon) => expect(icon).not.toBeChecked());
+
+    const secondIcon = await screen.findByRole('radio', {name: 'second'});
+    await userEvent.click(secondIcon);
+
+    expect(icons[1]).toBeChecked();
+
+    const thirdIcon = await screen.findByRole('radio', {name: 'third'});
+    await userEvent.click(thirdIcon);
+
+    expect(icons[1]).not.toBeChecked();
+    expect(icons[2]).toBeChecked();
+});
+
+test('Rating qualitative with 2 icons and custom labels', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Rating
+                aria-label="rating"
+                type="qualitative"
+                icons={[
+                    {
+                        ActiveIcon: IconStarFilled,
+                        InactiveIcon: IconStarRegular,
+                        color: vars.colors.controlActivated,
+                    },
+                    {
+                        ActiveIcon: IconLightningFilled,
+                        InactiveIcon: IconLightningRegular,
+                        color: vars.colors.controlActivated,
+                    },
+                ]}
+                valueLabels={['first', 'second']}
+            />
+        </ThemeContextProvider>
+    );
+
+    const rating = await screen.findByRole('radiogroup', {name: 'rating'});
+    const icons = within(rating).getAllByRole('radio');
+
+    expect(icons).toHaveLength(2);
+
+    // Initially no value is defined
+    icons.forEach((icon) => expect(icon).not.toBeChecked());
+
+    const secondIcon = await screen.findByRole('radio', {name: 'second'});
+    await userEvent.click(secondIcon);
+
+    expect(icons[1]).toBeChecked();
+
+    const firstIcon = await screen.findByRole('radio', {name: 'first'});
+    await userEvent.click(firstIcon);
+
+    expect(icons[1]).not.toBeChecked();
+    expect(icons[0]).toBeChecked();
+});
diff --git a/src/index.tsx b/src/index.tsx
index 0198f7bd3..598a3c423 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -63,6 +63,7 @@ export {default as HorizontalScroll} from './horizontal-scroll';
 export {default as HighlightedCard} from './highlighted-card';
 export {default as Stepper} from './stepper';
 export {ProgressBar, ProgressBarStepped} from './progress-bar';
+export {Rating, InfoRating} from './rating';
 export {VerticalMosaic, HorizontalMosaic} from './mosaic';
 export {Timer, TextTimer} from './timer';
 export {
diff --git a/src/inline.tsx b/src/inline.tsx
index 02a398f01..a35bf3669 100644
--- a/src/inline.tsx
+++ b/src/inline.tsx
@@ -43,6 +43,7 @@ type Props = {
     children: React.ReactNode;
     className?: string;
     role?: string;
+    'aria-label'?: string;
     'aria-labelledby'?: string;
     fullWidth?: boolean;
     dataAttributes?: DataAttributes;
@@ -55,6 +56,7 @@ const Inline = ({
     children,
     role,
     alignItems = 'stretch',
+    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     fullWidth,
     wrap,
@@ -74,7 +76,8 @@ const Inline = ({
             )}
             style={applyCssVars(calcInlineVars(space))}
             role={role}
-            aria-labelledby={ariaLabelledBy}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
             {...getPrefixedDataAttributes(dataAttributes, 'Inline')}
         >
             {React.Children.map(children, (child) =>
diff --git a/src/radio-button.tsx b/src/radio-button.tsx
index 6cee63826..d992c9723 100644
--- a/src/radio-button.tsx
+++ b/src/radio-button.tsx
@@ -153,6 +153,7 @@ const RadioButton = ({
 type RadioGroupProps = {
     name: string;
     disabled?: boolean;
+    'aria-label'?: string;
     'aria-labelledby'?: string;
     children: React.ReactNode;
     value?: string;
@@ -253,7 +254,8 @@ export const RadioGroup = (props: RadioGroupProps): JSX.Element => {
         <div
             ref={combineRefs(ref, focusableRef)}
             role="radiogroup"
-            aria-labelledby={props['aria-labelledby']}
+            aria-label={props['aria-label']}
+            aria-labelledby={props['aria-label'] ? undefined : props['aria-labelledby']}
             {...getPrefixedDataAttributes(props.dataAttributes, 'RadioGroup')}
         >
             <RadioContext.Provider
diff --git a/src/rating.css.ts b/src/rating.css.ts
new file mode 100644
index 000000000..fa7c13c47
--- /dev/null
+++ b/src/rating.css.ts
@@ -0,0 +1,128 @@
+import {createVar, style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import * as mq from './media-queries.css';
+
+const iconSize = createVar();
+const interactiveAreaSize = createVar();
+
+export const vars = {iconSize};
+
+// Space between each icon
+const iconSpacing = '16px';
+
+/**
+ * In touchable devices, minimum interactive area is 48px.
+ * In pointer devices, minimum interactive area is 24px.
+ */
+const minInteractiveArea = {
+    pointer: '24px',
+    touchable: '48px',
+};
+
+// Minimum size of icon container so that interactive areas don't overlap
+const minContainerSize = {
+    pointer: `calc(${minInteractiveArea.pointer} - ${iconSpacing})`,
+    touchable: `calc(${minInteractiveArea.touchable} - ${iconSpacing})`,
+};
+
+export const IconWrapper = style([
+    sprinkles({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }),
+    {
+        // set width and height in order to ignore inline svg extra spacing
+        width: iconSize,
+        height: iconSize,
+
+        minWidth: minContainerSize.pointer,
+        minHeight: minContainerSize.pointer,
+        '@media': {
+            [mq.touchableOnly]: {
+                minWidth: minContainerSize.touchable,
+                minHeight: minContainerSize.touchable,
+            },
+        },
+    },
+]);
+
+export const halfIconContainer = sprinkles({
+    position: 'relative',
+});
+
+export const halfIconInactive = style([
+    sprinkles({
+        position: 'absolute',
+    }),
+    {
+        clipPath: 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)',
+        WebkitClipPath: 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)',
+    },
+]);
+
+export const halfIconActive = style([
+    sprinkles({
+        position: 'relative',
+    }),
+    {
+        clipPath: 'polygon(0 0, 50% 0, 50% 100%, 0 100%)',
+        WebkitClipPath: 'polygon(0 0, 50% 0, 50% 100%, 0 100%)',
+    },
+]);
+
+export const disabled = style({
+    opacity: 0.5,
+});
+
+export const firstIcon = style({});
+export const lastIcon = style({});
+
+export const touchable = style({
+    vars: {
+        [interactiveAreaSize]: minInteractiveArea.pointer,
+    },
+    '@media': {
+        [mq.touchableOnly]: {
+            vars: {
+                [interactiveAreaSize]: minInteractiveArea.touchable,
+            },
+        },
+    },
+
+    transition: 'transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+    position: 'relative',
+
+    '::after': {
+        content: '',
+        position: 'absolute',
+        /**
+         * min() is not supported in old browsers (https://caniuse.com/css-math-functions).
+         * We don't force the minimum touchable area in that case.
+         */
+        top: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
+        bottom: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
+        left: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
+        right: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
+    },
+
+    selectors: {
+        [`&:not(${disabled}):active`]: {
+            transform: 'scale(1.2)',
+        },
+
+        // Add extra width on the left/right of interactive area so that we cover the space between icons
+        [`&:not(${firstIcon}):after`]: {
+            left: [
+                `calc(-1 * ${iconSpacing} / 2)`,
+                `min(calc(-1 * ${iconSpacing} / 2), calc((100% - ${interactiveAreaSize}) / 2))`,
+            ],
+        },
+        [`&:not(${lastIcon}):after`]: {
+            right: [
+                `calc(-1 * ${iconSpacing} / 2)`,
+                `min(calc(-1 * ${iconSpacing} / 2), calc((100% - ${interactiveAreaSize}) / 2))`,
+            ],
+        },
+    },
+});
diff --git a/src/rating.tsx b/src/rating.tsx
new file mode 100644
index 000000000..63c02e1a4
--- /dev/null
+++ b/src/rating.tsx
@@ -0,0 +1,346 @@
+'use client';
+import * as React from 'react';
+import Inline from './inline';
+import {vars} from './skins/skin-contract.css';
+import {useThemeVariant} from './theme-variant-context';
+import * as styles from './rating.css';
+import classNames from 'classnames';
+import {applyCssVars} from './utils/css';
+import {isTouchableDevice} from './utils/environment';
+import RadioButton, {RadioGroup} from './radio-button';
+import {isEqual} from './utils/helpers';
+import IconStarFilled from './generated/mistica-icons/icon-star-filled';
+import IconStarRegular from './generated/mistica-icons/icon-star-regular';
+import IconFaceSadFilled from './generated/mistica-icons/icon-face-sad-filled';
+import IconFaceSadRegular from './generated/mistica-icons/icon-face-sad-regular';
+import IconFaceSlightlySadFilled from './generated/mistica-icons/icon-face-slightly-sad-filled';
+import IconFaceSlightlySadRegular from './generated/mistica-icons/icon-face-slightly-sad-regular';
+import IconFaceNeutralFilled from './generated/mistica-icons/icon-face-neutral-filled';
+import IconFaceNeutralRegular from './generated/mistica-icons/icon-face-neutral-regular';
+import IconFaceHappyFilled from './generated/mistica-icons/icon-face-happy-filled';
+import IconFaceHappyRegular from './generated/mistica-icons/icon-face-happy-regular';
+import IconFaceSuperHappyFilled from './generated/mistica-icons/icon-face-super-happy-filled';
+import IconFaceSuperHappyRegular from './generated/mistica-icons/icon-face-super-happy-regular';
+import {useTheme} from './hooks';
+import * as tokens from './text-tokens';
+
+import type {ExclusifyUnion} from './utils/utility-types';
+import type {DataAttributes, IconProps} from './utils/types';
+
+type RatingIconProps = {
+    ActiveIcon: (props: IconProps) => JSX.Element;
+    InactiveIcon: (props: IconProps) => JSX.Element;
+    color: string;
+};
+
+const DEFAULT_RATING_SIZE = 32;
+const DEFAULT_INFO_RATING_SIZE = 16;
+const DEFAULT_RATING_ICON_COUNT = 5;
+
+const DEFAULT_RATING_ICON: RatingIconProps = {
+    ActiveIcon: IconStarFilled,
+    InactiveIcon: IconStarRegular,
+    color: vars.colors.controlActivated,
+};
+
+const DEFAULT_INFO_RATING_ICON: RatingIconProps = {
+    ActiveIcon: IconStarFilled,
+    InactiveIcon: IconStarRegular,
+    color: vars.colors.warning,
+};
+
+const DEFAULT_QUALITATIVE_ICONS: Array<RatingIconProps> = [
+    {
+        ActiveIcon: IconFaceSadFilled,
+        InactiveIcon: IconFaceSadRegular,
+        color: vars.colors.errorHigh,
+    },
+    {
+        ActiveIcon: IconFaceSlightlySadFilled,
+        InactiveIcon: IconFaceSlightlySadRegular,
+        color: vars.colors.error,
+    },
+    {
+        ActiveIcon: IconFaceNeutralFilled,
+        InactiveIcon: IconFaceNeutralRegular,
+        color: vars.colors.warning,
+    },
+    {
+        ActiveIcon: IconFaceHappyFilled,
+        InactiveIcon: IconFaceHappyRegular,
+        color: vars.colors.success,
+    },
+    {
+        ActiveIcon: IconFaceSuperHappyFilled,
+        InactiveIcon: IconFaceSuperHappyRegular,
+        color: vars.colors.successHigh,
+    },
+];
+
+interface BaseRatingProps {
+    size?: number;
+    dataAttributes?: DataAttributes;
+    valueLabels?: Array<string>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+
+interface QuantitativeRatingProps extends BaseRatingProps {
+    type?: 'quantitative';
+    icon?: RatingIconProps;
+    count?: number;
+}
+
+interface QualitativeRatingProps extends BaseRatingProps {
+    type: 'qualitative';
+    icons?: Array<RatingIconProps>;
+}
+
+type RatingProps = ExclusifyUnion<QualitativeRatingProps | QuantitativeRatingProps> & {
+    value?: number;
+    defaultValue?: number;
+    onChangeValue?: (value: number) => void;
+    disabled?: boolean;
+};
+
+type InfoRatingProps = Omit<QuantitativeRatingProps, 'type' | 'valueLabels'> & {
+    value?: number;
+    withHalfValue?: boolean;
+};
+
+type InternalRatingProps = ExclusifyUnion<RatingProps | InfoRatingProps> & {
+    role: 'radiogroup' | 'img';
+};
+
+const useRatingState = ({
+    value,
+    defaultValue,
+    iconsCount,
+    onChangeValue,
+}: {
+    value?: number;
+    defaultValue?: number;
+    iconsCount: number;
+    onChangeValue?: (value: number) => void;
+}): [number, (value: number) => void] => {
+    const isControlledByParent = value !== undefined;
+
+    const getValueInRange = React.useCallback(
+        (value?: number) => {
+            return value === undefined ? 0 : Math.max(0, Math.min(iconsCount, value));
+        },
+        [iconsCount]
+    );
+
+    const [currentValue, setCurrentValue] = React.useState<number>(getValueInRange(defaultValue));
+
+    const updateValue = (newValue: number) => {
+        if (!isControlledByParent) {
+            setCurrentValue(newValue);
+        }
+        onChangeValue?.(newValue);
+    };
+
+    return [isControlledByParent ? getValueInRange(value) : currentValue, updateValue];
+};
+
+const InternalRating = ({
+    icons = DEFAULT_QUALITATIVE_ICONS,
+    count = DEFAULT_RATING_ICON_COUNT,
+    icon = DEFAULT_RATING_ICON,
+    size = DEFAULT_RATING_SIZE,
+    type = 'quantitative',
+    dataAttributes,
+    onChangeValue,
+    defaultValue,
+    value,
+    disabled,
+    role,
+    valueLabels,
+    withHalfValue,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+}: InternalRatingProps) => {
+    const {texts, t} = useTheme();
+
+    const defaultQualitativeLabels = [
+        texts.ratingVeryBadLabel || t(tokens.ratingVeryBadLabel),
+        texts.ratingBadLabel || t(tokens.ratingBadLabel),
+        texts.ratingRegularLabel || t(tokens.ratingRegularLabel),
+        texts.ratingGoodLabel || t(tokens.ratingGoodLabel),
+        texts.ratingVeryGoodLabel || t(tokens.ratingVeryGoodLabel),
+    ];
+
+    const defaultQuantitativeLabels = Array.from({length: count}, (_, index) =>
+        (texts.ratingQuantitativeLabel || t(tokens.ratingQuantitativeLabel))
+            .replace('1$s', String(index + 1))
+            .replace('2$s', String(count))
+    );
+
+    const iconList = type === 'qualitative' ? icons : Array.from({length: count}, () => icon);
+    const labelList =
+        valueLabels ??
+        (type === 'qualitative' && isEqual(iconList, DEFAULT_QUALITATIVE_ICONS)
+            ? defaultQualitativeLabels
+            : defaultQuantitativeLabels);
+
+    const isInteractive = role === 'radiogroup';
+
+    const iconSpacing = isInteractive ? 16 : size <= 16 ? 2 : size <= 24 ? 4 : 8;
+    const variant = useThemeVariant();
+    const [hoveredIndex, setHoveredIndex] = React.useState<number | undefined>(undefined);
+    const isTouchable = isTouchableDevice();
+
+    const [currentValue, setCurrentValue] = useRatingState({
+        value,
+        defaultValue,
+        iconsCount: iconList.length,
+        onChangeValue,
+    });
+
+    const getIconType = (index: number) => {
+        if (hoveredIndex !== undefined && !disabled) {
+            return (type === 'qualitative' && index === hoveredIndex) ||
+                (type === 'quantitative' && index <= hoveredIndex)
+                ? 'active'
+                : 'inactive';
+        }
+        if (type === 'qualitative') {
+            return index === currentValue ? 'active' : 'inactive';
+        }
+
+        if (isInteractive) {
+            return index <= currentValue ? 'active' : 'inactive';
+        }
+
+        // Round the value to the closest integer (.5 is rounded down)
+        if (!withHalfValue) {
+            return index - 0.5 < currentValue ? 'active' : 'inactive';
+        }
+
+        // Fractional part of the value is in range [0.25, 0.75)
+        if (index - 0.75 <= currentValue && currentValue < index - 0.25) {
+            return 'half';
+        }
+
+        if (index - 0.25 <= currentValue) {
+            return 'active';
+        }
+
+        return 'inactive';
+    };
+
+    const getIconElement = (icon: RatingIconProps, index: number) => {
+        const activeColor = variant === 'inverse' ? vars.colors.inverse : iconList[index].color;
+        const inactiveColor =
+            variant === 'inverse'
+                ? vars.colors.inverse
+                : isInteractive
+                  ? vars.colors.control
+                  : iconList[0].color;
+
+        switch (getIconType(index + 1)) {
+            case 'active':
+                return <icon.ActiveIcon size={size} color={activeColor} key={index} />;
+
+            case 'inactive':
+                return <icon.InactiveIcon size={size} color={inactiveColor} key={index} />;
+
+            case 'half':
+            default:
+                return (
+                    <div className={styles.halfIconContainer} key={index}>
+                        <div className={styles.halfIconInactive}>
+                            <icon.InactiveIcon size={size} color={inactiveColor} />
+                        </div>
+                        <div className={styles.halfIconActive}>
+                            <icon.ActiveIcon size={size} color={activeColor} />
+                        </div>
+                    </div>
+                );
+        }
+    };
+
+    const renderIcon = (icon: RatingIconProps, index: number) => {
+        const iconElement = getIconElement(icon, index);
+
+        return !isInteractive ? (
+            iconElement
+        ) : (
+            <RadioButton
+                key={index}
+                aria-label={labelList[index]}
+                value={labelList[index]}
+                render={({labelId, disabled}) => (
+                    <div
+                        id={labelId}
+                        onMouseEnter={() => {
+                            if (!isTouchable) {
+                                setHoveredIndex(index + 1);
+                            }
+                        }}
+                        onMouseLeave={() => {
+                            if (!isTouchable) {
+                                setHoveredIndex(undefined);
+                            }
+                        }}
+                        style={applyCssVars({
+                            [styles.vars.iconSize]: `${size}px`,
+                        })}
+                        className={classNames(styles.touchable, {
+                            [styles.disabled]: disabled,
+                            [styles.firstIcon]: index === 0,
+                            [styles.lastIcon]: index === iconList.length - 1,
+                        })}
+                    >
+                        <div className={styles.IconWrapper}>{iconElement}</div>
+                    </div>
+                )}
+            />
+        );
+    };
+
+    return role === 'img' ? (
+        <Inline
+            space={iconSpacing}
+            dataAttributes={dataAttributes}
+            role={role}
+            aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : `${currentValue} de ${count}`)}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
+        >
+            {iconList.map(renderIcon)}
+        </Inline>
+    ) : (
+        <RadioGroup
+            name="info-rating"
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
+            disabled={disabled}
+            onChange={(label) => {
+                setCurrentValue(labelList.findIndex((value) => value === label) + 1);
+            }}
+            value={labelList[currentValue - 1]}
+            dataAttributes={dataAttributes}
+        >
+            <Inline space={iconSpacing}>{iconList.map(renderIcon)}</Inline>
+        </RadioGroup>
+    );
+};
+
+export const Rating = ({dataAttributes, ...props}: RatingProps): JSX.Element => (
+    <InternalRating
+        role="radiogroup"
+        dataAttributes={{'component-name': 'Rating', ...dataAttributes}}
+        {...props}
+    />
+);
+
+export const InfoRating = ({dataAttributes, icon, size, ...props}: InfoRatingProps): JSX.Element => (
+    <InternalRating
+        size={size ?? DEFAULT_INFO_RATING_SIZE}
+        icon={icon ?? DEFAULT_INFO_RATING_ICON}
+        role="img"
+        dataAttributes={{'component-name': 'InfoRating', ...dataAttributes}}
+        {...props}
+    />
+);
diff --git a/src/text-tokens.tsx b/src/text-tokens.tsx
index cd04341a8..bdeaaed1d 100644
--- a/src/text-tokens.tsx
+++ b/src/text-tokens.tsx
@@ -62,6 +62,12 @@ export type Dictionary = {
     timerDisplayMinutesLabel: string;
     timerDisplaySecondsLabel: string;
     tableActionsHeaderLabel: string;
+    ratingVeryBadLabel: string;
+    ratingBadLabel: string;
+    ratingRegularLabel: string;
+    ratingGoodLabel: string;
+    ratingVeryGoodLabel: string;
+    ratingQuantitativeLabel: string;
 };
 
 export type TextToken = Record<Language, string>;
@@ -492,3 +498,45 @@ export const tableActionsHeaderLabel: TextToken = {
     de: 'Aktionen',
     pt: 'Ações',
 };
+
+export const ratingVeryBadLabel: TextToken = {
+    es: 'muy malo',
+    en: 'very bad',
+    de: 'sehr schlecht',
+    pt: 'muito ruim',
+};
+
+export const ratingBadLabel: TextToken = {
+    es: 'malo',
+    en: 'bad',
+    de: 'schlecht',
+    pt: 'ruim',
+};
+
+export const ratingRegularLabel: TextToken = {
+    es: 'regular',
+    en: 'regular',
+    de: 'regular',
+    pt: 'regular',
+};
+
+export const ratingGoodLabel: TextToken = {
+    es: 'bueno',
+    en: 'good',
+    de: 'gut',
+    pt: 'bom',
+};
+
+export const ratingVeryGoodLabel: TextToken = {
+    es: 'muy bueno',
+    en: 'very good',
+    de: 'sehr gut',
+    pt: 'muito bom',
+};
+
+export const ratingQuantitativeLabel: TextToken = {
+    es: '1$s de 2$s',
+    en: '1$s out of 2$s',
+    de: '1$s von 2$s',
+    pt: '1$s de 2$s',
+};