diff --git a/footer.php b/footer.php
index 521fd3a..afda716 100644
--- a/footer.php
+++ b/footer.php
@@ -103,8 +103,9 @@ $footerNav = ! empty( $locations['footer_navigation'] )
                         'views/partials/social-media',
                         null,
                         array(
-                            'circle'  => true,
-                            'classes' => 'social-icons p-0 text-14px bg-white! text-cwc-blue-02! hover:opacity-80!',
+                            'circle'  => false,
+                            'classes' => 'social-icons p-0 hover:opacity-80!',
+                            'size'    => '24',
                         )
                     );
                     ?>
diff --git a/styles/base/misc.css b/styles/base/misc.css
index 5da6b1d..944390b 100644
--- a/styles/base/misc.css
+++ b/styles/base/misc.css
@@ -1 +1,5 @@
 /* Miscellaneous extra styles */
+
+.social-icons svg {
+    @apply bg-transparent fill-white rounded-full block;
+}
diff --git a/views/components/nav-aux.php b/views/components/nav-aux.php
index c99b0cb..1a81a63 100644
--- a/views/components/nav-aux.php
+++ b/views/components/nav-aux.php
@@ -34,7 +34,17 @@ $profile = getFieldValue( 'social_media.profile_name' ) ? getFieldValue( 'social
 			?>
 		</nav>
 
-		<?php get_template_part( 'views/partials/social-media' ); ?>
+		<?php
+        get_template_part(
+            'views/partials/social-media',
+            null,
+            array(
+                'circle'  => false,
+                'classes' => 'social-icons p-0 hover:opacity-80!',
+                'size'    => '16',
+            )
+        );
+        ?>
 
         <span class="font-semibold text-16px"><?php echo esc_html( $profile ); ?></span>
 	</div>
diff --git a/views/icons/facebook.php b/views/icons/facebook.php
index 7cbd0a9..ff7e69b 100644
--- a/views/icons/facebook.php
+++ b/views/icons/facebook.php
@@ -1 +1,6 @@
-<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-facebook.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
+<?php $size = $args['size'] ?? '24'; ?>
+
+<svg width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="facebook-icon-title">
+    <title id="facebook-icon-title">Facebook</title>
+    <path d="M24 12.0301C24 5.38947 18.624 0 12 0C5.376 0 0 5.38947 0 12.0301C0 17.8526 4.128 22.7008 9.6 23.8195V15.6391H7.2V12.0301H9.6V9.02256C9.6 6.70075 11.484 4.81203 13.8 4.81203H16.8V8.42105H14.4C13.74 8.42105 13.2 8.96241 13.2 9.62406V12.0301H16.8V15.6391H13.2V24C19.26 23.3985 24 18.2737 24 12.0301Z" />
+</svg>
diff --git a/views/icons/linkedin.php b/views/icons/linkedin.php
index 3c16583..ac4588d 100644
--- a/views/icons/linkedin.php
+++ b/views/icons/linkedin.php
@@ -1 +1,5 @@
-<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-linkedin.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
+<?php $size = $args['size'] ?? '24'; ?>
+
+<svg width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM9.0625 16.9738H6.6325V9.15375H9.0625V16.9738ZM7.8325 8.19375C7.065 8.19375 6.56875 7.65 6.56875 6.9775C6.56875 6.29125 7.08 5.76375 7.86375 5.76375C8.6475 5.76375 9.1275 6.29125 9.1425 6.9775C9.1425 7.65 8.6475 8.19375 7.8325 8.19375ZM17.9375 16.9738H15.5075V12.64C15.5075 11.6313 15.155 10.9462 14.2763 10.9462C13.605 10.9462 13.2063 11.41 13.03 11.8563C12.965 12.015 12.9488 12.24 12.9488 12.4638V16.9725H10.5175V11.6475C10.5175 10.6713 10.4862 9.855 10.4537 9.1525H12.565L12.6763 10.2388H12.725C13.045 9.72875 13.8288 8.97625 15.14 8.97625C16.7388 8.97625 17.9375 10.0475 17.9375 12.35V16.9738Z" />
+</svg>
diff --git a/views/icons/youtube.php b/views/icons/youtube.php
index 3c5e5e6..2d00d37 100644
--- a/views/icons/youtube.php
+++ b/views/icons/youtube.php
@@ -1 +1,5 @@
-<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/social-youtube.svg' ) ); ?>" alt="" width="24" height="24" aria-hidden="true" />
+<?php $size = $args['size'] ?? '24'; ?>
+
+<svg width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.0037 11.7913L11.1963 10.4813C10.9513 10.3675 10.75 10.495 10.75 10.7662V13.2338C10.75 13.505 10.9513 13.6325 11.1963 13.5188L14.0025 12.2087C14.2488 12.0938 14.2487 11.9063 14.0037 11.7913ZM12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM12 16.875C5.8575 16.875 5.75 16.3213 5.75 12C5.75 7.67875 5.8575 7.125 12 7.125C18.1425 7.125 18.25 7.67875 18.25 12C18.25 16.3213 18.1425 16.875 12 16.875Z" />
+</svg>
diff --git a/views/partials/social-media.php b/views/partials/social-media.php
index 30a66e0..e07b9b4 100644
--- a/views/partials/social-media.php
+++ b/views/partials/social-media.php
@@ -7,8 +7,9 @@
 
 namespace CWC;
 
-$classes = $args['classes'] ?? '';
 $circle  = $args['circle'] ?? '';
+$classes = $args['classes'] ?? '';
+$size    = $args['size'] ?? '24';
 
 // Define social media sites and their URLs
 $sites = array(
@@ -30,7 +31,7 @@ foreach ( $sites as $name => $url ) {
 	if ( $url ) {
 		?>
 	<a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?> p-0 leading-none">
-		<?php get_template_part( 'views/icons/' . $name ); ?>
+		<?php get_template_part( 'views/icons/' . $name, null, array( 'size' => $size ) ); ?>
 		<span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span>
 	</a>
 		<?php