Icons (Lexicon)

Lexicon Icons

We use SVG elements that link to an SVG sprite, like so:
<svg class="lexicon-icon lexicon-icon-add-column" focusable="false" role="presentation">
    <use xlink:href="path/to/icons.svg#add-column" />
</svg>
Note that the ID after the # symbol is the ID of the icon to use, so if you wanted to use plus icon, you would do change the href to path/to/icons.svg#plus.

Why do we use SVG?

Language Flags

People tend to have pretty strong opinions on whether flags should be used as a visual cue for indicating a language, mainly because in many parts of the world, the flag may have cultural and geographic meanings that we might not be aware of, or the flag itself isn't fully accurate to the dialects spoken in that region.
While we understand that reasoning, we've found that the times they are actually needed (when a user is not familiar with the currently displayed language) somewhat eliminates using other mechanisms, such as the name of the language (since the current language could be in an entirely different character set). Given this, there is often at least some familiarity with the identity of a country that speaks a shared language.
Or, to paraphrase Winston Churchill, "Using flags is the worst system for indicating language, except for all others". :)

To use the flags below, follow the same process as above, but the name of the icon is the locale and country code indicated in parenthesis (e.g. to use the Japanese icon, you would use ja-jp)

SVG Icons as Background Images

We have created a Sass function to turn Lexicon SVG icon's into data uri schemes, which enables you to include them as a background-image on an HTML element. The Sass function lx-icon(icon-name, color) takes the name of a Lexicon SVG Icon and color takes a color. The Sass rule set .site-add-cell { background-image: lx-icon(add-cell, #5AF); background-size: contain; display: inline-block; height: 20px; width: 20px; } will place the SVG icon add-cell as a background-image on any element with class site-add-cell.

add-cell add-column add-row adjust align-center asterisk times-circle workflow

Svg-url()

You can turn your custom SVG into a data uri using the Sass function svg-url($svg) where $svg is the code for your inline SVG. The function returns url(your_svg_as_data_uri).

When using svg-url(), wrap your inline SVG code with single quotes if your SVG's attributes are delimited with double quotes.

Linux Tux

Why do we use SVG?

SVG gives us and you a greater amount of freedom in styling the icons, as well as a higher level of fidelity and clarity in the icons. Font icons, while fairly simple, also suffer some drawbacks, mainly with sub-pixel aliasing that cause the quality to not be as high as we would like. Also SVG allows for multi-color icons, for example: