stevenpaw/stevens-silverstripe-icons

A whole Set of new icons for SilverStripe CMS

dev-main 2026-04-27 14:47 UTC

BSD-3-Clause

• Steffen Kahl

• admin
• silverstripe
• pages
• icons
• sp
• elemental
• Steven

README

This module adds a set of new icons to use in the Sivlerstripe CMS as Elemental Icons, Page Icons or Admin Icons.

How to use

To use, simply set the icon in the class using the sp-icon- prefix:

    //In Elements:
    private static $icon = 'sp-icon-news-element';

    //In Admins:
    private static $menu_icon_class = 'sp-icon-news-admin';

    //In Pages:
    private static $cms_icon_class = 'sp-icon-news-page';

Colored Icons

There is also the option to use colored icons by adding the -colored suffix to the class name, e.g. sp-icon-news-element-colored. These are currently only tested in the CMS-Sidebar for use with the CMS Theme Module for example.

Available icons

Element	Admin	Page
sp-icon-verticalmedia-element	sp-icon-verticalmedia-admin	sp-icon-verticalmedia-page
sp-icon-slider-element	sp-icon-slider-admin	sp-icon-slider-page
sp-icon-team-element	sp-icon-team-admin	sp-icon-team-page
sp-icon-textimage-element	sp-icon-textimage-admin	sp-icon-textimage-page
sp-icon-hero-element	sp-icon-hero-admin	sp-icon-hero-page
sp-icon-calltoaction-element	sp-icon-calltoaction-admin	sp-icon-calltoaction-page
sp-icon-table-element	sp-icon-table-admin	sp-icon-table-page
sp-icon-intro-element	sp-icon-intro-admin	sp-icon-intro-page
sp-icon-accordeon-element	sp-icon-accordeon-admin	sp-icon-accordeon-page
sp-icon-citationlist-element	sp-icon-citationlist-admin	sp-icon-citationlist-page
sp-icon-citation-element	sp-icon-citation-admin	sp-icon-citation-page
sp-icon-fullwidth-element	sp-icon-fullwidth-admin	sp-icon-fullwidth-page
sp-icon-calendar-element	sp-icon-calendar-admin	sp-icon-calendar-page
sp-icon-tutorial-element	sp-icon-tutorial-admin	sp-icon-tutorial-page
sp-icon-person-element	sp-icon-person-admin	sp-icon-person-page
sp-icon-horizontalmedia-element	sp-icon-horizontalmedia-admin	sp-icon-horizontalmedia-page
sp-icon-medialist-element	sp-icon-medialist-admin	sp-icon-medialist-page
sp-icon-news-element	sp-icon-news-admin	sp-icon-news-page
sp-icon-subpages-element	sp-icon-subpages-admin	sp-icon-subpages-page
sp-icon-lock-element	sp-icon-lock-admin	sp-icon-lock-page
sp-icon-box-element	sp-icon-box-admin	sp-icon-box-page
sp-icon-aperture-element	sp-icon-aperture-admin	sp-icon-aperture-page
sp-icon-listteaser-element	sp-icon-listteaser-admin	sp-icon-listteaser-page
sp-icon-teaser-element	sp-icon-teaser-admin	sp-icon-teaser-page
sp-icon-wordlist-element	sp-icon-wordlist-admin	sp-icon-wordlist-page
sp-icon-institution-element	sp-icon-institution-admin	sp-icon-institution-page
sp-icon-grid-element	sp-icon-grid-admin	sp-icon-grid-page
sp-icon-mediagrid-element	sp-icon-mediagrid-admin	sp-icon-mediagrid-page
sp-icon-video-element	sp-icon-video-admin	sp-icon-video-page
sp-icon-map-element	sp-icon-map-admin	sp-icon-map-page
sp-icon-marker-element	sp-icon-marker-admin	sp-icon-marker-page
sp-icon-crown-element	sp-icon-crown-admin	sp-icon-crown-page
sp-icon-cards-element	sp-icon-cards-admin	sp-icon-cards-page
sp-icon-star-element	sp-icon-star-admin	sp-icon-star-page
sp-icon-virtual-element	sp-icon-virtual-admin	sp-icon-virtual-page
sp-icon-megaphone-element	sp-icon-megaphone-admin	sp-icon-megaphone-page
sp-icon-qa-element	sp-icon-qa-admin	sp-icon-qa-page
sp-icon-social-element	sp-icon-social-admin	sp-icon-social-page
sp-icon-clock-element	sp-icon-clock-admin	sp-icon-clock-page
sp-icon-idea-element	sp-icon-idea-admin	sp-icon-idea-page