transform: scaleとborder-radiusとoverflowの組み合わせでハマった

ブラウザ側でしっかり対処して欲しいところではありますが対処方を見つけたので記載しておきます。

.icon {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #000;
  overflow: hidden;
  &:hover {
    transform: scale(1.05, 1.05);
  }
}

これだとネストされたimgがborder-radiusを超えて拡張される

.icon {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #000;
  overflow: hidden;
  will-change: transform; //- 追記
  &:hover {
    transform: scale(1.05, 1.05);
  }
}

will-changeで意図する動きにする。

will-changeについて
CSS の will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。この種の最適化は、実際に変化が求められる前に、潜在的に高コストの処理を行うことで、ページの応答を向上させることができます。

引用 MDN Web Docs