@mixin icon-container($size: 'sm') { ... }@mixin icon-container($size: 'sm') { 
  @include icon-size($size);
  @include icon-circle($size);
 }

@mixin icon-size($size: 'sm') { ... }@mixin icon-size($size: 'sm') { 
  $container-size: map.get(map.get(settings.$sizes, $size), container);

  display: inline-block;
  vertical-align: middle;
  width: $container-size;
  height: $container-size;
 }

@mixin icon-circle($size: 'sm') { ... }@mixin icon-circle($size: 'sm') { 
  $size-map: map.get(settings.$sizes, $size);
  $icon-size: map.get($size-map, icon);
  $container-size: map.get($size-map, container);

  position: relative;
  display: inline-block;
  width: $container-size;
  height: $container-size;
  flex-shrink: 0;
  vertical-align: middle;
  border-radius: 50%;
  background-color: color.get-color-property('ui-bg', '02');
  color: color.get-color-property('text', 'primary');

  > svg,
  > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: $icon-size;
    height: $icon-size;
  }
 }

$sizes: (...);$sizes: (
  xs: (
    container: unit.rem(32px),
    icon: unit.rem(24px)
  ),
  sm: (
    container: unit.rem(40px),
    icon: unit.rem(24px)
  ),
  md: (
    container: unit.rem(48px),
    icon: unit.rem(24px)
  ),
  lg: (
    container: unit.rem(64px),
    icon: unit.rem(32px)
  ),
  xl: (
    container: unit.rem(88px),
    icon: unit.rem(48px)
  )
);