diff --git a/my-app/src/Icons/Layouts/FivePlayers.tsx b/my-app/src/Icons/Layouts/FivePlayers.tsx
new file mode 100644
index 0000000..23a3754
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default FivePlayers;
diff --git a/my-app/src/Icons/Layouts/FivePlayersSide.tsx b/my-app/src/Icons/Layouts/FivePlayersSide.tsx
new file mode 100644
index 0000000..279850a
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default FivePlayersSide;
diff --git a/my-app/src/Icons/Layouts/FourPlayers.tsx b/my-app/src/Icons/Layouts/FourPlayers.tsx
new file mode 100644
index 0000000..1441281
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default FourPlayers;
diff --git a/my-app/src/Icons/Layouts/FourPlayersSide.tsx b/my-app/src/Icons/Layouts/FourPlayersSide.tsx
new file mode 100644
index 0000000..95ae2a9
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default FourPlayersSide;
diff --git a/my-app/src/Icons/Layouts/OnePlayerLandscape.tsx b/my-app/src/Icons/Layouts/OnePlayerLandscape.tsx
new file mode 100644
index 0000000..7e0db5e
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default OnePlayerLandscape;
diff --git a/my-app/src/Icons/Layouts/OnePlayerPortrait.tsx b/my-app/src/Icons/Layouts/OnePlayerPortrait.tsx
new file mode 100644
index 0000000..197a3a7
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default OnePlayerPortrait;
diff --git a/my-app/src/Icons/Layouts/SixPlayers.tsx b/my-app/src/Icons/Layouts/SixPlayers.tsx
new file mode 100644
index 0000000..4f13313
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default SixPlayers;
diff --git a/my-app/src/Icons/Layouts/SixPlayersSide.tsx b/my-app/src/Icons/Layouts/SixPlayersSide.tsx
new file mode 100644
index 0000000..7f22bfd
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default SixPlayersSide;
diff --git a/my-app/src/Icons/Layouts/ThreePlayers.tsx b/my-app/src/Icons/Layouts/ThreePlayers.tsx
new file mode 100644
index 0000000..c5c24e6
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default ThreePlayers;
diff --git a/my-app/src/Icons/Layouts/ThreePlayersSide.tsx b/my-app/src/Icons/Layouts/ThreePlayersSide.tsx
new file mode 100644
index 0000000..bddf6a3
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default ThreePlayersSide;
diff --git a/my-app/src/Icons/Layouts/TwoPlayersOppositeLandscape.tsx b/my-app/src/Icons/Layouts/TwoPlayersOppositeLandscape.tsx
new file mode 100644
index 0000000..05072d9
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default TwoPlayerOppositeLandscape;
diff --git a/my-app/src/Icons/Layouts/TwoPlayersOppositePortrait.tsx b/my-app/src/Icons/Layouts/TwoPlayersOppositePortrait.tsx
new file mode 100644
index 0000000..9aa7c1a
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default TwoPlayersOppositePortrait;
diff --git a/my-app/src/Icons/Layouts/TwoPlayersSameSide.tsx b/my-app/src/Icons/Layouts/TwoPlayersSameSide.tsx
new file mode 100644
index 0000000..37741b9
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default TwoPlayersSameSide;
diff --git a/my-app/src/Icons/svgs/FivePlayers.svg b/my-app/src/Icons/svgs/FivePlayers.svg
new file mode 100644
index 0000000..880f0a3
--- /dev/null
+++ b/my-app/src/Icons/svgs/FivePlayers.svg
@@ -0,0 +1,47 @@
+
+
diff --git a/my-app/src/Icons/svgs/FivePlayersSide.svg b/my-app/src/Icons/svgs/FivePlayersSide.svg
new file mode 100644
index 0000000..f91925a
--- /dev/null
+++ b/my-app/src/Icons/svgs/FivePlayersSide.svg
@@ -0,0 +1,51 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/FourPlayers.svg b/my-app/src/Icons/svgs/FourPlayers.svg
new file mode 100644
index 0000000..c2f58b8
--- /dev/null
+++ b/my-app/src/Icons/svgs/FourPlayers.svg
@@ -0,0 +1,45 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/FourPlayersSide.svg b/my-app/src/Icons/svgs/FourPlayersSide.svg
new file mode 100644
index 0000000..67c21b9
--- /dev/null
+++ b/my-app/src/Icons/svgs/FourPlayersSide.svg
@@ -0,0 +1,45 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/OnePlayerLandscape.svg b/my-app/src/Icons/svgs/OnePlayerLandscape.svg
new file mode 100644
index 0000000..75b53e5
--- /dev/null
+++ b/my-app/src/Icons/svgs/OnePlayerLandscape.svg
@@ -0,0 +1,25 @@
+
+
diff --git a/my-app/src/Icons/svgs/OnePlayerPortrait.svg b/my-app/src/Icons/svgs/OnePlayerPortrait.svg
new file mode 100644
index 0000000..60bbefc
--- /dev/null
+++ b/my-app/src/Icons/svgs/OnePlayerPortrait.svg
@@ -0,0 +1,27 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/SixPlayers.svg b/my-app/src/Icons/svgs/SixPlayers.svg
new file mode 100644
index 0000000..ffa72cd
--- /dev/null
+++ b/my-app/src/Icons/svgs/SixPlayers.svg
@@ -0,0 +1,56 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/SixPlayersSide.svg b/my-app/src/Icons/svgs/SixPlayersSide.svg
new file mode 100644
index 0000000..552f945
--- /dev/null
+++ b/my-app/src/Icons/svgs/SixPlayersSide.svg
@@ -0,0 +1,57 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/ThreePlayers.svg b/my-app/src/Icons/svgs/ThreePlayers.svg
new file mode 100644
index 0000000..c9ab8fb
--- /dev/null
+++ b/my-app/src/Icons/svgs/ThreePlayers.svg
@@ -0,0 +1,39 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/ThreePlayersSide.svg b/my-app/src/Icons/svgs/ThreePlayersSide.svg
new file mode 100644
index 0000000..f649d46
--- /dev/null
+++ b/my-app/src/Icons/svgs/ThreePlayersSide.svg
@@ -0,0 +1,39 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/TwoPlayersOppositeLandscape.svg b/my-app/src/Icons/svgs/TwoPlayersOppositeLandscape.svg
new file mode 100644
index 0000000..e822724
--- /dev/null
+++ b/my-app/src/Icons/svgs/TwoPlayersOppositeLandscape.svg
@@ -0,0 +1,33 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/TwoPlayersOppositePortrait.svg b/my-app/src/Icons/svgs/TwoPlayersOppositePortrait.svg
new file mode 100644
index 0000000..892ea3f
--- /dev/null
+++ b/my-app/src/Icons/svgs/TwoPlayersOppositePortrait.svg
@@ -0,0 +1,33 @@
+
+
+
diff --git a/my-app/src/Icons/svgs/TwoPlayersSameSide-svg.svg b/my-app/src/Icons/svgs/TwoPlayersSameSide-svg.svg
new file mode 100644
index 0000000..aafc5fe
--- /dev/null
+++ b/my-app/src/Icons/svgs/TwoPlayersSameSide-svg.svg
@@ -0,0 +1,33 @@
+
+
+