When displaying the same colorizable SVG multiple times, each time a different set of colors can be applied with CSS. Below, the same "hipster" SVG is displayed four times, with different colors for skin, hair, glasses and shirt. The shading is done automatically by the SVG.
Each of the icons has a unique id, so a CSS id selector can be used to apply the specific colors for each icon.
Groups of icons can share the same color scheme, and a group of icons can be displayed multiple times with different color schemes. Below, both company info cards show the same set of colorizable SVGs. A CSS color scheme to match the corporate identity is applied on each side.
For coloring groups of icons a CSS class selector is used. This way each icon with class green-company has a different color scheme than
an icon with class blue-company
Colors can be changed dynamically while the icons are displayed. Click on the toggle button below to switch between light and dark mode. The color scheme of the icons will change depending on the selected mode.
The gradient on the icons is defined by three color values. If the switch is toggled, the class dark-mode is set to the documents's body.
This will activate a "dark-mode" CSS rule which overrides the default color with a dark mode color.
In this example we use a button state for changing icon colors. Move the mouse over the icons and press and click on them to trigger the color changes.
The SVG is placed on a button, so we can use the buttons's pseudo class selectors (:hover, :active, and :disabled) to specify different colors.
When exporting icons as CSS styleable SVGs, you can optionally set the icons' main color as the "free color". For this color the value of current CSS text color will be used.
Clicking on a color swatch below will set the color attribute of the icons array to the background color of the color swatch. The icons will inherit the color and change accordingly.
