add svgs for layouts

my-app/src/Icons/Layouts/FivePlayers.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const FivePlayers = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2499 l0
+-2210 -1695 0 -1695 0 0 403 0 404 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -95 314 -259 442 -588 457 l-119 6 6 116
+c11 188 48 334 127 492 139 279 392 496 697 599 177 59 153 58 1411 59 l1152
+1 0 -2210z m2555 2181 c50 -13 132 -41 184 -62 385 -157 654 -493 726 -906 12
+-69 15 -198 15 -683 l0 -597 -112 -6 c-136 -8 -246 -34 -337 -82 -122 -64
+-190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488
+106 -106 230 -152 434 -161 l122 -6 0 -1767 0 -1767 -112 -6 c-136 -8 -246
+-34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58
+-256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -597 c0 -656 -2
+-690 -61 -864 -137 -410 -497 -719 -929 -797 -61 -11 -298 -14 -1235 -14
+l-1160 0 -3 6388 -2 6388 1187 -4 1188 -3 90 -23z m-2555 -6411 l0 -1920
+-1695 0 -1695 0 0 393 0 394 113 6 c184 10 325 60 423 150 151 137 275 597
+275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 353 0
+354 1695 0 1695 0 0 -1920z m0 -4175 l0 -2165 -1107 0 c-633 0 -1150 5 -1207
+10 -325 32 -630 202 -830 465 -150 197 -246 475 -246 716 l0 66 113 6 c184 10
+325 60 423 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259
+442 -586 457 l-118 6 0 363 0 364 1695 0 1695 0 0 -2165z"
+            />
+            <path
+              d="M1950 11374 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5741 10335 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M5741 4455 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M1950 3464 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 40
+190 -13 364 -156 507 -115 116 -241 168 -402 166 -40 0 -97 -7 -127 -15z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default FivePlayers;

my-app/src/Icons/Layouts/FivePlayersSide.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const FivePlayersSide = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2499 l0
+-2210 -1695 0 -1695 0 0 403 0 404 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -95 314 -259 442 -588 457 l-119 6 6 116
+c11 188 48 334 127 492 139 279 392 496 697 599 177 59 153 58 1411 59 l1152
+1 0 -2210z m2555 2181 c50 -13 132 -41 184 -62 385 -157 654 -493 726 -906 12
+-69 15 -198 15 -683 l0 -597 -112 -6 c-136 -8 -246 -34 -337 -82 -122 -64
+-190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488
+106 -106 230 -152 434 -161 l122 -6 0 -1767 0 -1767 -112 -6 c-136 -8 -246
+-34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58
+-256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -597 c0 -656 -2
+-690 -61 -864 -137 -410 -497 -719 -929 -797 -61 -11 -298 -14 -1235 -14
+l-1160 0 -3 6388 -2 6388 1187 -4 1188 -3 90 -23z m-2555 -6411 l0 -1920
+-1695 0 -1695 0 0 393 0 394 113 6 c184 10 325 60 423 150 151 137 275 597
+275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 353 0
+354 1695 0 1695 0 0 -1920z m0 -4175 l0 -2165 -1107 0 c-633 0 -1150 5 -1207
+10 -325 32 -630 202 -830 465 -150 197 -246 475 -246 716 l0 66 113 6 c184 10
+325 60 423 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259
+442 -586 457 l-118 6 0 363 0 364 1695 0 1695 0 0 -2165z"
+            />
+            <path
+              d="M1950 11374 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5741 10335 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M5741 4455 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M1950 3464 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 40
+190 -13 364 -156 507 -115 116 -241 168 -402 166 -40 0 -97 -7 -127 -15z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default FivePlayersSide;

my-app/src/Icons/Layouts/FourPlayers.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const FourPlayers = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -3459 l0
+-3170 -1695 0 -1695 0 0 853 0 854 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 314 -259 442 -587 457 l-118 6 4 626
+c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 177 59
+153 58 1411 59 l1152 1 0 -3170z m2555 3141 c50 -13 132 -41 184 -62 385 -157
+654 -493 726 -906 12 -69 15 -198 15 -683 l0 -597 -112 -6 c-136 -8 -246 -34
+-337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256
+118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -858 0 -859 -1695 0
+-1695 0 0 3170 0 3171 1188 -4 1187 -3 90 -23z m-2555 -9581 l0 -3170 -1107 0
+c-633 0 -1150 5 -1207 10 -325 32 -630 202 -830 465 -77 101 -166 277 -196
+386 -46 172 -50 228 -50 835 l0 571 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 863
+0 864 1695 0 1695 0 0 -3170z m3480 2312 l0 -859 -112 -6 c-136 -8 -246 -34
+-337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256
+118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -597 c0 -656 -2 -690
+-61 -864 -137 -410 -497 -719 -929 -797 -61 -11 -298 -14 -1235 -14 l-1160 0
+-3 3168 -2 3167 1695 0 1695 0 0 -858z"
+            />
+            <path
+              d="M1950 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5741 10335 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M1950 4474 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5741 4455 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default FourPlayers;

my-app/src/Icons/Layouts/FourPlayersSide.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const FourPlayersSide = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1240 -412 c1
+-210 57 -368 167 -474 143 -136 607 -254 1003 -254 237 0 424 27 667 97 234
+67 357 150 423 288 50 106 66 176 72 329 l6 138 621 -3 c616 -3 622 -3 716
+-27 487 -122 831 -486 915 -968 13 -73 15 -263 15 -1249 l0 -1164 -3432 2
+-3433 3 0 1175 c0 1091 1 1181 18 1260 92 436 387 770 804 910 166 55 203 58
+848 59 l590 1 0 -123z m1125 -6267 l0 -2890 -1695 0 -1695 0 0 853 0 854 128
+6 c198 9 336 56 438 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -96
+319 -260 444 -601 457 l-133 6 0 863 0 864 1695 0 1695 0 0 -2890z m3480 2028
+l0 -863 -123 0 c-149 -1 -248 -22 -355 -75 -131 -66 -199 -158 -266 -360 -132
+-400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 111 -110 231 -153 454
+-161 l142 -6 0 -858 0 -859 -1695 0 -1695 0 0 2890 0 2890 1695 0 1695 0 0
+-862z m0 -6172 c0 -1277 1 -1244 -61 -1430 -134 -400 -474 -700 -899 -792 -63
+-14 -170 -17 -686 -21 l-611 -4 -7 86 c-8 103 -43 230 -82 300 -83 149 -240
+233 -579 309 -238 54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -185 -87
+-281 -245 -303 -496 l-8 -84 -530 -3 c-576 -3 -707 4 -854 43 -243 66 -478
+225 -635 430 -77 101 -166 277 -196 386 -50 184 -50 186 -50 1407 l0 1142
+3435 0 3435 0 0 -1164z"
+            />
+            <path
+              d="M3918 12260 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
+-461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
+399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"
+            />
+            <path
+              d="M1980 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5701 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M3883 2485 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default FourPlayersSide;

my-app/src/Icons/Layouts/OnePlayerLandscape.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const OnePlayerLandscape = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
+-13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -75 15 -734 15 -5393 0
+-4746 -2 -5317 -15 -5396 -85 -484 -450 -859 -945 -971 -69 -16 -261 -17
+-2390 -20 -1547 -3 -2353 0 -2430 7 -208 18 -383 80 -558 197 -281 187 -466
+482 -518 828 -11 74 -14 459 -14 2136 l0 2046 98 6 c172 12 314 63 408 150 88
+80 160 247 219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101
+-237 159 -425 171 l-95 6 0 2080 c0 1962 1 2085 18 2165 92 436 387 770 804
+910 185 62 35 58 2643 56 l2385 -1 90 -24z"
+            />
+            <path
+              d="M1920 7424 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default OnePlayerLandscape;

my-app/src/Icons/Layouts/OnePlayerPortrait.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const OnePlayerPortrait = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
+-13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -75 15 -734 15 -5393 0
+-4746 -2 -5317 -15 -5396 -85 -484 -454 -863 -945 -970 -63 -14 -170 -17 -686
+-21 l-611 -4 -7 90 c-8 106 -43 234 -82 306 -83 149 -240 233 -579 309 -238
+54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -186 -88 -282 -248 -304 -502
+l-7 -88 -530 -3 c-309 -2 -578 2 -645 8 -565 50 -1011 485 -1080 1052 -8 68
+-10 1519 -8 5388 l3 5295 22 90 c29 120 52 185 103 286 139 279 392 496 697
+599 185 62 35 58 2643 56 l2385 -1 90 -24z"
+            />
+            <path
+              d="M3883 2495 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default OnePlayerPortrait;

my-app/src/Icons/Layouts/SixPlayers.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const SixPlayers = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2474 l0
+-2185 -1692 2 -1693 3 -3 376 -2 376 112 6 c185 10 326 60 424 150 151 137
+275 597 275 1017 0 239 -35 471 -107 710 -95 314 -259 442 -588 457 l-119 6 6
+116 c11 188 48 334 127 492 139 279 392 496 697 599 177 59 153 58 1411 59
+l1152 1 0 -2185z m2555 2156 c360 -94 635 -309 794 -620 84 -165 131 -351 131
+-521 l0 -87 -112 -6 c-136 -8 -246 -34 -337 -82 -122 -64 -190 -159 -255 -355
+-132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 106 -106 230 -152
+434 -161 l122 -6 0 -383 0 -384 -1692 2 -1693 3 -3 2183 -2 2183 1187 -4 1188
+-3 90 -23z m-2555 -6361 l0 -1930 -1695 0 -1695 0 0 373 0 374 113 6 c184 10
+325 60 423 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259
+442 -586 457 l-118 6 0 383 0 384 1695 0 1695 0 0 -1930z m3480 1552 l0 -379
+-112 -6 c-136 -8 -246 -34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400
+-153 -832 -60 -1248 58 -256 118 -398 208 -488 106 -106 230 -152 434 -161
+l122 -6 0 -378 0 -379 -1695 0 -1695 0 0 1930 0 1930 1695 0 1695 0 0 -378z
+m-3480 -5757 l0 -2185 -1107 0 c-633 0 -1150 5 -1207 10 -325 32 -630 202
+-830 465 -150 197 -246 475 -246 716 l0 66 113 6 c184 10 325 60 423 150 151
+137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118
+6 0 383 0 384 1695 0 1695 0 0 -2185z m3480 1807 l0 -379 -112 -6 c-136 -8
+-246 -34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60
+-1248 58 -256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -92 c0
+-558 -425 -1053 -990 -1156 -61 -11 -298 -14 -1235 -14 l-1160 0 -3 2170 c-1
+1194 0 2176 3 2183 3 9 352 12 1695 12 l1690 0 0 -378z"
+            />
+            <path
+              d="M1950 11374 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5741 11355 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5741 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M1950 3464 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 40
+190 -13 364 -156 507 -115 116 -241 168 -402 166 -40 0 -97 -7 -127 -15z"
+            />
+            <path
+              d="M5741 3445 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default SixPlayers;

my-app/src/Icons/Layouts/SixPlayersSide.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const SixPlayersSide = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1240 -421 c0
+-220 55 -377 167 -485 143 -136 607 -254 1003 -254 237 0 424 27 667 97 234
+67 357 150 423 288 52 109 66 175 72 339 l6 148 621 -3 c616 -3 622 -3 716
+-27 487 -122 831 -486 915 -968 12 -70 15 -205 15 -739 l0 -654 -3436 0 -3435
+0 4 678 c3 648 4 681 25 767 28 119 51 184 102 286 139 279 392 496 697 599
+166 55 203 58 848 59 l590 1 0 -132z m1125 -4278 l0 -1930 -1695 0 -1695 0 0
+213 0 214 98 6 c172 12 314 63 408 150 88 80 160 247 219 512 76 339 76 682
+-1 1020 -57 256 -113 390 -199 483 -93 101 -237 159 -425 171 l-95 6 -3 543
+-2 542 1695 0 1695 0 0 -1930z m3480 1391 l0 -538 -94 -7 c-180 -12 -339 -72
+-423 -159 -55 -56 -105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256
+118 -398 208 -488 101 -101 229 -151 414 -161 l102 -6 0 -218 0 -219 -1695 0
+-1695 0 0 1930 0 1930 1695 0 1695 0 0 -539z m-3482 -5303 l-3 -1883 -1692 -3
+-1693 -2 0 418 0 419 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017
+0 239 -35 471 -107 710 -95 315 -259 442 -591 457 l-123 6 0 293 0 294 1695 0
+1695 0 -2 -1882z m3482 1593 l0 -288 -94 -7 c-180 -12 -339 -72 -423 -159 -55
+-56 -105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208
+-488 101 -101 229 -151 414 -161 l102 -6 0 -423 0 -424 -1695 0 -1695 0 0
+1885 0 1885 1695 0 1695 0 0 -289z m0 -4270 c0 -766 -1 -787 -61 -965 -134
+-400 -474 -700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 103 c-7 118
+-40 246 -83 323 -83 149 -240 233 -579 309 -238 54 -543 72 -760 46 -212 -25
+-480 -93 -609 -155 -191 -90 -287 -254 -304 -520 l-7 -100 -530 -3 c-576 -3
+-707 4 -854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386 -47 176
+-50 221 -50 942 l0 677 3435 0 3435 0 0 -699z"
+            />
+            <path
+              d="M3918 12240 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
+-461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
+399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"
+            />
+            <path
+              d="M1920 9074 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5781 9055 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M1960 5614 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5781 5595 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M3883 2525 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default SixPlayersSide;

my-app/src/Icons/Layouts/ThreePlayers.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const ThreePlayers = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -3459 l0
+-3170 -1695 0 -1695 0 0 853 0 854 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 314 -259 442 -587 457 l-118 6 4 626
+c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 177 59
+153 58 1411 59 l1152 1 0 -3170z m2555 3141 c50 -13 132 -41 184 -62 385 -157
+654 -493 726 -906 13 -74 15 -366 15 -2153 l0 -2067 -112 -6 c-136 -8 -246
+-34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58
+-256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -2067 c0 -2273
+3 -2142 -61 -2334 -134 -400 -470 -696 -899 -793 -69 -16 -261 -17 -2390 -20
+-1547 -3 -2353 0 -2430 7 -208 18 -383 80 -558 197 -281 187 -466 482 -518
+828 -11 68 -14 230 -14 661 l0 571 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 868
+0 869 1695 0 1695 0 0 -3170 0 -3170 45 0 45 0 0 6385 0 6386 1188 -4 1187 -3
+90 -23z"
+            />
+            <path
+              d="M1950 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5741 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M1950 4474 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default ThreePlayers;

my-app/src/Icons/Layouts/ThreePlayersSide.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const ThreePlayersSide = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2375 -4524 l0
+-4235 -1700 0 -1700 0 0 1513 0 1514 98 6 c172 12 314 63 408 150 88 80 160
+247 219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101 -237
+159 -425 171 l-95 6 0 1020 c0 942 1 1026 18 1105 92 436 387 770 804 910 177
+59 152 58 1416 59 l1157 1 0 -4235z m2545 4206 c50 -13 132 -41 184 -62 385
+-157 654 -493 726 -906 13 -72 15 -244 15 -1088 l0 -1002 -82 -8 c-171 -14
+-325 -75 -405 -158 -55 -56 -105 -150 -147 -277 -132 -400 -153 -832 -60
+-1248 58 -256 118 -398 208 -488 97 -97 226 -149 399 -161 l87 -6 0 -1518 0
+-1519 -1685 0 -1685 0 0 4235 0 4236 1178 -4 1177 -3 90 -23z m925 -10100 c0
+-1724 3 -1646 -61 -1835 -134 -400 -474 -700 -899 -792 -63 -14 -170 -17 -686
+-21 l-611 -4 -7 86 c-8 103 -43 230 -82 300 -83 149 -240 233 -579 309 -238
+54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -185 -87 -281 -245 -303 -496
+l-8 -84 -530 -3 c-576 -3 -707 4 -854 43 -243 66 -478 225 -635 430 -77 101
+-166 277 -196 386 -51 188 -50 155 -50 1812 l0 1547 3435 0 3435 0 0 -1569z"
+            />
+            <path
+              d="M1920 9544 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5811 9525 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+            <path
+              d="M3883 2485 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default ThreePlayersSide;

my-app/src/Icons/Layouts/TwoPlayersOppositeLandscape.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const TwoPlayerOppositeLandscape = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -6679 l0
+-6390 -1107 0 c-633 0 -1150 5 -1207 10 -325 32 -630 202 -830 465 -77 101
+-166 277 -196 386 -51 190 -50 117 -50 2305 l0 2041 113 6 c184 10 325 60 423
+150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -587
+457 l-117 6 3 2096 3 2096 21 90 c29 119 52 184 103 286 139 279 392 496 697
+599 177 59 153 58 1411 59 l1152 1 0 -6390z m2555 6361 c50 -13 132 -41 184
+-62 385 -157 654 -493 726 -906 13 -74 15 -365 15 -2148 l0 -2062 -117 -6
+c-140 -7 -249 -33 -342 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832
+-60 -1248 58 -256 118 -398 208 -488 107 -107 231 -152 439 -161 l127 -6 0
+-2072 c0 -2279 3 -2147 -61 -2339 -137 -410 -497 -719 -929 -797 -61 -11 -298
+-14 -1235 -14 l-1160 0 -3 6388 -2 6388 1187 -4 1188 -3 90 -23z"
+            />
+            <path
+              d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M5731 7405 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default TwoPlayerOppositeLandscape;

my-app/src/Icons/Layouts/TwoPlayersOppositePortrait.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const TwoPlayersOppositePortrait = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1239 -396 c12
+-203 66 -342 168 -440 103 -98 398 -195 723 -238 139 -18 401 -21 530 -5 212
+25 480 93 609 155 193 92 288 256 303 523 l6 113 621 -3 c616 -3 622 -3 716
+-27 487 -122 831 -486 915 -968 13 -74 15 -431 15 -2729 l0 -2644 -3435 0
+-3435 0 3 2668 3 2667 21 90 c29 120 52 184 103 286 139 279 392 496 697 599
+166 55 204 58 844 59 l586 1 7 -107z m4606 -8972 c0 -2881 4 -2692 -61 -2885
+-134 -400 -474 -700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 113
+c-15 270 -108 435 -298 526 -139 67 -366 127 -594 157 -139 18 -400 21 -530 5
+-212 -25 -480 -93 -609 -155 -194 -92 -288 -257 -305 -530 l-6 -110 -530 -3
+c-576 -3 -707 4 -854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386
+-52 192 -50 73 -50 2862 l0 2597 3435 0 3435 0 0 -2619z"
+            />
+            <path
+              d="M3918 12310 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
+-461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
+399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"
+            />
+            <path
+              d="M3883 2545 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default TwoPlayersOppositePortrait;

my-app/src/Icons/Layouts/TwoPlayersSameSide.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { IconProps } from '../../Types/Icon';
+
+const TwoPlayersSameSide = ({ size, color, active }: IconProps) => {
+  const [isChecked, setIsChecked] = useState(active || false);
+
+  const handleRadioClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <label style={{ cursor: 'pointer' }}>
+        <input
+          type="radio"
+          checked={isChecked}
+          onChange={handleRadioClick}
+          style={{ display: 'none' }}
+        />
+        <svg
+          version="1.2"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 802.000000 1374.000000"
+          width={'auto'}
+          height={size || 'auto'}
+          fill={color}
+          fillOpacity="1"
+        >
+          <g
+            transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+            stroke="none"
+          >
+            <path
+              d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
+-13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -74 15 -429 15 -2714 l0
+-2629 -3435 0 -3435 0 0 853 0 854 118 6 c189 10 328 59 428 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -95 315 -259 442 -592 457 l-123 6 4 626
+c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 185 62 35
+58 2643 56 l2385 -1 90 -24z m925 -9040 c0 -2892 4 -2702 -61 -2895 -134 -400
+-470 -696 -899 -793 -69 -16 -261 -17 -2390 -20 -1547 -3 -2353 0 -2430 7
+-208 18 -383 80 -558 197 -281 187 -466 482 -518 828 -11 68 -14 231 -14 671
+l0 581 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017 0 239 -35 471
+-107 710 -95 315 -259 442 -591 457 l-123 6 0 853 0 854 3435 0 3435 0 0
+-2629z"
+            />
+            <path
+              d="M1960 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+            <path
+              d="M1960 4494 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"
+            />
+          </g>
+        </svg>
+      </label>
+    </div>
+  );
+};
+
+export default TwoPlayersSameSide;

my-app/src/Icons/svgs/FivePlayers.svg

@@ -0,0 +1,47 @@
+
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2499 l0
+-2210 -1695 0 -1695 0 0 403 0 404 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -95 314 -259 442 -588 457 l-119 6 6 116
+c11 188 48 334 127 492 139 279 392 496 697 599 177 59 153 58 1411 59 l1152
+1 0 -2210z m2555 2181 c50 -13 132 -41 184 -62 385 -157 654 -493 726 -906 12
+-69 15 -198 15 -683 l0 -597 -112 -6 c-136 -8 -246 -34 -337 -82 -122 -64
+-190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488
+106 -106 230 -152 434 -161 l122 -6 0 -1767 0 -1767 -112 -6 c-136 -8 -246
+-34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58
+-256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -597 c0 -656 -2
+-690 -61 -864 -137 -410 -497 -719 -929 -797 -61 -11 -298 -14 -1235 -14
+l-1160 0 -3 6388 -2 6388 1187 -4 1188 -3 90 -23z m-2555 -6411 l0 -1920
+-1695 0 -1695 0 0 393 0 394 113 6 c184 10 325 60 423 150 151 137 275 597
+275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 353 0
+354 1695 0 1695 0 0 -1920z m0 -4175 l0 -2165 -1107 0 c-633 0 -1150 5 -1207
+10 -325 32 -630 202 -830 465 -150 197 -246 475 -246 716 l0 66 113 6 c184 10
+325 60 423 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259
+442 -586 457 l-118 6 0 363 0 364 1695 0 1695 0 0 -2165z"/>
+<path d="M1950 11374 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5741 10335 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M5741 4455 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M1950 3464 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 40
+190 -13 364 -156 507 -115 116 -241 168 -402 166 -40 0 -97 -7 -127 -15z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/FivePlayersSide.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2664 l0
+-2375 -1695 0 -1695 0 0 523 0 524 98 6 c172 12 314 63 408 150 88 80 160 247
+219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101 -237 159
+-425 171 l-95 6 1 150 c1 217 33 361 121 540 141 284 392 501 700 605 177 59
+153 58 1411 59 l1152 1 0 -2375z m2555 2346 c360 -94 635 -309 794 -620 91
+-179 131 -350 131 -566 l0 -132 -94 -7 c-180 -12 -339 -72 -423 -159 -55 -56
+-105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488
+101 -101 229 -151 414 -161 l102 -6 0 -528 0 -529 -1695 0 -1695 0 0 2375 0
+2376 1188 -4 1187 -3 90 -23z m-2557 -7163 l2 -2348 -1695 0 -1695 0 0 648 0
+649 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017 0 239 -35 471
+-107 710 -95 315 -259 442 -591 457 l-123 6 0 528 0 529 1693 -2 1692 -3 3
+-2347z m3482 1828 l0 -523 -94 -7 c-180 -12 -339 -72 -423 -159 -55 -56 -105
+-150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 101
+-101 229 -151 414 -161 l102 -6 0 -653 0 -654 -1695 0 -1695 0 0 2350 0 2350
+1695 0 1695 0 0 -524z m0 -5300 c0 -1134 1 -1116 -61 -1300 -134 -400 -474
+-700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 103 c-7 118 -40 246
+-83 323 -83 149 -240 233 -579 309 -238 54 -543 72 -760 46 -212 -25 -480 -93
+-609 -155 -191 -90 -287 -254 -304 -520 l-7 -100 -530 -3 c-576 -3 -707 4
+-854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386 -49 183 -50 196
+-50 1277 l0 1012 3435 0 3435 0 0 -1034z"/>
+<path d="M1920 11284 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5781 11265 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M1960 6744 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5781 6725 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M3883 2525 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/FourPlayers.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -3459 l0
+-3170 -1695 0 -1695 0 0 853 0 854 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 314 -259 442 -587 457 l-118 6 4 626
+c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 177 59
+153 58 1411 59 l1152 1 0 -3170z m2555 3141 c50 -13 132 -41 184 -62 385 -157
+654 -493 726 -906 12 -69 15 -198 15 -683 l0 -597 -112 -6 c-136 -8 -246 -34
+-337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256
+118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -858 0 -859 -1695 0
+-1695 0 0 3170 0 3171 1188 -4 1187 -3 90 -23z m-2555 -9581 l0 -3170 -1107 0
+c-633 0 -1150 5 -1207 10 -325 32 -630 202 -830 465 -77 101 -166 277 -196
+386 -46 172 -50 228 -50 835 l0 571 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 863
+0 864 1695 0 1695 0 0 -3170z m3480 2312 l0 -859 -112 -6 c-136 -8 -246 -34
+-337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58 -256
+118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -597 c0 -656 -2 -690
+-61 -864 -137 -410 -497 -719 -929 -797 -61 -11 -298 -14 -1235 -14 l-1160 0
+-3 3168 -2 3167 1695 0 1695 0 0 -858z"/>
+<path d="M1950 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5741 10335 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M1950 4474 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5741 4455 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/FourPlayersSide.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1240 -412 c1
+-210 57 -368 167 -474 143 -136 607 -254 1003 -254 237 0 424 27 667 97 234
+67 357 150 423 288 50 106 66 176 72 329 l6 138 621 -3 c616 -3 622 -3 716
+-27 487 -122 831 -486 915 -968 13 -73 15 -263 15 -1249 l0 -1164 -3432 2
+-3433 3 0 1175 c0 1091 1 1181 18 1260 92 436 387 770 804 910 166 55 203 58
+848 59 l590 1 0 -123z m1125 -6267 l0 -2890 -1695 0 -1695 0 0 853 0 854 128
+6 c198 9 336 56 438 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -96
+319 -260 444 -601 457 l-133 6 0 863 0 864 1695 0 1695 0 0 -2890z m3480 2028
+l0 -863 -123 0 c-149 -1 -248 -22 -355 -75 -131 -66 -199 -158 -266 -360 -132
+-400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 111 -110 231 -153 454
+-161 l142 -6 0 -858 0 -859 -1695 0 -1695 0 0 2890 0 2890 1695 0 1695 0 0
+-862z m0 -6172 c0 -1277 1 -1244 -61 -1430 -134 -400 -474 -700 -899 -792 -63
+-14 -170 -17 -686 -21 l-611 -4 -7 86 c-8 103 -43 230 -82 300 -83 149 -240
+233 -579 309 -238 54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -185 -87
+-281 -245 -303 -496 l-8 -84 -530 -3 c-576 -3 -707 4 -854 43 -243 66 -478
+225 -635 430 -77 101 -166 277 -196 386 -50 184 -50 186 -50 1407 l0 1142
+3435 0 3435 0 0 -1164z"/>
+<path d="M3918 12260 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
+-461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
+399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"/>
+<path d="M1980 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5701 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M3883 2485 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/OnePlayerLandscape.svg

@@ -0,0 +1,25 @@
+
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
+-13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -75 15 -734 15 -5393 0
+-4746 -2 -5317 -15 -5396 -85 -484 -450 -859 -945 -971 -69 -16 -261 -17
+-2390 -20 -1547 -3 -2353 0 -2430 7 -208 18 -383 80 -558 197 -281 187 -466
+482 -518 828 -11 74 -14 459 -14 2136 l0 2046 98 6 c172 12 314 63 408 150 88
+80 160 247 219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101
+-237 159 -425 171 l-95 6 0 2080 c0 1962 1 2085 18 2165 92 436 387 770 804
+910 185 62 35 58 2643 56 l2385 -1 90 -24z"/>
+<path d="M1920 7424 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/OnePlayerPortrait.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
+-13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -75 15 -734 15 -5393 0
+-4746 -2 -5317 -15 -5396 -85 -484 -454 -863 -945 -970 -63 -14 -170 -17 -686
+-21 l-611 -4 -7 90 c-8 106 -43 234 -82 306 -83 149 -240 233 -579 309 -238
+54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -186 -88 -282 -248 -304 -502
+l-7 -88 -530 -3 c-309 -2 -578 2 -645 8 -565 50 -1011 485 -1080 1052 -8 68
+-10 1519 -8 5388 l3 5295 22 90 c29 120 52 185 103 286 139 279 392 496 697
+599 185 62 35 58 2643 56 l2385 -1 90 -24z"/>
+<path d="M3883 2495 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/SixPlayers.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -2474 l0
+-2185 -1692 2 -1693 3 -3 376 -2 376 112 6 c185 10 326 60 424 150 151 137
+275 597 275 1017 0 239 -35 471 -107 710 -95 314 -259 442 -588 457 l-119 6 6
+116 c11 188 48 334 127 492 139 279 392 496 697 599 177 59 153 58 1411 59
+l1152 1 0 -2185z m2555 2156 c360 -94 635 -309 794 -620 84 -165 131 -351 131
+-521 l0 -87 -112 -6 c-136 -8 -246 -34 -337 -82 -122 -64 -190 -159 -255 -355
+-132 -400 -153 -832 -60 -1248 58 -256 118 -398 208 -488 106 -106 230 -152
+434 -161 l122 -6 0 -383 0 -384 -1692 2 -1693 3 -3 2183 -2 2183 1187 -4 1188
+-3 90 -23z m-2555 -6361 l0 -1930 -1695 0 -1695 0 0 373 0 374 113 6 c184 10
+325 60 423 150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259
+442 -586 457 l-118 6 0 383 0 384 1695 0 1695 0 0 -1930z m3480 1552 l0 -379
+-112 -6 c-136 -8 -246 -34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400
+-153 -832 -60 -1248 58 -256 118 -398 208 -488 106 -106 230 -152 434 -161
+l122 -6 0 -378 0 -379 -1695 0 -1695 0 0 1930 0 1930 1695 0 1695 0 0 -378z
+m-3480 -5757 l0 -2185 -1107 0 c-633 0 -1150 5 -1207 10 -325 32 -630 202
+-830 465 -150 197 -246 475 -246 716 l0 66 113 6 c184 10 325 60 423 150 151
+137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118
+6 0 383 0 384 1695 0 1695 0 0 -2185z m3480 1807 l0 -379 -112 -6 c-136 -8
+-246 -34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60
+-1248 58 -256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -92 c0
+-558 -425 -1053 -990 -1156 -61 -11 -298 -14 -1235 -14 l-1160 0 -3 2170 c-1
+1194 0 2176 3 2183 3 9 352 12 1695 12 l1690 0 0 -378z"/>
+<path d="M1950 11374 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5741 11355 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5741 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M1950 3464 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 40
+190 -13 364 -156 507 -115 116 -241 168 -402 166 -40 0 -97 -7 -127 -15z"/>
+<path d="M5741 3445 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/SixPlayersSide.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1240 -421 c0
+-220 55 -377 167 -485 143 -136 607 -254 1003 -254 237 0 424 27 667 97 234
+67 357 150 423 288 52 109 66 175 72 339 l6 148 621 -3 c616 -3 622 -3 716
+-27 487 -122 831 -486 915 -968 12 -70 15 -205 15 -739 l0 -654 -3436 0 -3435
+0 4 678 c3 648 4 681 25 767 28 119 51 184 102 286 139 279 392 496 697 599
+166 55 203 58 848 59 l590 1 0 -132z m1125 -4278 l0 -1930 -1695 0 -1695 0 0
+213 0 214 98 6 c172 12 314 63 408 150 88 80 160 247 219 512 76 339 76 682
+-1 1020 -57 256 -113 390 -199 483 -93 101 -237 159 -425 171 l-95 6 -3 543
+-2 542 1695 0 1695 0 0 -1930z m3480 1391 l0 -538 -94 -7 c-180 -12 -339 -72
+-423 -159 -55 -56 -105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256
+118 -398 208 -488 101 -101 229 -151 414 -161 l102 -6 0 -218 0 -219 -1695 0
+-1695 0 0 1930 0 1930 1695 0 1695 0 0 -539z m-3482 -5303 l-3 -1883 -1692 -3
+-1693 -2 0 418 0 419 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017
+0 239 -35 471 -107 710 -95 315 -259 442 -591 457 l-123 6 0 293 0 294 1695 0
+1695 0 -2 -1882z m3482 1593 l0 -288 -94 -7 c-180 -12 -339 -72 -423 -159 -55
+-56 -105 -150 -147 -277 -132 -400 -153 -832 -60 -1248 58 -256 118 -398 208
+-488 101 -101 229 -151 414 -161 l102 -6 0 -423 0 -424 -1695 0 -1695 0 0
+1885 0 1885 1695 0 1695 0 0 -289z m0 -4270 c0 -766 -1 -787 -61 -965 -134
+-400 -474 -700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 103 c-7 118
+-40 246 -83 323 -83 149 -240 233 -579 309 -238 54 -543 72 -760 46 -212 -25
+-480 -93 -609 -155 -191 -90 -287 -254 -304 -520 l-7 -100 -530 -3 c-576 -3
+-707 4 -854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386 -47 176
+-50 221 -50 942 l0 677 3435 0 3435 0 0 -699z"/>
+<path d="M3918 12240 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
+-461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
+399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"/>
+<path d="M1920 9074 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5781 9055 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M1960 5614 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5781 5595 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M3883 2525 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/ThreePlayers.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -3459 l0
+-3170 -1695 0 -1695 0 0 853 0 854 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 314 -259 442 -587 457 l-118 6 4 626
+c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 177 59
+153 58 1411 59 l1152 1 0 -3170z m2555 3141 c50 -13 132 -41 184 -62 385 -157
+654 -493 726 -906 13 -74 15 -366 15 -2153 l0 -2067 -112 -6 c-136 -8 -246
+-34 -337 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832 -60 -1248 58
+-256 118 -398 208 -488 106 -106 230 -152 434 -161 l122 -6 0 -2067 c0 -2273
+3 -2142 -61 -2334 -134 -400 -470 -696 -899 -793 -69 -16 -261 -17 -2390 -20
+-1547 -3 -2353 0 -2430 7 -208 18 -383 80 -558 197 -281 187 -466 482 -518
+828 -11 68 -14 230 -14 661 l0 571 113 6 c184 10 325 60 423 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -586 457 l-118 6 0 868
+0 869 1695 0 1695 0 0 -3170 0 -3170 45 0 45 0 0 6385 0 6386 1188 -4 1187 -3
+90 -23z"/>
+<path d="M1950 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5741 7395 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M1950 4474 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/ThreePlayersSide.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2375 -4524 l0
+-4235 -1700 0 -1700 0 0 1513 0 1514 98 6 c172 12 314 63 408 150 88 80 160
+247 219 512 76 339 76 682 -1 1020 -57 256 -113 390 -199 483 -93 101 -237
+159 -425 171 l-95 6 0 1020 c0 942 1 1026 18 1105 92 436 387 770 804 910 177
+59 152 58 1416 59 l1157 1 0 -4235z m2545 4206 c50 -13 132 -41 184 -62 385
+-157 654 -493 726 -906 13 -72 15 -244 15 -1088 l0 -1002 -82 -8 c-171 -14
+-325 -75 -405 -158 -55 -56 -105 -150 -147 -277 -132 -400 -153 -832 -60
+-1248 58 -256 118 -398 208 -488 97 -97 226 -149 399 -161 l87 -6 0 -1518 0
+-1519 -1685 0 -1685 0 0 4235 0 4236 1178 -4 1177 -3 90 -23z m925 -10100 c0
+-1724 3 -1646 -61 -1835 -134 -400 -474 -700 -899 -792 -63 -14 -170 -17 -686
+-21 l-611 -4 -7 86 c-8 103 -43 230 -82 300 -83 149 -240 233 -579 309 -238
+54 -543 72 -760 46 -212 -25 -480 -93 -609 -155 -185 -87 -281 -245 -303 -496
+l-8 -84 -530 -3 c-576 -3 -707 4 -854 43 -243 66 -478 225 -635 430 -77 101
+-166 277 -196 386 -51 188 -50 155 -50 1812 l0 1547 3435 0 3435 0 0 -1569z"/>
+<path d="M1920 9544 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5811 9525 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+<path d="M3883 2485 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/TwoPlayersOppositeLandscape.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m2365 -6679 l0
+-6390 -1107 0 c-633 0 -1150 5 -1207 10 -325 32 -630 202 -830 465 -77 101
+-166 277 -196 386 -51 190 -50 117 -50 2305 l0 2041 113 6 c184 10 325 60 423
+150 151 137 275 597 275 1017 0 239 -35 471 -107 710 -94 313 -259 442 -587
+457 l-117 6 3 2096 3 2096 21 90 c29 119 52 184 103 286 139 279 392 496 697
+599 177 59 153 58 1411 59 l1152 1 0 -6390z m2555 6361 c50 -13 132 -41 184
+-62 385 -157 654 -493 726 -906 13 -74 15 -365 15 -2148 l0 -2062 -117 -6
+c-140 -7 -249 -33 -342 -82 -122 -64 -190 -159 -255 -355 -132 -400 -153 -832
+-60 -1248 58 -256 118 -398 208 -488 107 -107 231 -152 439 -161 l127 -6 0
+-2072 c0 -2279 3 -2147 -61 -2339 -137 -410 -497 -719 -929 -797 -61 -11 -298
+-14 -1235 -14 l-1160 0 -3 6388 -2 6388 1187 -4 1188 -3 90 -23z"/>
+<path d="M1950 7414 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M5731 7405 c-143 -46 -270 -157 -333 -291 -104 -222 -62 -461 111
+-635 115 -115 242 -169 399 -169 236 0 453 159 533 390 31 92 32 237 1 337
+-39 127 -129 241 -249 316 -125 79 -314 100 -462 52z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/TwoPlayersOppositePortrait.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m1239 -396 c12
+-203 66 -342 168 -440 103 -98 398 -195 723 -238 139 -18 401 -21 530 -5 212
+25 480 93 609 155 193 92 288 256 303 523 l6 113 621 -3 c616 -3 622 -3 716
+-27 487 -122 831 -486 915 -968 13 -74 15 -431 15 -2729 l0 -2644 -3435 0
+-3435 0 3 2668 3 2667 21 90 c29 120 52 184 103 286 139 279 392 496 697 599
+166 55 204 58 844 59 l586 1 7 -107z m4606 -8972 c0 -2881 4 -2692 -61 -2885
+-134 -400 -474 -700 -899 -792 -63 -14 -170 -17 -686 -21 l-611 -4 -6 113
+c-15 270 -108 435 -298 526 -139 67 -366 127 -594 157 -139 18 -400 21 -530 5
+-212 -25 -480 -93 -609 -155 -194 -92 -288 -257 -305 -530 l-6 -110 -530 -3
+c-576 -3 -707 4 -854 43 -243 66 -478 225 -635 430 -77 101 -166 277 -196 386
+-52 192 -50 73 -50 2862 l0 2597 3435 0 3435 0 0 -2619z"/>
+<path d="M3918 12310 c-165 -30 -300 -122 -391 -267 -79 -126 -100 -310 -52
+-461 45 -144 155 -269 291 -334 221 -104 461 -62 635 111 115 115 169 242 169
+399 0 234 -161 455 -386 531 -71 23 -198 34 -266 21z"/>
+<path d="M3883 2545 c-108 -23 -190 -70 -276 -156 -114 -114 -167 -239 -167
+-397 0 -236 159 -453 390 -533 92 -31 237 -32 337 -1 127 39 241 129 316 249
+79 126 100 310 52 461 -86 272 -372 438 -652 377z"/>
+</g>
+</svg>

my-app/src/Icons/svgs/TwoPlayersSameSide-svg.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="802.000000pt" height="1374.000000pt" viewBox="0 0 802.000000 1374.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1374.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1595 13549 c-176 -18 -347 -72 -522 -164 -144 -75 -250 -153 -368
+-270 -203 -204 -336 -452 -407 -760 l-23 -100 -3 -5315 c-2 -3820 0 -5343 8
+-5415 22 -201 72 -364 165 -543 73 -140 152 -246 267 -361 201 -201 410 -318
+708 -398 l105 -28 2485 0 2485 0 117 32 c270 74 470 185 669 371 215 202 370
+482 436 792 17 81 18 309 18 5480 0 5186 -1 5398 -18 5480 -120 557 -498 974
+-1035 1144 -205 64 -6 60 -2627 62 -1309 1 -2416 -2 -2460 -7z m4920 -318 c50
+-13 132 -41 184 -62 385 -157 654 -493 726 -906 13 -74 15 -429 15 -2714 l0
+-2629 -3435 0 -3435 0 0 853 0 854 118 6 c189 10 328 59 428 150 151 137 275
+597 275 1017 0 239 -35 471 -107 710 -95 315 -259 442 -592 457 l-123 6 4 626
+c3 596 4 630 25 716 28 119 51 184 102 286 139 279 392 496 697 599 185 62 35
+58 2643 56 l2385 -1 90 -24z m925 -9040 c0 -2892 4 -2702 -61 -2895 -134 -400
+-470 -696 -899 -793 -69 -16 -261 -17 -2390 -20 -1547 -3 -2353 0 -2430 7
+-208 18 -383 80 -558 197 -281 187 -466 482 -518 828 -11 68 -14 231 -14 671
+l0 581 118 6 c189 10 328 59 428 150 151 137 275 597 275 1017 0 239 -35 471
+-107 710 -95 315 -259 442 -591 457 l-123 6 0 853 0 854 3435 0 3435 0 0
+-2629z"/>
+<path d="M1960 10354 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+<path d="M1960 4494 c-186 -49 -337 -190 -401 -374 -17 -50 -22 -89 -23 -165
+-1 -128 25 -215 94 -318 107 -160 270 -247 464 -247 272 0 495 180 551 446 18
+87 18 141 0 226 -44 212 -225 394 -433 437 -72 15 -185 13 -252 -5z"/>
+</g>
+</svg>