Important

You are browsing upcoming documentation for version 6.0 of OroCommerce, OroCRM, and OroPlatform, scheduled for release in 2024. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Icons (SVG)¶

You can use SVG sprite with already defined icons by using the icon’s filename as the fragment identifier (e.g., add-note is #add-note). You can also add, remove or replace the SVG icons in your theme. See the StyleBook to find the list of all defined icons.

Using Icons¶

Depending on your use case, you can add any SVG icons to your themes by TWIG, HTML templates, or `JS.

Note

You can replace the add-note name in the examples below with any valid icon name. See the complete list of icon names in StyleBook.

In TWIG¶

{% import '@OroFrontend/layouts/renderIcon.html.twig' as renderIcon %}
{{ renderIcon.icon({name: 'add-note'}) }}

In HTML Templates¶

<% let orofrontend = _.macros('orofrontend') %>
    <%= orofrontend.renderIcon({
    name: 'add-note'
}) %>

In JS¶

import _ from 'underscore';

 const icon = _.macros('orofrontend::renderIcon')({
    name: 'add-note'
});

Adding New Icons to SVG Sprite¶

Each new icon should be designed on a 24x24 grid, emphasizing simplicity, consistency, and flexibility. Please use the following file structure to add them to your theme:

MyBundle/
    Resources/
        public/
            my-theme/
                svg-icons/
                    my-custom-icon.svg

Replacing SVG Icons¶

To replace an icon, navigate to the StyleBook to find the name of the icon you want to replace. Next, add a new icon with the same name to your theme using the following file structure (e.g., replacing add-note).

MyBundle/
    Resources/
        public/
            my-theme/
                svg-icons/
                    add-note.svg

Run the following console command to update the SVG sprite:

php bin/console oro:assets:build

Removing SVG Icons¶

To remove an icon, navigate to StyleBook to find the name of the icon you want to remove. Next, create a Resources/views/layouts/{theme_name}/config/svg-icons.yml file in your theme and write the following config in it: (e.g., remove add-note).

Resources/views/layouts/{theme_name}/config/svg-icons.yml¶

 exclude:
     - 'add-note' // svg-icon will be removed from svg-sprite

Run the following console command to update the SVG sprite:

php bin/console oro:assets:build