LSR-14376: Add a few Flame icons (#153)

Tom Bertrand · web-flow · commit 9d195ba60d18 · 2022-02-02T14:40:08.000-05:00
* LSR-14376: Add align-left, align-center, align-right, rotate-left and rotate-right icons

* Update snapshots

* Fix changelog

* Fix base-1 on rotate-right icon
diff --git a/packages/flame/CHANGELOG.md b/packages/flame/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.
 
+## [Unreleased]
+
+### Added
+
+- `align-left`, `align-center`, `align-right`, `rotate-left` and `rotate-right` icons ([#153](https://github.com/lightspeed/flame/pull/153))
+
 ## 2.1.0 - 2021-05-19
 
 ### Changed
diff --git a/packages/flame/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/flame/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -241,6 +241,7 @@ exports[`Autocomplete renders as disabled 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M7.299 10.641c.388.475 1.012.482 1.406 0L11.8 6.86c.389-.475.194-.86-.418-.86H4.623c-.62 0-.812.378-.418.86l3.094 3.781z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -495,6 +496,7 @@ exports[`Autocomplete renders correctly 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M7.299 10.641c.388.475 1.012.482 1.406 0L11.8 6.86c.389-.475.194-.86-.418-.86H4.623c-.62 0-.812.378-.418.86l3.094 3.781z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -759,6 +761,7 @@ exports[`Autocomplete renders in loading mode 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M8 13a1.5 1.5 0 0 1 0 3A8 8 0 0 1 .323 5.742a1.5 1.5 0 1 1 2.879.846A5 5 0 0 0 8 13z"
+          fill="#232429"
         />
       </svg>
       <div
@@ -794,6 +797,7 @@ exports[`Autocomplete renders in loading mode 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M7.299 10.641c.388.475 1.012.482 1.406 0L11.8 6.86c.389-.475.194-.86-.418-.86H4.623c-.62 0-.812.378-.418.86l3.094 3.781z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -1052,6 +1056,7 @@ exports[`Autocomplete renders with an initial value 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M10.216 8l3.325-3.325a1.567 1.567 0 1 0-2.216-2.216L8 5.784 4.675 2.459A1.567 1.567 0 0 0 2.46 4.675L5.784 8l-3.325 3.325a1.567 1.567 0 1 0 2.216 2.216L8 10.216l3.325 3.325a1.567 1.567 0 1 0 2.216-2.216L10.216 8z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -1088,6 +1093,7 @@ exports[`Autocomplete renders with an initial value 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M7.299 10.641c.388.475 1.012.482 1.406 0L11.8 6.86c.389-.475.194-.86-.418-.86H4.623c-.62 0-.812.378-.418.86l3.094 3.781z"
+            fill="#232429"
           />
         </svg>
       </div>
diff --git a/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -129,6 +129,7 @@ exports[`<Checkbox /> Snapshots when all props and label/description with html s
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -277,6 +278,7 @@ exports[`<Checkbox /> Snapshots when all props should render correctly 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -413,6 +415,7 @@ exports[`<Checkbox /> Snapshots when checked should render correctly 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -541,6 +544,7 @@ exports[`<Checkbox /> Snapshots when disabled should render correctly 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -668,6 +672,7 @@ exports[`<Checkbox /> Snapshots when empty props should render correctly 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+            fill="#232429"
           />
         </svg>
       </div>
@@ -809,6 +814,7 @@ exports[`<Checkbox /> Snapshots when indeterminate should render correctly 1`] =
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+            fill="#232429"
           />
         </svg>
         <div
@@ -940,6 +946,7 @@ exports[`<Checkbox /> Snapshots when not checked should render correctly 1`] = `
           <path
             className="cr-icon__base cr-icon__base-1"
             d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+            fill="#232429"
           />
         </svg>
       </div>
diff --git a/packages/flame/src/Icon/__tests__/__snapshots__/Icon.test.tsx.snap b/packages/flame/src/Icon/__tests__/__snapshots__/Icon.test.tsx.snap
@@ -21,10 +21,12 @@ exports[`Icon renders correctly 1`] = `
   <path
     className="cr-icon__base cr-icon__base-1"
     d="M12.058 2.82c.489.381.914.826 1.269 1.316l1.729-.077a.367.367 0 0 1 .332.219l.593 1.545a.369.369 0 0 1-.1.385l-1.337 1.099a6.538 6.538 0 0 1-.064 1.842l1.146 1.051c.101.093.14.268.083.396l-.622 1.396a.363.363 0 0 1-.35.202l-1.545-.15a6.539 6.539 0 0 1-1.328 1.283l.077 1.729a.369.369 0 0 1-.219.332l-1.545.593a.367.367 0 0 1-.385-.1l-1.099-1.337a6.539 6.539 0 0 1-1.846-.065L5.8 15.624a.367.367 0 0 1-.396.084l-1.396-.621a.363.363 0 0 1-.202-.351l.15-1.544a6.538 6.538 0 0 1-1.283-1.328l-1.729.077a.367.367 0 0 1-.332-.219l-.593-1.545a.369.369 0 0 1 .1-.385l1.337-1.099a6.538 6.538 0 0 1 .065-1.846L.376 5.801a.367.367 0 0 1-.085-.397l.622-1.396a.363.363 0 0 1 .35-.202l1.546.15a6.539 6.539 0 0 1 1.327-1.283L4.06.944a.369.369 0 0 1 .219-.332L5.823.02a.367.367 0 0 1 .385.1l1.099 1.337a6.539 6.539 0 0 1 1.843.064L10.2.375a.367.367 0 0 1 .396-.083l1.396.621a.362.362 0 0 1 .205.345l-.139 1.561zm-5.705 8.879A4.05 4.05 0 1 0 9.647 4.3a4.05 4.05 0 0 0-3.294 7.398z"
+    fill="#232429"
   />
   <path
     className="cr-icon__base cr-icon__base-2"
     d="M8 6l1.732 1v2L8 10 6.268 9V7z"
+    fill="#232429"
     opacity=".7"
   />
 </svg>
@@ -90,6 +92,7 @@ exports[`Icon renders with color 1`] = `
   <path
     className="cr-icon__base cr-icon__base-1"
     d="M1.614 14.39a5.495 5.495 0 0 1 0-7.775l.353-.353 5.11-5.086a4.001 4.001 0 0 1 5.657 0 3.996 3.996 0 0 1 0 5.654l-5.11 5.086-.353.354a2.5 2.5 0 0 1-3.536-3.534l.354-.354 5.11-5.086a1 1 0 0 1 1.414 1.413l-5.11 5.087-.354.354a.5.5 0 1 0 .707.706l.354-.354 5.11-5.087a1.998 1.998 0 0 0 0-2.827 2.001 2.001 0 0 0-2.829 0l-5.11 5.088-.353.353a3.497 3.497 0 0 0 0 4.947 3.502 3.502 0 0 0 4.95 0l.354-.353 5.964-5.93a1 1 0 0 1 1.414 1.414l-5.964 5.93-.354.353a5.502 5.502 0 0 1-7.778 0z"
+    fill="#232429"
   />
 </svg>
 `;
diff --git a/packages/flame/src/Spinner/__snapshots__/Spinner.test.tsx.snap b/packages/flame/src/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -38,11 +38,13 @@ exports[`<Spinner /> Snapshots when color is cr-blue should render correctly 1`]
   <path
     className="cr-icon__base cr-icon__base-2"
     d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-3A5 5 0 1 0 8 3a5 5 0 0 0 0 10z"
+    fill="#232429"
     opacity=".3"
   />
   <path
     className="cr-icon__base cr-icon__base-1"
     d="M8 13a1.5 1.5 0 0 1 0 3A8 8 0 0 1 .323 5.742a1.5 1.5 0 1 1 2.879.846A5 5 0 0 0 8 13z"
+    fill="#232429"
   />
 </svg>
 `;
@@ -84,11 +86,13 @@ exports[`<Spinner /> Snapshots when empty props should render correctly 1`] = `
   <path
     className="cr-icon__base cr-icon__base-2"
     d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-3A5 5 0 1 0 8 3a5 5 0 0 0 0 10z"
+    fill="#232429"
     opacity=".3"
   />
   <path
     className="cr-icon__base cr-icon__base-1"
     d="M8 13a1.5 1.5 0 0 1 0 3A8 8 0 0 1 .323 5.742a1.5 1.5 0 1 1 2.879.846A5 5 0 0 0 8 13z"
+    fill="#232429"
   />
 </svg>
 `;
@@ -130,11 +134,13 @@ exports[`<Spinner /> Snapshots when size is xlarge should render correctly 1`] =
   <path
     className="cr-icon__base cr-icon__base-2"
     d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-3A5 5 0 1 0 8 3a5 5 0 0 0 0 10z"
+    fill="#232429"
     opacity=".3"
   />
   <path
     className="cr-icon__base cr-icon__base-1"
     d="M8 13a1.5 1.5 0 0 1 0 3A8 8 0 0 1 .323 5.742a1.5 1.5 0 1 1 2.879.846A5 5 0 0 0 8 13z"
+    fill="#232429"
   />
 </svg>
 `;
diff --git a/packages/flame/src/Switch/__snapshots__/Switch.test.tsx.snap b/packages/flame/src/Switch/__snapshots__/Switch.test.tsx.snap
@@ -178,6 +178,7 @@ exports[`<Switch /> when autoFocus should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+          fill="#232429"
         />
       </svg>
       <svg
@@ -194,6 +195,7 @@ exports[`<Switch /> when autoFocus should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M10.216 8l3.325-3.325a1.567 1.567 0 1 0-2.216-2.216L8 5.784 4.675 2.459A1.567 1.567 0 0 0 2.46 4.675L5.784 8l-3.325 3.325a1.567 1.567 0 1 0 2.216 2.216L8 10.216l3.325 3.325a1.567 1.567 0 1 0 2.216-2.216L10.216 8z"
+          fill="#232429"
         />
       </svg>
     </span>
@@ -379,6 +381,7 @@ exports[`<Switch /> when checked should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+          fill="#232429"
         />
       </svg>
       <svg
@@ -395,6 +398,7 @@ exports[`<Switch /> when checked should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M10.216 8l3.325-3.325a1.567 1.567 0 1 0-2.216-2.216L8 5.784 4.675 2.459A1.567 1.567 0 0 0 2.46 4.675L5.784 8l-3.325 3.325a1.567 1.567 0 1 0 2.216 2.216L8 10.216l3.325 3.325a1.567 1.567 0 1 0 2.216-2.216L10.216 8z"
+          fill="#232429"
         />
       </svg>
     </span>
@@ -580,6 +584,7 @@ exports[`<Switch /> when disabled should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+          fill="#232429"
         />
       </svg>
       <svg
@@ -596,6 +601,7 @@ exports[`<Switch /> when disabled should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M10.216 8l3.325-3.325a1.567 1.567 0 1 0-2.216-2.216L8 5.784 4.675 2.459A1.567 1.567 0 0 0 2.46 4.675L5.784 8l-3.325 3.325a1.567 1.567 0 1 0 2.216 2.216L8 10.216l3.325 3.325a1.567 1.567 0 1 0 2.216-2.216L10.216 8z"
+          fill="#232429"
         />
       </svg>
     </span>
@@ -780,6 +786,7 @@ exports[`<Switch /> when empty props should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+          fill="#232429"
         />
       </svg>
       <svg
@@ -796,6 +803,7 @@ exports[`<Switch /> when empty props should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M10.216 8l3.325-3.325a1.567 1.567 0 1 0-2.216-2.216L8 5.784 4.675 2.459A1.567 1.567 0 0 0 2.46 4.675L5.784 8l-3.325 3.325a1.567 1.567 0 1 0 2.216 2.216L8 10.216l3.325 3.325a1.567 1.567 0 1 0 2.216-2.216L10.216 8z"
+          fill="#232429"
         />
       </svg>
     </span>
@@ -982,6 +990,7 @@ exports[`<Switch /> when id, name should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+          fill="#232429"
         />
       </svg>
       <svg
@@ -998,6 +1007,7 @@ exports[`<Switch /> when id, name should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M10.216 8l3.325-3.325a1.567 1.567 0 1 0-2.216-2.216L8 5.784 4.675 2.459A1.567 1.567 0 0 0 2.46 4.675L5.784 8l-3.325 3.325a1.567 1.567 0 1 0 2.216 2.216L8 10.216l3.325 3.325a1.567 1.567 0 1 0 2.216-2.216L10.216 8z"
+          fill="#232429"
         />
       </svg>
     </span>
@@ -1183,6 +1193,7 @@ exports[`<Switch /> when passing data-props should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M5.662 12.508c.656.686 1.735.65 2.345-.079l5.6-6.68c.58-.692.51-1.74-.157-2.342a1.561 1.561 0 0 0-2.259.164L6.802 8.81 4.738 6.822a1.56 1.56 0 0 0-2.264-.01 1.704 1.704 0 0 0-.01 2.347l3.198 3.348z"
+          fill="#232429"
         />
       </svg>
       <svg
@@ -1199,6 +1210,7 @@ exports[`<Switch /> when passing data-props should render correctly 1`] = `
         <path
           className="cr-icon__base cr-icon__base-1"
           d="M10.216 8l3.325-3.325a1.567 1.567 0 1 0-2.216-2.216L8 5.784 4.675 2.459A1.567 1.567 0 0 0 2.46 4.675L5.784 8l-3.325 3.325a1.567 1.567 0 1 0 2.216 2.216L8 10.216l3.325 3.325a1.567 1.567 0 1 0 2.216-2.216L10.216 8z"
+          fill="#232429"
         />
       </svg>
     </span>
diff --git a/packages/flame/svg/Icons/icon-align-center.svg b/packages/flame/svg/Icons/icon-align-center.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g id="align-center">
+		<path id="base-1" d="M1.57132 0C0.940141 0 0.428467 0.511675 0.428467 1.14286C0.428467 1.77404 0.940141 2.28571 1.57132 2.28571H14.2856C14.9168 2.28571 15.4285 1.77404 15.4285 1.14286C15.4285 0.511675 14.9168 0 14.2856 0H1.57132ZM1.57132 9.14286C0.940141 9.14286 0.428467 9.65453 0.428467 10.2857C0.428467 10.9169 0.940141 11.4286 1.57132 11.4286H14.2856C14.9168 11.4286 15.4285 10.9169 15.4285 10.2857C15.4285 9.65453 14.9168 9.14286 14.2856 9.14286H1.57132Z" fill="#232429" />
+		<path id="base-2" d="M5.32132 4.57141C4.69014 4.57141 4.17847 5.08309 4.17847 5.71427C4.17847 6.34545 4.69014 6.85713 5.32132 6.85713H11.4731C12.1043 6.85713 12.616 6.34545 12.616 5.71427C12.616 5.08309 12.1043 4.57141 11.4731 4.57141H5.32132ZM5.32135 13.7143C4.69016 13.7143 4.17849 14.2259 4.17849 14.8571C4.17849 15.4883 4.69016 16 5.32135 16H11.4731C12.1043 16 12.616 15.4883 12.616 14.8571C12.616 14.2259 12.1043 13.7143 11.4731 13.7143H5.32135Z" fill="#232429" />
+	</g>
+</svg>
diff --git a/packages/flame/svg/Icons/icon-align-left.svg b/packages/flame/svg/Icons/icon-align-left.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g id="align-left">
+		<path id="base-1" d="M1.47889 0C0.884835 0 0.403259 0.511675 0.403259 1.14286C0.403259 1.77404 0.884835 2.28571 1.47889 2.28571H14.3864C14.9805 2.28571 15.4621 1.77404 15.4621 1.14286C15.4621 0.511675 14.9805 0 14.3864 0H1.47889ZM1.47889 9.14286C0.884835 9.14286 0.403259 9.65454 0.403259 10.2857C0.403259 10.9169 0.884835 11.4286 1.47889 11.4286H11.5629C12.157 11.4286 12.6386 10.9169 12.6386 10.2857C12.6386 9.65454 12.157 9.14286 11.5629 9.14286H1.47889Z" fill="#232429" />
+		<path id="base-2" d="M1.47889 4.57141C0.884835 4.57141 0.403259 5.08309 0.403259 5.71427C0.403259 6.34545 0.884835 6.85713 1.47889 6.85713H7.79822C8.39227 6.85713 8.87385 6.34545 8.87385 5.71427C8.87385 5.08309 8.39227 4.57141 7.79822 4.57141H1.47889ZM1.47889 13.7143C0.884835 13.7143 0.403259 14.2259 0.403259 14.8571C0.403259 15.4883 0.884835 16 1.47889 16H7.79822C8.39227 16 8.87385 15.4883 8.87385 14.8571C8.87385 14.2259 8.39227 13.7143 7.79822 13.7143H1.47889Z" fill="#232429" />
+	</g>
+</svg>
diff --git a/packages/flame/svg/Icons/icon-align-right.svg b/packages/flame/svg/Icons/icon-align-right.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g id="align-left">
+		<path id="base-1" d="M14.8571 0C15.4883 0 16 0.511675 16 1.14286C16 1.77404 15.4883 2.28571 14.8571 2.28571H1.14286C0.511675 2.28571 0 1.77404 0 1.14286C0 0.511675 0.511674 0 1.14286 0H14.8571ZM14.8571 9.14286C15.4883 9.14286 16 9.65454 16 10.2857C16 10.9169 15.4883 11.4286 14.8571 11.4286H4.14286C3.51167 11.4286 3 10.9169 3 10.2857C3 9.65454 3.51167 9.14286 4.14286 9.14286H14.8571Z" fill="#232429" />
+		<path id="base-2" d="M14.8571 4.57141C15.4883 4.57141 16 5.08309 16 5.71427C16 6.34545 15.4883 6.85713 14.8571 6.85713H8.14286C7.51167 6.85713 7 6.34545 7 5.71427C7 5.08309 7.51167 4.57141 8.14286 4.57141H14.8571ZM14.8571 13.7143C15.4883 13.7143 16 14.2259 16 14.8571C16 15.4883 15.4883 16 14.8571 16H8.14286C7.51167 16 7 15.4883 7 14.8571C7 14.2259 7.51167 13.7143 8.14286 13.7143H14.8571Z" fill="#232429" />
+	</g>
+</svg>
diff --git a/packages/flame/svg/Icons/icon-rotate-left.svg b/packages/flame/svg/Icons/icon-rotate-left.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g id="rotate-left">
+		<path id="base-1" d="M3.69375 3.84063L7.53438 0V2.59375C10.8875 3.00937 13.4563 5.84688 13.4563 9.29688C13.4563 12.7469 10.8875 15.5844 7.53438 16V14.2875C9.93125 13.8969 11.7656 11.7906 11.7656 9.29688C11.7656 6.80313 9.93125 4.69688 7.53438 4.30625V7.60938L3.69375 3.84063ZM3.8743e-06 8.44063C0.122254 7.46263 0.25305 6.9906 0.729554 6.29579C0.919452 6.01889 1.27599 5.91654 1.59339 6.02604V6.02604C2.08333 6.19505 2.27386 6.78691 2.06571 7.26155C1.8987 7.64239 1.77957 8.0382 1.7125 8.44063H3.8743e-06ZM5.84688 14.2875V16C4.67188 15.8531 3.52188 15.3875 2.54375 14.6313L3.76875 13.4062C4.40313 13.8719 5.1125 14.1656 5.84688 14.2875ZM2.56875 12.2312L1.36875 13.4312C0.609378 12.4531 0.146879 11.3281 3.8743e-06 10.1531H1.7125C1.83438 10.8875 2.10313 11.5969 2.56875 12.2312Z" />
+	</g>
+</svg>
diff --git a/packages/flame/svg/Icons/icon-rotate-right.svg b/packages/flame/svg/Icons/icon-rotate-right.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g id="rotate-right">
+		<path id="base-1" d="M10.191 3.84063L6.35034 0V2.59375C2.99722 3.00937 0.428467 5.84688 0.428467 9.29688C0.428467 12.7469 2.99722 15.5844 6.35034 16V14.2875C3.95347 13.8969 2.11909 11.7906 2.11909 9.29688C2.11909 6.80313 3.95347 4.69688 6.35034 4.30625V7.60938L10.191 3.84063ZM13.8847 8.44063C13.7625 7.46263 13.6317 6.9906 13.1552 6.29579C12.9653 6.01889 12.6087 5.91654 12.2913 6.02604V6.02604C11.8014 6.19505 11.6109 6.78691 11.819 7.26155C11.986 7.64239 12.1051 8.0382 12.1722 8.44063H13.8847ZM8.03784 14.2875V16C9.21284 15.8531 10.3628 15.3875 11.341 14.6313L10.116 13.4062C9.48159 13.8719 8.77222 14.1656 8.03784 14.2875ZM11.316 12.2312L12.516 13.4312C13.2753 12.4531 13.7378 11.3281 13.8847 10.1531H12.1722C12.0503 10.8875 11.7816 11.5969 11.316 12.2312Z" />
+	</g>
+</svg>
