Simple Icons

Simple Icons provides a field widget/field formatter and Twig function to output one of 789+ brand icons from the Simple Icons project.

The icon is output as raw SVG markup so it can be easily styled with CSS, but the markup is sanitized before being output for security (just in case!)

Each icon is monochrome so fits easily into most designs and has been optimised for performance.

Why? (Usage)

This module allows your CMS users to use almost any major brand icon that they like, without you having to source, optimize, and upload these logos yourself.

If your client has a list of social media profiles in their footer then you could build it as a Drupal menu, install the Menu Item Extras module, and then add a Simple Icons icon field to the menu. Or use Config Pages and a Paragraph type to do a similar thing (outputting the Config Pages entity as a block, just like a menu).

Then, if a client wanted to add a new social media profile they could do it all themselves, including supplying an icon. No more support tickets to 'Add a link to X in the footer'!

As a convenience and for non-CMS managed content a Twig function is provided to output a single icon:

{{ simple_icons_icon('drupal') }}

The Twig function accepts a single argument of the slug that represents each icon. The slugs can be found in the icon-data.json file found in the module root.

Requirements

Make sure that you have extracted the contents of the Simple Icons repo to libraries/simple-icons.

My preferred way of doing this is via Asset Packagist. Follow this guide then run the following Composer command:

composer require npm-asset/simple-icons

Once you have done this, running the following command from your Drupal site's webroot should return SVG markup:

cat libraries/simple-icons/icons/drupal.svg

Installation

Once the Simple Icons library is in the correct location (see Requirements) then you can install this module as normal.

After installation you will have a 'Simple Icons icon' field type and field formatter available, as well as the Twig function mentioned above.

Configuration

There is currently no need for configuration.

Theming

Need to add an CSS class to the icons provided by this module? Override the simple-icons-icon.html.twig template provided by this module and you can edit the markup of the <svg> element that wraps the icons.

Accessibility

A <title> element is contained within each SVG with the name of the brand that is represented by the icon.

What icons are available/can I add an icon?

• A list of all the available icons can be found in icon-data.json in the module's root
• If a brand updates its icon, and the Simple Icons project has updated to use the new icon, then update the copy of Simple Icons in your libraries/simple-icons directory and the new icon should become available.
• If a new brand is added to the Simple Icons project but does not appear as an option in the Drupal field then raise an issue and I will update icon-data.json and tag a new release.