diff --git a/components/shared/Icon/Icon.tsx b/components/shared/Icon/Icon.tsx
index 39aa9377..10ec75ed 100644
--- a/components/shared/Icon/Icon.tsx
+++ b/components/shared/Icon/Icon.tsx
@@ -6,7 +6,7 @@ type IconProps = {
   className?: string;
 };
 
-const Icon = ({ name, className }: IconProps) => {
+const Icon = ({ name, className }: Readonly<IconProps>) => {
   const GenerateIcon = icons[name];
 
   return <GenerateIcon className={className} aria-hidden />;
diff --git a/components/shared/Icon/icons/generate/arcade.tsx b/components/shared/Icon/icons/generate/arcade.tsx
index 7af299a5..08c93418 100644
--- a/components/shared/Icon/icons/generate/arcade.tsx
+++ b/components/shared/Icon/icons/generate/arcade.tsx
@@ -4,7 +4,7 @@ type ArcadeProps = {
   className?: string;
 };
 
-export default function Arcade({ className }: ArcadeProps) {
+export default function Arcade({ className }: Readonly<ArcadeProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/archery.tsx b/components/shared/Icon/icons/generate/archery.tsx
index 43a2f46b..6f0349bb 100644
--- a/components/shared/Icon/icons/generate/archery.tsx
+++ b/components/shared/Icon/icons/generate/archery.tsx
@@ -4,7 +4,7 @@ type ArcheryProps = {
   className?: string;
 };
 
-export default function Archery({ className }: ArcheryProps) {
+export default function Archery({ className }: Readonly<ArcheryProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/arrow-left.tsx b/components/shared/Icon/icons/generate/arrow-left.tsx
index 2b081198..a28fe07e 100644
--- a/components/shared/Icon/icons/generate/arrow-left.tsx
+++ b/components/shared/Icon/icons/generate/arrow-left.tsx
@@ -4,7 +4,7 @@ type ArrowLeftProps = {
   className?: string;
 };
 
-export default function ArrowLeft({ className }: ArrowLeftProps) {
+export default function ArrowLeft({ className }: Readonly<ArrowLeftProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/arrow-right.tsx b/components/shared/Icon/icons/generate/arrow-right.tsx
index c21ffd3e..e286e0d9 100644
--- a/components/shared/Icon/icons/generate/arrow-right.tsx
+++ b/components/shared/Icon/icons/generate/arrow-right.tsx
@@ -4,7 +4,7 @@ type ArrowRightProps = {
   className?: string;
 };
 
-export default function ArrowRight({ className }: ArrowRightProps) {
+export default function ArrowRight({ className }: Readonly<ArrowRightProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/badge.tsx b/components/shared/Icon/icons/generate/badge.tsx
index 85868bdb..85d8e99e 100644
--- a/components/shared/Icon/icons/generate/badge.tsx
+++ b/components/shared/Icon/icons/generate/badge.tsx
@@ -4,7 +4,7 @@ type BadgeProps = {
   className?: string;
 };
 
-export default function Badge({ className }: BadgeProps) {
+export default function Badge({ className }: Readonly<BadgeProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/bright-crown.tsx b/components/shared/Icon/icons/generate/bright-crown.tsx
index 15b61c15..81c04a9f 100644
--- a/components/shared/Icon/icons/generate/bright-crown.tsx
+++ b/components/shared/Icon/icons/generate/bright-crown.tsx
@@ -4,7 +4,7 @@ type BrightCrownProps = {
   className?: string;
 };
 
-export default function BrightCrown({ className }: BrightCrownProps) {
+export default function BrightCrown({ className }: Readonly<BrightCrownProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/calendar.tsx b/components/shared/Icon/icons/generate/calendar.tsx
index dcab24cc..a8981033 100644
--- a/components/shared/Icon/icons/generate/calendar.tsx
+++ b/components/shared/Icon/icons/generate/calendar.tsx
@@ -4,7 +4,7 @@ type CalendarProps = {
   className?: string;
 };
 
-export default function Calendar({ className }: CalendarProps) {
+export default function Calendar({ className }: Readonly<CalendarProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/chat.tsx b/components/shared/Icon/icons/generate/chat.tsx
index 077b704b..6e5579c0 100644
--- a/components/shared/Icon/icons/generate/chat.tsx
+++ b/components/shared/Icon/icons/generate/chat.tsx
@@ -4,7 +4,7 @@ type ChatProps = {
   className?: string;
 };
 
-export default function Chat({ className }: ChatProps) {
+export default function Chat({ className }: Readonly<ChatProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/check.tsx b/components/shared/Icon/icons/generate/check.tsx
index 531348ac..34ad7cf3 100644
--- a/components/shared/Icon/icons/generate/check.tsx
+++ b/components/shared/Icon/icons/generate/check.tsx
@@ -4,7 +4,7 @@ type CheckProps = {
   className?: string;
 };
 
-export default function Check({ className }: CheckProps) {
+export default function Check({ className }: Readonly<CheckProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/chess-rook.tsx b/components/shared/Icon/icons/generate/chess-rook.tsx
index 1e55ce59..e7669ad3 100644
--- a/components/shared/Icon/icons/generate/chess-rook.tsx
+++ b/components/shared/Icon/icons/generate/chess-rook.tsx
@@ -4,7 +4,7 @@ type ChessRookProps = {
   className?: string;
 };
 
-export default function ChessRook({ className }: ChessRookProps) {
+export default function ChessRook({ className }: Readonly<ChessRookProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/clock.tsx b/components/shared/Icon/icons/generate/clock.tsx
index 2ba7eea2..80d5c3cb 100644
--- a/components/shared/Icon/icons/generate/clock.tsx
+++ b/components/shared/Icon/icons/generate/clock.tsx
@@ -4,7 +4,7 @@ type ClockProps = {
   className?: string;
 };
 
-export default function Clock({ className }: ClockProps) {
+export default function Clock({ className }: Readonly<ClockProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/collectbook.tsx b/components/shared/Icon/icons/generate/collectbook.tsx
index 7522c7cf..a39a6c7b 100644
--- a/components/shared/Icon/icons/generate/collectbook.tsx
+++ b/components/shared/Icon/icons/generate/collectbook.tsx
@@ -4,7 +4,7 @@ type CollectbookProps = {
   className?: string;
 };
 
-export default function Collectbook({ className }: CollectbookProps) {
+export default function Collectbook({ className }: Readonly<CollectbookProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/discord.tsx b/components/shared/Icon/icons/generate/discord.tsx
index 14acb4a5..257bbb3e 100644
--- a/components/shared/Icon/icons/generate/discord.tsx
+++ b/components/shared/Icon/icons/generate/discord.tsx
@@ -4,7 +4,7 @@ type DiscordProps = {
   className?: string;
 };
 
-export default function Discord({ className }: DiscordProps) {
+export default function Discord({ className }: Readonly<DiscordProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/edit-mode.tsx b/components/shared/Icon/icons/generate/edit-mode.tsx
index b17c7765..bc06f198 100644
--- a/components/shared/Icon/icons/generate/edit-mode.tsx
+++ b/components/shared/Icon/icons/generate/edit-mode.tsx
@@ -4,7 +4,7 @@ type EditModeProps = {
   className?: string;
 };
 
-export default function EditMode({ className }: EditModeProps) {
+export default function EditMode({ className }: Readonly<EditModeProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/edit.tsx b/components/shared/Icon/icons/generate/edit.tsx
index 433b7ab6..bb6a4c93 100644
--- a/components/shared/Icon/icons/generate/edit.tsx
+++ b/components/shared/Icon/icons/generate/edit.tsx
@@ -4,7 +4,7 @@ type EditProps = {
   className?: string;
 };
 
-export default function Edit({ className }: EditProps) {
+export default function Edit({ className }: Readonly<EditProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/explore.tsx b/components/shared/Icon/icons/generate/explore.tsx
index 095bfaae..fdf3e760 100644
--- a/components/shared/Icon/icons/generate/explore.tsx
+++ b/components/shared/Icon/icons/generate/explore.tsx
@@ -4,7 +4,7 @@ type ExploreProps = {
   className?: string;
 };
 
-export default function Explore({ className }: ExploreProps) {
+export default function Explore({ className }: Readonly<ExploreProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/full-screen.tsx b/components/shared/Icon/icons/generate/full-screen.tsx
index 29e6dd5a..592558d8 100644
--- a/components/shared/Icon/icons/generate/full-screen.tsx
+++ b/components/shared/Icon/icons/generate/full-screen.tsx
@@ -4,7 +4,7 @@ type FullScreenProps = {
   className?: string;
 };
 
-export default function FullScreen({ className }: FullScreenProps) {
+export default function FullScreen({ className }: Readonly<FullScreenProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/gamepad.tsx b/components/shared/Icon/icons/generate/gamepad.tsx
index 25da2241..a3d3c6ab 100644
--- a/components/shared/Icon/icons/generate/gamepad.tsx
+++ b/components/shared/Icon/icons/generate/gamepad.tsx
@@ -4,7 +4,7 @@ type GamepadProps = {
   className?: string;
 };
 
-export default function Gamepad({ className }: GamepadProps) {
+export default function Gamepad({ className }: Readonly<GamepadProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/github.tsx b/components/shared/Icon/icons/generate/github.tsx
index 6a376edb..b6de2649 100644
--- a/components/shared/Icon/icons/generate/github.tsx
+++ b/components/shared/Icon/icons/generate/github.tsx
@@ -4,7 +4,7 @@ type GithubProps = {
   className?: string;
 };
 
-export default function Github({ className }: GithubProps) {
+export default function Github({ className }: Readonly<GithubProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/google.tsx b/components/shared/Icon/icons/generate/google.tsx
index a145c6de..98b83367 100644
--- a/components/shared/Icon/icons/generate/google.tsx
+++ b/components/shared/Icon/icons/generate/google.tsx
@@ -4,7 +4,7 @@ type GoogleProps = {
   className?: string;
 };
 
-export default function Google({ className }: GoogleProps) {
+export default function Google({ className }: Readonly<GoogleProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/heart.tsx b/components/shared/Icon/icons/generate/heart.tsx
index b8f25660..c7273455 100644
--- a/components/shared/Icon/icons/generate/heart.tsx
+++ b/components/shared/Icon/icons/generate/heart.tsx
@@ -4,7 +4,7 @@ type HeartProps = {
   className?: string;
 };
 
-export default function Heart({ className }: HeartProps) {
+export default function Heart({ className }: Readonly<HeartProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/help-circle.tsx b/components/shared/Icon/icons/generate/help-circle.tsx
index 05b6ad38..67c460ee 100644
--- a/components/shared/Icon/icons/generate/help-circle.tsx
+++ b/components/shared/Icon/icons/generate/help-circle.tsx
@@ -4,7 +4,7 @@ type HelpCircleProps = {
   className?: string;
 };
 
-export default function HelpCircle({ className }: HelpCircleProps) {
+export default function HelpCircle({ className }: Readonly<HelpCircleProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/home.tsx b/components/shared/Icon/icons/generate/home.tsx
index 7cb2c2e1..1b65451c 100644
--- a/components/shared/Icon/icons/generate/home.tsx
+++ b/components/shared/Icon/icons/generate/home.tsx
@@ -4,7 +4,7 @@ type HomeProps = {
   className?: string;
 };
 
-export default function Home({ className }: HomeProps) {
+export default function Home({ className }: Readonly<HomeProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/host.tsx b/components/shared/Icon/icons/generate/host.tsx
index ef1d2661..1e191e7f 100644
--- a/components/shared/Icon/icons/generate/host.tsx
+++ b/components/shared/Icon/icons/generate/host.tsx
@@ -4,7 +4,7 @@ type HostProps = {
   className?: string;
 };
 
-export default function Host({ className }: HostProps) {
+export default function Host({ className }: Readonly<HostProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/hot-air-balloon.tsx b/components/shared/Icon/icons/generate/hot-air-balloon.tsx
index f439d85b..b3cce344 100644
--- a/components/shared/Icon/icons/generate/hot-air-balloon.tsx
+++ b/components/shared/Icon/icons/generate/hot-air-balloon.tsx
@@ -4,7 +4,9 @@ type HotAirBalloonProps = {
   className?: string;
 };
 
-export default function HotAirBalloon({ className }: HotAirBalloonProps) {
+export default function HotAirBalloon({
+  className,
+}: Readonly<HotAirBalloonProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/house-lock.tsx b/components/shared/Icon/icons/generate/house-lock.tsx
index 96011ecb..dea4751d 100644
--- a/components/shared/Icon/icons/generate/house-lock.tsx
+++ b/components/shared/Icon/icons/generate/house-lock.tsx
@@ -4,7 +4,7 @@ type HouseLockProps = {
   className?: string;
 };
 
-export default function HouseLock({ className }: HouseLockProps) {
+export default function HouseLock({ className }: Readonly<HouseLockProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/house.tsx b/components/shared/Icon/icons/generate/house.tsx
index 2ef2511f..a77a6517 100644
--- a/components/shared/Icon/icons/generate/house.tsx
+++ b/components/shared/Icon/icons/generate/house.tsx
@@ -4,7 +4,7 @@ type HouseProps = {
   className?: string;
 };
 
-export default function House({ className }: HouseProps) {
+export default function House({ className }: Readonly<HouseProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/leave-game.tsx b/components/shared/Icon/icons/generate/leave-game.tsx
index b805f7c0..78031fc8 100644
--- a/components/shared/Icon/icons/generate/leave-game.tsx
+++ b/components/shared/Icon/icons/generate/leave-game.tsx
@@ -4,7 +4,7 @@ type LeaveGameProps = {
   className?: string;
 };
 
-export default function LeaveGame({ className }: LeaveGameProps) {
+export default function LeaveGame({ className }: Readonly<LeaveGameProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/linkedin.tsx b/components/shared/Icon/icons/generate/linkedin.tsx
index 718ac34f..2b78af9a 100644
--- a/components/shared/Icon/icons/generate/linkedin.tsx
+++ b/components/shared/Icon/icons/generate/linkedin.tsx
@@ -4,7 +4,7 @@ type LinkedinProps = {
   className?: string;
 };
 
-export default function Linkedin({ className }: LinkedinProps) {
+export default function Linkedin({ className }: Readonly<LinkedinProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/log-out.tsx b/components/shared/Icon/icons/generate/log-out.tsx
index 866c983f..acd7406f 100644
--- a/components/shared/Icon/icons/generate/log-out.tsx
+++ b/components/shared/Icon/icons/generate/log-out.tsx
@@ -4,7 +4,7 @@ type LogOutProps = {
   className?: string;
 };
 
-export default function LogOut({ className }: LogOutProps) {
+export default function LogOut({ className }: Readonly<LogOutProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/logo.tsx b/components/shared/Icon/icons/generate/logo.tsx
index bc16e979..c5c406ee 100644
--- a/components/shared/Icon/icons/generate/logo.tsx
+++ b/components/shared/Icon/icons/generate/logo.tsx
@@ -4,7 +4,7 @@ type LogoProps = {
   className?: string;
 };
 
-export default function Logo({ className }: LogoProps) {
+export default function Logo({ className }: Readonly<LogoProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/long-arrow-up-left.tsx b/components/shared/Icon/icons/generate/long-arrow-up-left.tsx
index 8db85fdc..f843895c 100644
--- a/components/shared/Icon/icons/generate/long-arrow-up-left.tsx
+++ b/components/shared/Icon/icons/generate/long-arrow-up-left.tsx
@@ -4,7 +4,9 @@ type LongArrowUpLeftProps = {
   className?: string;
 };
 
-export default function LongArrowUpLeft({ className }: LongArrowUpLeftProps) {
+export default function LongArrowUpLeft({
+  className,
+}: Readonly<LongArrowUpLeftProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/menu.tsx b/components/shared/Icon/icons/generate/menu.tsx
index c16e5424..eacab00e 100644
--- a/components/shared/Icon/icons/generate/menu.tsx
+++ b/components/shared/Icon/icons/generate/menu.tsx
@@ -4,7 +4,7 @@ type MenuProps = {
   className?: string;
 };
 
-export default function Menu({ className }: MenuProps) {
+export default function Menu({ className }: Readonly<MenuProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/move.tsx b/components/shared/Icon/icons/generate/move.tsx
index 020ca375..1104aa27 100644
--- a/components/shared/Icon/icons/generate/move.tsx
+++ b/components/shared/Icon/icons/generate/move.tsx
@@ -4,7 +4,7 @@ type MoveProps = {
   className?: string;
 };
 
-export default function Move({ className }: MoveProps) {
+export default function Move({ className }: Readonly<MoveProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/nav-arrow-down.tsx b/components/shared/Icon/icons/generate/nav-arrow-down.tsx
index 27751036..40abe5b4 100644
--- a/components/shared/Icon/icons/generate/nav-arrow-down.tsx
+++ b/components/shared/Icon/icons/generate/nav-arrow-down.tsx
@@ -4,7 +4,9 @@ type NavArrowDownProps = {
   className?: string;
 };
 
-export default function NavArrowDown({ className }: NavArrowDownProps) {
+export default function NavArrowDown({
+  className,
+}: Readonly<NavArrowDownProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/nav-arrow-left.tsx b/components/shared/Icon/icons/generate/nav-arrow-left.tsx
index d892c754..b08ca596 100644
--- a/components/shared/Icon/icons/generate/nav-arrow-left.tsx
+++ b/components/shared/Icon/icons/generate/nav-arrow-left.tsx
@@ -4,7 +4,9 @@ type NavArrowLeftProps = {
   className?: string;
 };
 
-export default function NavArrowLeft({ className }: NavArrowLeftProps) {
+export default function NavArrowLeft({
+  className,
+}: Readonly<NavArrowLeftProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/nav-arrow-right.tsx b/components/shared/Icon/icons/generate/nav-arrow-right.tsx
index 35216e05..1be52839 100644
--- a/components/shared/Icon/icons/generate/nav-arrow-right.tsx
+++ b/components/shared/Icon/icons/generate/nav-arrow-right.tsx
@@ -4,7 +4,9 @@ type NavArrowRightProps = {
   className?: string;
 };
 
-export default function NavArrowRight({ className }: NavArrowRightProps) {
+export default function NavArrowRight({
+  className,
+}: Readonly<NavArrowRightProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/nonpublic.tsx b/components/shared/Icon/icons/generate/nonpublic.tsx
index c43e0d22..ea03b118 100644
--- a/components/shared/Icon/icons/generate/nonpublic.tsx
+++ b/components/shared/Icon/icons/generate/nonpublic.tsx
@@ -4,7 +4,7 @@ type NonpublicProps = {
   className?: string;
 };
 
-export default function Nonpublic({ className }: NonpublicProps) {
+export default function Nonpublic({ className }: Readonly<NonpublicProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/notification.tsx b/components/shared/Icon/icons/generate/notification.tsx
index e5fc323f..89ceb74e 100644
--- a/components/shared/Icon/icons/generate/notification.tsx
+++ b/components/shared/Icon/icons/generate/notification.tsx
@@ -4,7 +4,9 @@ type NotificationProps = {
   className?: string;
 };
 
-export default function Notification({ className }: NotificationProps) {
+export default function Notification({
+  className,
+}: Readonly<NotificationProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/play.tsx b/components/shared/Icon/icons/generate/play.tsx
index 197f7fe5..6a08d14d 100644
--- a/components/shared/Icon/icons/generate/play.tsx
+++ b/components/shared/Icon/icons/generate/play.tsx
@@ -4,7 +4,7 @@ type PlayProps = {
   className?: string;
 };
 
-export default function Play({ className }: PlayProps) {
+export default function Play({ className }: Readonly<PlayProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/player.tsx b/components/shared/Icon/icons/generate/player.tsx
index 3b4da039..27c01e92 100644
--- a/components/shared/Icon/icons/generate/player.tsx
+++ b/components/shared/Icon/icons/generate/player.tsx
@@ -4,7 +4,7 @@ type PlayerProps = {
   className?: string;
 };
 
-export default function Player({ className }: PlayerProps) {
+export default function Player({ className }: Readonly<PlayerProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/plus.tsx b/components/shared/Icon/icons/generate/plus.tsx
index 253b90b0..15cf1b06 100644
--- a/components/shared/Icon/icons/generate/plus.tsx
+++ b/components/shared/Icon/icons/generate/plus.tsx
@@ -4,7 +4,7 @@ type PlusProps = {
   className?: string;
 };
 
-export default function Plus({ className }: PlusProps) {
+export default function Plus({ className }: Readonly<PlusProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/preview.tsx b/components/shared/Icon/icons/generate/preview.tsx
index cb5b56a4..f883fcf9 100644
--- a/components/shared/Icon/icons/generate/preview.tsx
+++ b/components/shared/Icon/icons/generate/preview.tsx
@@ -4,7 +4,7 @@ type PreviewProps = {
   className?: string;
 };
 
-export default function Preview({ className }: PreviewProps) {
+export default function Preview({ className }: Readonly<PreviewProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/refresh.tsx b/components/shared/Icon/icons/generate/refresh.tsx
index a2959bcb..630f0ec9 100644
--- a/components/shared/Icon/icons/generate/refresh.tsx
+++ b/components/shared/Icon/icons/generate/refresh.tsx
@@ -4,7 +4,7 @@ type RefreshProps = {
   className?: string;
 };
 
-export default function Refresh({ className }: RefreshProps) {
+export default function Refresh({ className }: Readonly<RefreshProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/report-question.tsx b/components/shared/Icon/icons/generate/report-question.tsx
index 2674a81e..57e01c5b 100644
--- a/components/shared/Icon/icons/generate/report-question.tsx
+++ b/components/shared/Icon/icons/generate/report-question.tsx
@@ -4,7 +4,9 @@ type ReportQuestionProps = {
   className?: string;
 };
 
-export default function ReportQuestion({ className }: ReportQuestionProps) {
+export default function ReportQuestion({
+  className,
+}: Readonly<ReportQuestionProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/search.tsx b/components/shared/Icon/icons/generate/search.tsx
index 6a9f8652..d0af92df 100644
--- a/components/shared/Icon/icons/generate/search.tsx
+++ b/components/shared/Icon/icons/generate/search.tsx
@@ -4,7 +4,7 @@ type SearchProps = {
   className?: string;
 };
 
-export default function Search({ className }: SearchProps) {
+export default function Search({ className }: Readonly<SearchProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/sent.tsx b/components/shared/Icon/icons/generate/sent.tsx
index 2d8d1879..1457dfe9 100644
--- a/components/shared/Icon/icons/generate/sent.tsx
+++ b/components/shared/Icon/icons/generate/sent.tsx
@@ -4,7 +4,7 @@ type SentProps = {
   className?: string;
 };
 
-export default function Sent({ className }: SentProps) {
+export default function Sent({ className }: Readonly<SentProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/sharing.tsx b/components/shared/Icon/icons/generate/sharing.tsx
index f31fd914..dccb0955 100644
--- a/components/shared/Icon/icons/generate/sharing.tsx
+++ b/components/shared/Icon/icons/generate/sharing.tsx
@@ -4,7 +4,7 @@ type SharingProps = {
   className?: string;
 };
 
-export default function Sharing({ className }: SharingProps) {
+export default function Sharing({ className }: Readonly<SharingProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/show-chat.tsx b/components/shared/Icon/icons/generate/show-chat.tsx
index 832768cc..17284164 100644
--- a/components/shared/Icon/icons/generate/show-chat.tsx
+++ b/components/shared/Icon/icons/generate/show-chat.tsx
@@ -4,7 +4,7 @@ type ShowChatProps = {
   className?: string;
 };
 
-export default function ShowChat({ className }: ShowChatProps) {
+export default function ShowChat({ className }: Readonly<ShowChatProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/show-ui.tsx b/components/shared/Icon/icons/generate/show-ui.tsx
index 1d285672..e968f643 100644
--- a/components/shared/Icon/icons/generate/show-ui.tsx
+++ b/components/shared/Icon/icons/generate/show-ui.tsx
@@ -4,7 +4,7 @@ type ShowUiProps = {
   className?: string;
 };
 
-export default function ShowUi({ className }: ShowUiProps) {
+export default function ShowUi({ className }: Readonly<ShowUiProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/sort.tsx b/components/shared/Icon/icons/generate/sort.tsx
index ff9de1dd..a176d00b 100644
--- a/components/shared/Icon/icons/generate/sort.tsx
+++ b/components/shared/Icon/icons/generate/sort.tsx
@@ -4,7 +4,7 @@ type SortProps = {
   className?: string;
 };
 
-export default function Sort({ className }: SortProps) {
+export default function Sort({ className }: Readonly<SortProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/spiral.tsx b/components/shared/Icon/icons/generate/spiral.tsx
index 66512cb6..15ab52cd 100644
--- a/components/shared/Icon/icons/generate/spiral.tsx
+++ b/components/shared/Icon/icons/generate/spiral.tsx
@@ -4,7 +4,7 @@ type SpiralProps = {
   className?: string;
 };
 
-export default function Spiral({ className }: SpiralProps) {
+export default function Spiral({ className }: Readonly<SpiralProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/star.tsx b/components/shared/Icon/icons/generate/star.tsx
index 8ec60ace..04020eb8 100644
--- a/components/shared/Icon/icons/generate/star.tsx
+++ b/components/shared/Icon/icons/generate/star.tsx
@@ -4,7 +4,7 @@ type StarProps = {
   className?: string;
 };
 
-export default function Star({ className }: StarProps) {
+export default function Star({ className }: Readonly<StarProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/upload.tsx b/components/shared/Icon/icons/generate/upload.tsx
index ebec010f..68616aa8 100644
--- a/components/shared/Icon/icons/generate/upload.tsx
+++ b/components/shared/Icon/icons/generate/upload.tsx
@@ -4,7 +4,7 @@ type UploadProps = {
   className?: string;
 };
 
-export default function Upload({ className }: UploadProps) {
+export default function Upload({ className }: Readonly<UploadProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/user.tsx b/components/shared/Icon/icons/generate/user.tsx
index fbe17f59..c2534db5 100644
--- a/components/shared/Icon/icons/generate/user.tsx
+++ b/components/shared/Icon/icons/generate/user.tsx
@@ -4,7 +4,7 @@ type UserProps = {
   className?: string;
 };
 
-export default function User({ className }: UserProps) {
+export default function User({ className }: Readonly<UserProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/user_host.tsx b/components/shared/Icon/icons/generate/user_host.tsx
index 04e43d4b..2988a0de 100644
--- a/components/shared/Icon/icons/generate/user_host.tsx
+++ b/components/shared/Icon/icons/generate/user_host.tsx
@@ -4,7 +4,7 @@ type User_hostProps = {
   className?: string;
 };
 
-export default function User_host({ className }: User_hostProps) {
+export default function User_host({ className }: Readonly<User_hostProps>) {
   return (
     <svg
       className={className}
diff --git a/components/shared/Icon/icons/generate/x.tsx b/components/shared/Icon/icons/generate/x.tsx
index 833915d8..8f806b53 100644
--- a/components/shared/Icon/icons/generate/x.tsx
+++ b/components/shared/Icon/icons/generate/x.tsx
@@ -4,7 +4,7 @@ type XProps = {
   className?: string;
 };
 
-export default function X({ className }: XProps) {
+export default function X({ className }: Readonly<XProps>) {
   return (
     <svg
       className={className}
diff --git a/scripts/iconConverter/IconTemplate.tsx b/scripts/iconConverter/IconTemplate.tsx
index 0f381d49..7f56b478 100644
--- a/scripts/iconConverter/IconTemplate.tsx
+++ b/scripts/iconConverter/IconTemplate.tsx
@@ -2,7 +2,7 @@ type IconNameProps = {
   className?: string;
 };
 
-export default function IconName({ className }: IconNameProps) {
+export default function IconName({ className }: Readonly<IconNameProps>) {
   return (
     <svg className={className} replace-attributes>
       replace-content