​ ​ ​ Icons - Colors | Crossroads Digital Design Kit ​
  1. UI COMPONENTS
  2. ATOMS
  3. ICONS

UI Components / Icons

Icon Colors

An icon's <use> element will inherit the color of the closest parent with a color applied.

Applied to Icon

You can apply a color helper directly to the <svg> element.

<svg class="icon text-primary" viewBox="0 0 256 256">
  <use xlink:href="/assets/svgs/icons.svg#calendar"></use>
</svg>

Applied to Parent

Here the color is applied to the parent element and the icon inherits it.

<div class="text-primary">
  <svg class="icon" viewBox="0 0 256 256">
    <use xlink:href="/assets/svgs/icons.svg#calendar"></use>
  </svg>
</div>

Background Colors

Notice that if the component in which the icon is placed has an color applied, the icon will also inherit that color.

<div class="alert alert-info">
  <svg class="icon" viewBox="0 0 256 256">
    <use xlink:href="/assets/svgs/icons.svg#calendar"></use>
  </svg>
</div>