.bi {
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 10px;
}

.bi::before {
  content: " ";
  display: block;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.bi.sm::before {
  width: 24px;
  height: 24px;
}

.bi.md::before {
  width: 48px;
  height: 48px;
}

.bi.lg::before {
  width: 72px;
  height: 72px;
}

.browser-name {
  margin-top: 6px;
  font-size: 14px;
  color: #333;
  text-align: center;
}


.bi.aolexplorer::before        { background-image: url("icon/aolexplorer.svg"); }
.bi.arora::before              { background-image: url("icon/arora.svg"); }
.bi.bezillabrowser::before     { background-image: url("icon/bezillabrowser.svg"); }
.bi.brave::before              { background-image: url("icon/brave.svg"); }
.bi.bravedev::before           { background-image: url("icon/bravedev.svg"); }
.bi.browsh::before             { background-image: url("icon/browsh.svg"); }
.bi.chrome::before             { background-image: url("icon/chrome.svg"); }
.bi.chromebeta::before         { background-image: url("icon/chromebeta.svg"); }
.bi.chromecanary::before       { background-image: url("icon/chromecanary.svg"); }
.bi.chromedev::before          { background-image: url("icon/chromedev.svg"); }
.bi.chromium::before           { background-image: url("icon/chromium.svg"); }
.bi.deno::before               { background-image: url("icon/deno.svg"); }
.bi.duckduckgo::before         { background-image: url("icon/duckduckgo.svg"); }
.bi.edge::before               { background-image: url("icon/edge.svg"); }
.bi.electron::before           { background-image: url("icon/electron.svg"); }
.bi.falkon::before             { background-image: url("icon/falkon.svg"); }
.bi.firefox::before            { background-image: url("icon/firefox.svg"); }
.bi.firefoxbeta::before        { background-image: url("icon/firefoxbeta.svg"); }
.bi.firefoxdeveloper::before   { background-image: url("icon/firefoxdeveloper.svg"); }
.bi.firefoxlite::before        { background-image: url("icon/firefoxlite.svg"); }
.bi.firefoxreality::before     { background-image: url("icon/firefoxreality.svg"); }
.bi.geckoview::before          { background-image: url("icon/geckoview.svg"); }
.bi.hermes::before             { background-image: url("icon/hermes.svg"); }
.bi.huawei::before             { background-image: url("icon/huawei.svg"); }
.bi.icecat::before             { background-image: url("icon/icecat.svg"); }
.bi.iceweasel::before          { background-image: url("icon/iceweasel.svg"); }
.bi.internetexplorer::before   { background-image: url("icon/internetexplorer.svg"); }
.bi.konqueror::before          { background-image: url("icon/konqueror.svg"); }
.bi.maxthon::before            { background-image: url("icon/maxthon.svg"); }
.bi.midori::before             { background-image: url("icon/midori.svg"); }
.bi.netscape::before           { background-image: url("icon/netscape.svg"); }
.bi.netsurf::before            { background-image: url("icon/netsurf.svg"); }
.bi.node::before               { background-image: url("icon/node.svg"); }
.bi.opera::before              { background-image: url("icon/opera.svg"); }
.bi.operagx::before            { background-image: url("icon/operagx.svg"); }
.bi.qutebrowser::before        { background-image: url("icon/qutebrowser.svg"); }
.bi.safari::before             { background-image: url("icon/safari.svg"); }
.bi.samsunginternet::before    { background-image: url("icon/samsunginternet.svg"); }
.bi.samsunginternetbeta::before { background-image: url("icon/samsunginternetbeta.svg"); }
.bi.spidermonkey::before       { background-image: url("icon/spidermonkey.svg"); }
.bi.tor::before                { background-image: url("icon/tor.svg"); }
.bi.ucbrowser::before          { background-image: url("icon/ucbrowser.svg"); }
.bi.vivaldi::before            { background-image: url("icon/vivaldi.svg"); }
.bi.yandex::before             { background-image: url("icon/yandex.svg"); }