Icon open source

I know this is many years old. But plus one for me.
Fontawesome has great icons. But loading the fontawesome font is bad for my page speed, according to some lighthouse tests that I've done.
IcoMoon is also a font, which I guess will cause the same problem.
That currently leaves Nouveller and Elegant themes as the only non-font options for the icons.
Both look terribly outdated.
I looked at this issues proposed simpleicons.org and they look nice, so it would be great to have these as option.
Although they do seem to have an icon for 'X', they currently don't seem to have an icon for linkedIn :|. I found in their issues that they received a request from the Microsoft legal team to remove it. Just FYI.

Can this module be replaced with a menu and icon api?

There are plenty of open source icons on iconify, so Iconify Icons and UI Icons modules will set you up.

In my project I just created a custom module starterkit_social_icons) for this.

You will need to create your own 'iconset' which defines how icons are loaded. I created one that passes the requested icons name (like 'facebook') to a custom twig template:

modules/custom/starterkit_social_icons/src/Plugin/SocialMediaLinks/Iconset/StarterkitIcons.php

<?php

namespace Drupal\starterkit_social_icons\Plugin\SocialMediaLinks\Iconset;

use Drupal\social_media_links\IconsetBase;
use Drupal\social_media_links\IconsetInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;

/**
 * Provides 'starterkit' iconset.
 *
 * @Iconset(
 *   id = "starterkit",
 *   name = "Starterkit Icons",
 *   publisher = "Brandle",
 *   publisherUrl = "https://www.brandle/",
 *   downloadUrl = "https://gitlab.com/brandle/starterkit",
 * )
 */
class StarterkitIcons extends IconsetBase implements IconsetInterface {

  /**
   * The module handler service.
   *
   * @var \Drupal\Core\Extension\ModuleHandler
   */
  protected $moduleHandler;

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
    $instance = parent::create($container, $configuration, $plugin_id, $plugin_definition);
    $instance->moduleHandler = $container->get('module_handler');
    return $instance;
  }

  /**
   * {@inheritdoc}
   */
  public function setPath($iconset_id) {
    $this->path = $this->finder->getPath($iconset_id) ? $this->finder->getPath($iconset_id) : 'library';
  }

  /**
   * {@inheritdoc}
   */
  public function getStyle() {
    return [
      'default' => 'default',
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function getIconElement($platform, $style) {
    $icon_name = $platform->getIconName();

    $module_path = \Drupal::service('extension.list.module')->getPath('starterkit_social_icons');
    $source_path = "$module_path/icons/svg/$icon_name.svg";

    if (!file_exists($source_path)) {
      $source_path = FALSE;
    }

    $icon = [
      '#theme' => 'svg_icon',
      '#source_path' => $source_path,
      '#name' => $icon_name,
    ];

    return $icon;
  }

  /**
   * {@inheritdoc}
   */
  public function getLibrary() {
    return [
        'starterkit_social_icons/icons',
      ];
  }

  /**
   * {@inheritdoc}
   */
  public function getIconPath($icon_name, $style) {
    return NULL;
  }

}

The twig template is defined in modules/custom/starterkit_social_icons/starterkit_social_icons.module:

<?php

/**
 * @file
 */

/**
 * Implements hook_theme().
 */
function starterkit_social_icons_theme() {
  return [
    'svg_icon' => [
      'variables' => [
        'source_path' => NULL,
        'name' => NULL,
      ],
    ],
  ];
}

And the twig template modules/custom/starterkit_social_icons/templates/svg-icon.html.twig will either load name.svg (like facebook.svg) if it exists, otherwise it will show a general share icon with the name (like 'facebook') displayed:

{% if source_path %}
    {{ include(source_path) }}
{% endif %}

{# Fallback: general share icon with text. #}
{% if not source_path %}
    <div class="social-sharing-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16" class="social-sharing-icon">
            <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5"/>
        </svg>
        <div class="social-sharing-name">{{name}}</div>
    </div>
{% endif %}

I have added some default styling, so I added a modules/custom/starterkit_social_icons/starterkit_social_icons.libraries.yml file:

icons:
  css:
    component:
      css/icons.css : {}

And I created that web/modules/custom/starterkit_social_icons/css/icons.css file:

.social-sharing-item {
    border: 1px solid gray;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .social-sharing-name {
        margin: 4px 7px;
        word-wrap: unset;
        hyphens: none;
    }
}
.social-media-links--platforms {
    color: white;
}
.social-media-links--platforms > li > a {
    display: block;
    width: 30px;
    height: 30px;
}

Now If I place a SVG icon into icons/svg, like: modules/custom/starterkit_social_icons/icons/svg/facebook.svg then I will see that custom facebook icon. And fontawesome is NOT loaded which was the whole point of me doing the exercise so my pagespeed score has indeed improved doing it this way.