diff --git a/docroot/modules/humsci/hs_blocks/src/Plugin/Block/SocialMediaBlock.php b/docroot/modules/humsci/hs_blocks/src/Plugin/Block/SocialMediaBlock.php
index 4d8210b27..4887aa9a7 100644
--- a/docroot/modules/humsci/hs_blocks/src/Plugin/Block/SocialMediaBlock.php
+++ b/docroot/modules/humsci/hs_blocks/src/Plugin/Block/SocialMediaBlock.php
@@ -103,11 +103,12 @@ public function blockSubmit($form, FormStateInterface $form_state): void {
    * {@inheritdoc}
    */
   public function build(): array {
+    $links = array_map([$this, 'linkWithIcon'], $this->configuration['links']);
     $build = [
       '#theme' => 'hs_blocks_social_media',
       '#icon_size' => $this->configuration['icon_size'],
       '#layout' => $this->configuration['layout'],
-      '#links' => $this->configuration['links'],
+      '#links' => $links,
       '#cache' => [
         'tags' => array_merge($this->getCacheTags(), ['block_view']),
         'contexts' => ['user', 'user.permissions'],
@@ -146,4 +147,116 @@ public static function validateLinks(array $element, FormStateInterface $form_st
     }
   }
 
+  /**
+   * Adds the social media icon and name information to a link.
+   *
+   * @param array $link
+   *   The link item.
+   *
+   * @return array
+   *   The updated link item with the icon and social provider name.
+   */
+  protected function linkWithIcon(array $link) {
+    $url = $link['link_url'];
+    $providers = [
+      [
+        'domains' => ['facebook.com', 'fb.com', 'fb.me'],
+        'icon_classes' => 'fa-brands fa-square-facebook',
+        'name' => 'Facebook',
+      ],
+      [
+        'domains' => ['twitter.com', 'x.com'],
+        'icon_classes' => 'fa-brands fa-square-x-twitter',
+        'name' => 'Twitter',
+      ],
+      [
+        'domains' => ['linkedin.com', 'lnkd.in'],
+        'icon_classes' => 'fa-brands fa-linkedin',
+        'name' => 'Linkedin',
+      ],
+      [
+        'domains' => ['instagram.com', 'instagr.am'],
+        'icon_classes' => 'fa-brands fa-square-instagram',
+        'name' => 'Instagram',
+      ],
+      [
+        'domains' => ['youtube.com', 'youtu.be'],
+        'icon_classes' => 'fa-brands fa-square-youtube',
+        'name' => 'Youtube',
+      ],
+      [
+        'domains' => ['vimeo.com'],
+        'icon_classes' => 'fa-brands fa-vimeo',
+        'name' => 'Vimeo',
+      ],
+      [
+        'domains' => ['snapchat.com'],
+        'icon_classes' => 'fa-brands fa-square-snapchat',
+        'name' => 'Snapchat',
+      ],
+      [
+        'domains' => ['soundcloud.com'],
+        'icon_classes' => 'fa-brands fa-soundcloud',
+        'name' => 'Soundcloud',
+      ],
+      [
+        'domains' => ['spotify.com'],
+        'icon_classes' => 'fa-brands fa-spotify',
+        'name' => 'Spotify',
+      ],
+      [
+        'domains' => ['apple.com'],
+        'icon_classes' => 'fa-brands fa-apple',
+        'name' => 'Apple',
+      ],
+      [
+        'domains' => ['telegram.me', 't.me'],
+        'icon_classes' => 'fa-brands fa-telegram',
+        'name' => 'Telegram',
+      ],
+      [
+        'domains' => ['mailto:'],
+        'icon_classes' => 'fa-solid fa-square-envelope',
+        'name' => 'Email',
+      ],
+      [
+        'domains' => ['pinterest.com', 'pin.it'],
+        'icon_classes' => 'fa-brands fa-square-pinterest',
+        'name' => 'Pinterest',
+      ],
+      [
+        'domains' => ['tiktok.com'],
+        'icon_classes' => 'fa-brands fa-tiktok',
+        'name' => 'Tiktok',
+      ],
+    ];
+
+    $icon_classes = '';
+    $icon_name = '';
+
+    foreach ($providers as $provider) {
+      foreach ($provider['domains'] as $domain) {
+        if (strpos($url, $domain) !== FALSE) {
+          $icon_classes = $provider['icon_classes'];
+          $icon_name = $provider['name'];
+          break 2;
+        }
+      }
+    }
+
+    if (!$icon_classes) {
+      $icon_classes = 'fa-solid fa-globe';
+      // Use the domain as the name if the provider is not listed above.
+      if (preg_match('/https?:\/\/(.+?)\//', $url, $matches)) {
+        $icon_name = $matches[1];
+      }
+    }
+
+    return [
+      'link_url' => $url,
+      'link_title' => $link['link_title'] ?: $icon_name,
+      'icon_classes' => $icon_classes,
+    ];
+  }
+
 }
diff --git a/docroot/modules/humsci/hs_blocks/templates/block--social-media.html.twig b/docroot/modules/humsci/hs_blocks/templates/block--social-media.html.twig
index 709399cfa..bc4aea964 100644
--- a/docroot/modules/humsci/hs_blocks/templates/block--social-media.html.twig
+++ b/docroot/modules/humsci/hs_blocks/templates/block--social-media.html.twig
@@ -1,19 +1,12 @@
-Icon size: {{ (icon_size) }}
-<br>
-Layout: {{ layout }}
-<br>
 {% if links %}
-    <ul>
-      {% for link in links %}
-        <li>
-          <a href="{{ link.link_url }}">
-            {% if link.link_title %}
-              {{ link.link_title }}
-            {% else %}
-              {{ link.link_url }}
-            {% endif %}
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
-  {% endif %}
+  <ul class="social-media-link__list">
+    {% for link in links %}
+      <li>
+        <a href="{{ link.link_url }}" class="social-media-link" title="{{ link.link_title }}">
+          <i class="social-media-link__icon {{ link.icon_classes }}"></i>
+          <span class="social-media-link__label">{{ link.link_title }}</span>
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/_main.scss b/docroot/themes/humsci/humsci_basic/src/scss/_main.scss
index 8a81e60d9..22caa423c 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/_main.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/_main.scss
@@ -195,6 +195,7 @@ $hb-root-font-size: 10px !default;
   'components/editoria11y', // customizations for editoria11y component.
   'components/add-to-cal',
   'components/main-content-anchor-target',
+  'components/block-social-media-footer',
 
   // =====================================================================
   // 7. Admin
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_block-social-media-footer.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_block-social-media-footer.scss
new file mode 100644
index 000000000..61962f81d
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/src/scss/components/_block-social-media-footer.scss
@@ -0,0 +1,70 @@
+.block-social-media-footer {
+  ul {
+    @include hb-list-empty-styles;
+  }
+
+  li {
+    display: flex;
+  }
+
+  .social-media-link {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  .social-media-link__icon {
+    width: 1em;
+    text-align: center;
+
+    // Override for Soundcloud icon (too wide).
+    &.fa-soundcloud {
+      font-size: 0.73em;
+      width: 1.37em;
+    }
+  }
+}
+
+// Grid Layout.
+.block-social-media-footer--layout-grid {
+  ul {
+    display: grid;
+    gap: hb-calculate-rems(16px);
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .social-media-link__label {
+    @include visually-hidden;
+  }
+}
+
+// Vertical List Layout.
+.block-social-media-footer--layout-vertical-list {
+  li {
+    margin-bottom: hb-calculate-rems(16px);
+  }
+
+  .social-media-link {
+    gap: hb-calculate-rems(16px);
+  }
+
+  .social-media-link__label {
+    font-size: hb-calculate-rems(16px);
+    text-decoration: underline;
+  }
+}
+
+// Small icons.
+.block-social-media-footer--icons-small {
+  .social-media-link {
+    font-size: hb-calculate-rems(32px);
+  }
+}
+
+// Large icons.
+.block-social-media-footer--icons-large {
+  .social-media-link {
+    font-size: hb-calculate-rems(48px);
+  }
+}
diff --git a/docroot/themes/humsci/humsci_basic/templates/block/block--hs-blocks-social-media-block.html.twig b/docroot/themes/humsci/humsci_basic/templates/block/block--hs-blocks-social-media-block.html.twig
new file mode 100644
index 000000000..962f2d1ce
--- /dev/null
+++ b/docroot/themes/humsci/humsci_basic/templates/block/block--hs-blocks-social-media-block.html.twig
@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{% set base_class = 'block-social-media-footer' %}
+{% set classes = [
+  base_class,
+  base_class ~ '--layout-' ~ content['#layout']|clean_class,
+  base_class ~ '--icons-' ~ content['#icon_size']|clean_class,
+] %}
+
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes.addClass('block__title') }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>