diff --git a/src/lib/global.ts b/src/lib/global.ts
index 41af544e..fad5acd4 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -116,7 +116,7 @@ export const Global = styled.div`
     --woly-canvas-text-active: hsla(var(--bw-0), 1);
   }
 
-  [data-priority='goast'] {
+  [data-priority='white'] {
     --woly-shape-default: transparent;
     --woly-shape-disabled: hsla(var(--bw-200), 1);
     --woly-shape-hover: transparent;
diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
index 9104a0b9..1612ffc9 100644
--- a/src/woly/atoms/button-icon/index.tsx
+++ b/src/woly/atoms/button-icon/index.tsx
@@ -7,19 +7,19 @@ interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   icon: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
-  outlined?: boolean;
+  weight?: string;
 }
 
 const ButtonIconBase: React.FC<Props & Priority> = ({
   icon,
   onClick,
-  outlined = false,
   priority = 'secondary',
+  weight = 'fill',
   ...p
 }) => (
   <button
-    data-outlined={outlined}
     data-priority={priority}
+    data-weight={weight}
     onClick={onClick}
     role="button"
     type="button"
@@ -31,9 +31,8 @@ const ButtonIconBase: React.FC<Props & Priority> = ({
 
 export const ButtonIcon = styled(ButtonIconBase)`
   ${box}
-  --local-shape-color: var(--woly-shape-default);
+
   --local-icon-size: var(--woly-line-height);
-  --local-icon-color: var(--woly-shape-text-default);
 
   display: flex;
   align-items: center;
@@ -41,8 +40,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
   box-sizing: border-box;
   padding: 0;
 
-  background: var(--local-shape-color);
-  border: var(--woly-border-width) solid var(--local-shape-color);
+  border-style: solid;
+
+  border-width: var(--woly-border-width);
+
   border-radius: var(--woly-rounding);
   outline: none;
 
@@ -57,42 +58,141 @@ export const ButtonIcon = styled(ButtonIconBase)`
       width: 100%;
       height: 100%;
     }
+  }
+
+  &[data-weight='fill'] {
+    --local-shape-color: var(--woly-shape-default);
+    --local-icon-color: var(--woly-shape-text-default);
+
+    background: var(--local-shape-color);
+    border-color: var(--local-shape-color);
 
-    svg > path {
+    [data-icon] > svg > path {
       fill: var(--local-icon-color);
     }
-
-    svg > g {
+    [data-icon] > svg > g {
       stroke: var(--local-icon-color);
     }
-  }
 
-  &:hover {
-    --local-shape-color: var(--woly-shape-hover);
-    --local-icon-color: var(--woly-shape-text-hover);
-  }
+    &:hover {
+      --local-shape-color: var(--woly-shape-hover);
+      --local-icon-color: var(--woly-shape-text-hover);
+    }
 
-  &:active {
-    --local-shape-color: var(--woly-shape-active);
-    --local-icon-color: var(--woly-shape-text-active);
+    &:active {
+      --local-shape-color: var(--woly-shape-active);
+      --local-icon-color: var(--woly-shape-text-active);
+    }
+
+    &:focus {
+      --local-shape-color: var(--woly-shape-active);
+      --local-icon-color: var(--woly-shape-text-active);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      --local-shape-color: var(--woly-canvas-disabled);
+      --local-icon-color: var(--woly-shape-text-disabled);
+    }
   }
 
-  &:focus {
-    --local-shape-color: var(--woly-shape-active);
-    --local-icon-color: var(--woly-shape-text-active);
-    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+  &[data-weight='outline'] {
+    --local-shape-color: transparent;
+    --local-icon-color: var(--woly-shape-default);
+
+    background: var(--local-shape-color);
+    border-color: var(--local-icon-color);
+
+    [data-icon] > svg > path {
+      fill: var(--local-icon-color);
+    }
+    [data-icon] > svg > g {
+      stroke: var(--local-icon-color);
+    }
+
+    &:hover {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-hover);
+    }
+
+    &:active {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-canvas-active);
+    }
+
+    &:focus {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-canvas-active);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      --local-shape-color: var(--woly-shape-text-disabled);
+      --local-icon-color: var(--woly-canvas-text-disabled);
+    }
   }
 
-  &:disabled {
-    pointer-events: none;
-    --local-shape-color: var(--woly-canvas-disabled);
-    --local-icon-color: var(--woly-shape-text-disabled);
+  &[data-weight='goast'] {
+    --local-shape-color: transparent;
+    --local-icon-color: var(--woly-shape-text-default);
+    --local-border-color: var(--woly-shape-text-default);
+
+    --local-shadow: var(--woly-border-width) var(--woly-border-width)
+      calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%);
+
+    background: var(--local-shape-color);
+    border-color: var(--local-border-color);
+    box-shadow: var(--local-shadow);
+
+    [data-icon] > svg > path {
+      fill: var(--local-icon-color);
+    }
+    [data-icon] > svg > g {
+      stroke: var(--local-icon-color);
+    }
+
+    &:hover {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-text-hover);
+      --local-border-color: var(--woly-shape-text-hover);
+    }
+
+    &:active {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-text-active);
+      --local-border-color: var(--woly-shape-text-active);
+    }
+
+    &:focus {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-text-active);
+      --local-border-color: var(--woly-shape-text-active);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      --local-shape-color: var(--woly-shape-text-disabled);
+      --local-icon-color: var(--woly-shape-disabled);
+    }
   }
 
-  &[data-outlined='true'] {
-    --local-shape-color: var(--woly-canvas-default);
+  &[data-weight='transparent'] {
+    --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
 
+    background: var(--local-shape-color);
+    border-color: var(--local-shape-color);
+
+    [data-icon] > svg > path {
+      fill: var(--local-icon-color);
+    }
+    [data-icon] > svg > g {
+      stroke: var(--local-icon-color);
+    }
+
     &:hover {
       --local-shape-color: transparent;
       --local-icon-color: var(--woly-shape-hover);
@@ -111,7 +211,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
 
     &:disabled {
       pointer-events: none;
-      --local-shape-color: var(--woly-shape-text-disabled);
+      --local-shape-color: transparent;
       --local-icon-color: var(--woly-canvas-text-disabled);
     }
   }
diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx
index 08bace67..0d9675a1 100644
--- a/src/woly/atoms/button-icon/usage.mdx
+++ b/src/woly/atoms/button-icon/usage.mdx
@@ -15,12 +15,19 @@ Also, icons can be used as toggle buttons when they allow selection, or deselect
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="default"
+    weight="fill"
   />
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="default"
-    outlined
+    weight="outline"
+  />
+  <ButtonIcon
+    icon={<IconSearch />}
+    onClick={() => console.info('ButtonIcon clicked')}
+    priority="default"
+    weight="transparent"
   />
 </Playground>
 
@@ -34,6 +41,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="default"
+      weight="fill"
     />
   </block.N>
   <block.XS>
@@ -41,6 +49,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       icon={<IconEyeOpened />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="primary"
+      weight="fill"
     />
   </block.XS>
   <block.S>
@@ -48,6 +57,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="secondary"
+      weight="fill"
     />
   </block.S>
   <block.M>
@@ -56,66 +66,101 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       onClick={() => console.info('ButtonIcon clicked')}
       priority="primary"
       disabled
+      weight="fill"
     />
   </block.M>
 </Playground>
 
 ### Weight and priority
 
-Button-icon can be represented in primary, secondary, default or goast priorities and can be styled with fill or outline.
-In case of choosing button-icon in goast priority with outline styles use the opposite background color to the text color of button-icon.
+Button-icon can be represented in primary, secondary or default priorities and can be styled by changing icon`s weight: fill, outline, transparent.
+In case of choosing button-icon in black-and-white priority with outline styles use the opposite background color to the text color of button-icon.
 
 <Playground>
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="secondary"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="secondary"
-    outlined
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="primary"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="primary"
-    outlined
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="default"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="default"
-    outlined
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="goast"
-  />
+  <block.L
+    style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '100px',
+      width: '900px',
+      background: 'lightgrey',
+    }}
+  >
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="primary"
+      weight="fill"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="primary"
+      weight="outline"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="primary"
+      weight="transparent"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="secondary"
+      weight="fill"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="secondary"
+      weight="outline"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="secondary"
+      weight="transparent"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="default"
+      weight="fill"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="default"
+      weight="outline"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="default"
+      weight="transparent"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      weight="goast"
+      priority="white"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="white"
+      weight="fill"
+    />
+  </block.L>
 </Playground>
 
-### Map of ButtonIcon
-
-<a href="/package/woly/component/button-icon-map">See map</a>
-
 ### Props
 
-| Name       | Type                                         | Default       | Description                                        |
-| ---------- | -------------------------------------------- | ------------- | -------------------------------------------------- |
-| `icon`     | `React.ReactNode`                            | `null`        | Set the icon component inside the button           |
-| `onClick`  | `React.MouseEventHandler<HTMLButtonElement>` |               | Callback when button clicked                       |
-| `outlined` | `boolean`                                    | `false`       | Change button-icon`s view from filled to outlined  |
-| `priority` | `string`                                     | `'secondary'` | Priority prop to style ButtonIcon component        |
-| `...`      | `HTMLButtonElement`                          | `{}`          | Other props are inherited from `HTMLButtonElement` |
+| Name       | Type                                         | Default       | Description                                                |
+| ---------- | -------------------------------------------- | ------------- | ---------------------------------------------------------- |
+| `icon`     | `React.ReactNode`                            | `null`        | Set the icon component inside the button                   |
+| `onClick`  | `React.MouseEventHandler<HTMLButtonElement>` |               | Callback when button clicked                               |
+| `priority` | `string`                                     | `'secondary'` | Priority prop to style ButtonIcon component                |
+| `weight`   | `string`                                     | `fill`        | Set button-icon`s weight (ex.: fill, outline, transparent) |
+| `...`      | `HTMLButtonElement`                          | `{}`          | Other props are inherited from `HTMLButtonElement`         |
diff --git a/src/woly/atoms/button/usage.mdx b/src/woly/atoms/button/usage.mdx
index 751d9d2f..8e464842 100644
--- a/src/woly/atoms/button/usage.mdx
+++ b/src/woly/atoms/button/usage.mdx
@@ -61,11 +61,11 @@ Secondary priority should be used as a default priority.
   <Button text="Alternative action" priority="secondary" outlined />
 </Playground>
 
-Goast priority should be used as an alternative priority to secondary and can`t be used with outline.
+White priority should be used as an alternative priority to secondary and can`t be used with outline.
 
 <Playground>
   <block style={{ width: '400px', padding: '30px 50px', background: 'grey' }}>
-    <Button text="Alternative action" priority="goast" />
+    <Button text="Alternative action" priority="white" />
   </block>
 </Playground>
 
diff --git a/src/woly/atoms/chip/usage.mdx b/src/woly/atoms/chip/usage.mdx
index 6954e3da..51266db3 100644
--- a/src/woly/atoms/chip/usage.mdx
+++ b/src/woly/atoms/chip/usage.mdx
@@ -23,7 +23,7 @@ As a standalone component, the most common use will be in some form of input.
 
 ### Weight and priority
 
-Chip can be represented in primary, secondary, default or goast priorities and can be styled with fill or outline.
+Chip can be represented in primary, secondary, default or white priorities and can be styled with fill or outline.
 
 <Playground direction="horizontal" size="S">
   <div
@@ -37,7 +37,7 @@ Chip can be represented in primary, secondary, default or goast priorities and c
     <Chip text="Simple Chip" priority="primary" />
     <Chip text="Simple Chip" priority="secondary" />
     <Chip text="Simple Chip" priority="default" />
-    <Chip text="Simple Chip" priority="goast" />
+    <Chip text="Simple Chip" priority="white" />
   </div>
 </Playground>