/*
    <i class="icon icon-md  icon-arrow-down"></i>
    <i class="icon          icon-play"></i>
    <i class="icon          icon-social_instagram_filled"></i>
*/

/*.icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
*/

.icon {
  display: inline-block;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}

.icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%; 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}
.icon-xs { font-size: 0.5em; }
.icon-sm { font-size: 1em; }
.icon-md { font-size: 1.7em; }
.icon-lg { font-size: 1.7em; }
.icon-xl { font-size: 3em; }

.btn.icon-invert::before {
  filter: invert(1) brightness(2.5) contrast(2.5);
}
 
/* Arrow Icons */
.icon-arrow-down::before         { background-image: url('arrow-down.svg'); }
.icon-arrow-left::before         { background-image: url('arrow-left.svg'); }
.icon-arrow-right::before        { background-image: url('arrow-right.svg'); }
.icon-arrow-right-red::before        { background-image: url('arrow-right-red.svg'); }
.icon-arrow-right-top::before    { background-image: url('arrow-right-top.svg'); }
.icon-arrow-up::before           { background-image: url('arrow-up.svg'); }

/* UI Icons */
.icon-back::before               { background-image: url('back.svg'); }
.icon-burger::before             { background-image: url('burger.svg'); }
.icon-calendar::before           { background-image: url('calendar.svg'); }
.icon-chevron-down::before       { background-image: url('chevron-down.svg'); }
.icon-chevron-left::before       { background-image: url('chevron-left.svg'); }
.icon-chevron-right::before      { background-image: url('chevron-right.svg'); }
.icon-chevron-up::before         { background-image: url('chevron-up.svg'); }
.icon-close::before              { background-image: url('close.svg'); }
.icon-download::before           { background-image: url('download.svg'); }
.icon-filter::before             { background-image: url('filter.svg'); }
.icon-minus::before              { background-image: url('minus.svg'); }
.icon-pause::before              { background-image: url('pause.svg'); }
.icon-play::before               { background-image: url('play.svg'); }
.icon-plus::before               { background-image: url('plus.svg'); }
.icon-search::before             { background-image: url('search.svg'); }
.icon-share::before              { background-image: url('share.svg'); }
.icon-shop::before               { background-image: url('shop.svg'); }

/* Social Icons */
.icon-social_facebook_filled::before   { background-image: url('social_facebook_filled.svg'); }
.icon-social_instagram_filled::before  { background-image: url('social_instagram_filled.svg'); }
.icon-social_mail_filled::before       { background-image: url('social_mail_filled.svg'); }
.icon-social_whatsapp_filled::before   { background-image: url('social_whatsapp_filled.svg'); }
.icon-social_youtube_filled::before    { background-image: url('social_youtube_filled.svg'); }

/* Upload & Zoom */
.icon-upload::before            { background-image: url('upload.svg'); }
.icon-zoom-in::before           { background-image: url('zoom-in.svg'); }
.icon-zoom-out::before          { background-image: url('zoom-out.svg'); }

.icon-set-kreis {border:1px solid #000000;border-radius:50px;padding:15px;background-size: 60% 60%;}