fint-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--fint-icon-size, 32px);
  height: var(--fint-icon-size, 32px);
  vertical-align: middle;
}
fint-icon > img, fint-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
fint-icon[tone] {
  width: var(--fint-icon-frame, 64px);
  height: var(--fint-icon-frame, 64px);
  border-radius: 18px 18px 18px 5px;
}
fint-icon[tone] > img, fint-icon[tone] > svg {
  width: var(--fint-icon-size, 32px);
  height: var(--fint-icon-size, 32px);
}
fint-icon[tone="mint"] { background: #D9F8E9; }
fint-icon[tone="sky"] { background: #D9ECFF; }
/* Recolor monochrome SVGs in CSS without changing their official geometry. */
fint-icon[tone="sky"] > img, fint-icon[tone="sky"] > svg {
  filter: brightness(0) saturate(100%) invert(12%) sepia(47%) saturate(2016%) hue-rotate(185deg) brightness(91%) contrast(98%);
}
fint-icon[tone="paper"] { background: #FCFBF8; border: 1px solid #D6DDD7; }