animated icon

Animated icons are a subset of Bosch Icons that are animated using Lottie Web. All scripts needed to run the animation are loaded automatically if an animated icon is used.

See the table below for all available icon and their corresponding names.

How to use

  1. copy the base code snippet for one icon from here
  2. look up the icon you want to use
  3. copy the name of the icon
  4. adjust the data-attribute data-icon-name of the surrounding div to the name of the icon
  5. adjust the class and title of the <i></i> tag
table of content

component variations

single icon

Open on blank page
<div
  class="a-animated-icon"
  data-loop="true"
  data-auto-play="true"
  data-icon-name="emoji-happy"
  data-ui-icon="false"
>
  <div class="a-animated-icon__placeholder">
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
  </div>
  <div class="a-animated-icon__container"></div>
</div>

with button

Open on blank page
<div>
  <button type="button" class="a-button a-button--primary">
    <div
      class="a-animated-icon a-button__icon"
      data-loop="true"
      data-auto-play="true"
      data-icon-name="emoji-happy"
      data-ui-icon="false"
    >
      <div class="a-animated-icon__placeholder">
        <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
      </div>
      <div class="a-animated-icon__container"></div>
    </div>
    <span class="a-button__label">Button label</span>
  </button>
</div>

all animated icons

Open on blank page
iconnameiconnameiconname
emoji-super-happy
emoji-happy
emoji-neutral
emoji-sad
emoji-very-sad
wrench
weather-cloud-sun
calender-sheet
battery
flash
start-play-frame
hand
thumb-up
health
fireworks
camera
welcome
car
plane-top
thumb-down
piggybank
video
call-wifi
customer-service
fire
coffee-break
settings
lightbulb
cookie
<table class="m-table">
  <thead>
    <tr>
      <th>icon</th>
      <th>name</th>
      <th>icon</th>
      <th>name</th>
      <th>icon</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="emoji-super-happy"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-emoji-super-happy"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>emoji-super-happy</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="emoji-happy"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>emoji-happy</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="emoji-neutral"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-emoji-neutral"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>emoji-neutral</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="emoji-sad"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-emoji-sad"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>emoji-sad</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="emoji-very-sad"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-emoji-very-sad"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>emoji-very-sad</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="wrench"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-wrench"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>wrench</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="weather-cloud-sun"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-weather-cloud-sun"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>weather-cloud-sun</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="calender-sheet"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-calender-sheet"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>calender-sheet</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="battery"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-battery"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>battery</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="flash"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-flash"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>flash</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="start-play-frame"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-start-play-frame"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>start-play-frame</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="hand"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-hand"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>hand</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="thumb-up"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-thumb-up"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>thumb-up</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="health"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-health"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>health</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="fireworks"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-fireworks"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>fireworks</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="camera"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-camera"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>camera</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="welcome"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-welcome"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>welcome</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="car"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-car"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>car</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="plane-top"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-plane-top"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>plane-top</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="thumb-down"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-thumb-down"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>thumb-down</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="piggybank"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-piggybank"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>piggybank</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="video"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-video"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>video</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="call-wifi"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-call-wifi"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>call-wifi</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="customer-service"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-customer-service"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>customer-service</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="fire"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-fire"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>fire</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="coffee-break"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-coffee-break"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>coffee-break</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="settings"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-settings"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>settings</td>
    </tr>
    <tr>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="lightbulb"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-lightbulb"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>lightbulb</td>
      <td class="-with-icon">
        <div
          class="a-animated-icon"
          data-loop="true"
          data-auto-play="true"
          data-icon-name="cookie"
          data-ui-icon="false"
        >
          <div class="a-animated-icon__placeholder">
            <i class="a-icon boschicon-bosch-ic-cookie"></i>
          </div>
          <div class="a-animated-icon__container"></div>
        </div>
      </td>
      <td>cookie</td>
    </tr>
  </tbody>
</table>

additional content

styles SCSS

.a-animated-icon {
    position: relative;
    display: grid;

    &__container,
 
    &__placeholder {
        grid-row: 1;
        grid-column: 1;

        .a-icon {
            display: block;
        }
    }

    &__container {
        width: 1.5rem;
        height: 1.5rem;

        svg {
            display: block;

            path {
                fill: currentcolor;
                stroke: currentcolor;
            }
        }
    }

    &.-loaded &__placeholder {
        display: none;
    }

}