We have full CSS control of the SVG in terms of colour, animations/transitions and manipulating paths.SVGs added as background images as part of an icon font may not show properly for high contrast mode users.The preceding examples show how to include icons as inline SVGs. This class uses the rem unit to specify a size relative to the root font size. with-icon-larger on the parent element and add the modifier class. If there is a need for an inline icon that is distinctly larger than the default text, use. Open this SVG icons with spacing in a new tab Choose the class which reflects the correct order of icon and text. It also handles right-to-left text if applicable. This applies inline-flex and alignment styles to help things line up nicely, and uses margin for the spacing. with-icon-after class to the parent element. If you want control over the spacing between the icon and text, add the. This prevents the SVG from expanding to fill the whole page if the CSS doesn't load. The icon can easily sit before or after the text, using simple text spacing.Īlways include width and height attributes as part of the SVG markup. icon class uses the relative em unit and is ideal for using icons inline with text, adapting the icon size to the font size of the parent element.

Using an SVG file as the src of an is covered separately.

This section specifically covers using inline SVG files as icons.

Svg user icon