The SVG icons are published to GitHub Packages and are available in the lf-icons repository. The package includes the individual icons and a sprite for each icon size set (24, 32, 40 pixels etc).
It is not advised to include or reference the individual icons separately, but instead use the sprite to pick the desired icon from any given set.
<svg role="presentation" class="icon" width="24" height="24">
<use xlink:href="/assets/icons/24/sprite/icons.svg#icon-wallet-24"></use>
</svg>
Our .icon
class helps with alignment. Note that most icons inherits the color
CSS property from the parent element in the DOM (using currentColor).
An icon rarely shows up alone. Together with any text component, be it a link, heading, or paragrah, an icon should have distance of 10px between itself and the text. To achieve this, you can use the .icon-left
if the icon is to be placed to the left of the text, or .icon-right
for the opposite.