TheaterMania Component Library

Icons: Grid 

<svg class="icon icon--grid">
  <use xlink:href="/assets/icons/sprite-sheet.svg#grid"></use>
</svg>
 
<svg class="icon icon--{{modifier}}">
  <use xlink:href="/assets/icons/sprite-sheet.svg#{{modifier}}"></use>
</svg>
 
{
  "modifier": "grid"
}
  • Content: 
    .icon {
  vertical-align: middle;
  width: 2rem;
  height: 2rem;
  fill: $color-text;
  stroke: $color-text;
  stroke-width: 3;
}

.icon--menu,
.icon--menu-close {
  width: 3rem;
  height: 3rem;
}

.icon--star {
  fill: $color-accent-yellow;
  stroke: none;
}

.icon--error {
  fill: $color-background;
  height: 2.06rem;

  .validation--error & {
    position: absolute;
    top: 0.63rem;
    left: calc(100% - 2rem);
    width: 1.25rem;
    height: 1.3rem;
    stroke: $color-error;
    stroke-width: 4;
  }
}

.icon--play {
  width: 2.5rem;
  height: 3.44rem;
  fill: none;
}

.icon--laptop {
  width: 2.5rem;
  height: 2.5rem;
}

.icon--chat {
  width: 1.25rem;
  height: 1.25rem;
}

.icon--info {
  width: 1.4rem;
  height: 1.3rem;
  stroke-width: 3;
}

.icon--clock,
.icon--question {
  stroke-width: 4;
  fill: none;
}

.icon--arrow-top,
.icon--arrow-right,
.icon--arrow-bottom,
.icon--arrow-left,
.icon--share,
.icon--link,
.icon--expand {
  fill: none;
}
  • URL: /components/raw/icons/Icons.scss
  • Filesystem Path: src/components/01-Units/Icons/Icons.scss
  • Size: 964 Bytes

Icons can be customized by targeting their modifier class. For example, .icon--email can have its own width, height and stroke color.

Icons employ the Linea icon set and are licensed under CCBY 4.0 (free to use and change for any purpose, even commercially).

For consistenancy, it is recommended to only use this icon set.