.svg-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    // Apparently this won't skew the image as long as it has a viewbox
    width: 100%;
    height: 100%;
  }

  &--active {
    svg.icon-tabler-search {
      stroke-width: 2px;
    }

    svg.icon-tabler-bell,
    svg.icon-tabler-messages {
      path:nth-child(2) {
        fill: var(--primary-text-color);
      }
    }

    svg.icon-tabler-users {
      circle,
      circle + path {
        fill: var(--primary-text-color);
      }
    }
  }
}

.icon-button > div {
  display: flex;
  align-items: center;
  justify-content: center;
}