pointing to external link, arrow up right

src/components/link-box/link-box.scss

 :host {
   background: var(--grayscale-background-box);
-  border: 2px solid purple; //@todo remove before submitting
   display: flex;
   margin-bottom: 32px;
   margin-right: 0;
@@ -233,7 +232,6 @@
         padding: 0 12px;
       }
 
-      //@todo check title + description styles
       &__title {
         @include font-size(18px, 22px);
         @include font-weight($bold);
@@ -308,13 +306,24 @@
   }
 }
 
-.hy-link-box-link {
+.hy-icon-wrapper {
+  background-color: var(--brand-main-light);
   bottom: 12px;
+  overflow: hidden;
   position: absolute;
   right: -6px;
+  z-index: 10;
+
+  &__hover {
+    background-color: var(--brand-main);
+  }
+}
+
+.hy-link-box-link {
+  display: block;
 
   svg {
-    background-color: var(--brand-main-light);
+    background-color: transparent;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
     fill: var(--grayscale-white);
     height: 32px;
@@ -322,10 +331,8 @@
     width: 32px;
   }
 
-  &__hover {
-    svg {
-      background-color: var(--brand-main);
-    }
+  &__external {
+    transform: rotate(-45deg);
   }
 
   @include breakpoint($extrawide) {

src/components/link-box/link-box.tsx

@@ -71,13 +71,13 @@ export class LinkBox implements ComponentInterface {
 
   manageHoverEffect(linkbox, hoverOn = true) {
     let title = linkbox.shadowRoot.querySelector('h3.hy-link-box__text-container__title');
-    let boxLink = linkbox.shadowRoot.querySelector('.hy-link-box-link');
+    let boxLink = linkbox.shadowRoot.querySelector('.hy-icon-wrapper');
     if (hoverOn) {
       (title as HTMLElement).classList.add('hy-link-box__text-container__title__hover');
-      (boxLink as HTMLElement).classList.add('hy-link-box-link__hover');
+      (boxLink as HTMLElement).classList.add('hy-icon-wrapper__hover');
     } else {
       (title as HTMLElement).classList.remove('hy-link-box__text-container__title__hover');
-      (boxLink as HTMLElement).classList.remove('hy-link-box-link__hover');
+      (boxLink as HTMLElement).classList.remove('hy-icon-wrapper__hover');
     }
   }
 
@@ -98,6 +98,7 @@ export class LinkBox implements ComponentInterface {
       `hy-link-box-link__${this.variant}`,
       `hy-link-box-link__${this.headerstyle}`,
       this.headerstyle,
+      this.isExternal ? 'hy-link-box-link__external' : null,
     ].join(' ');
 
     const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
@@ -140,9 +141,11 @@ export class LinkBox implements ComponentInterface {
             {this.textDescription && <div class={classDescription}>{this.textDescription}</div>}
           </div>
         </div>
-        <a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel} tabindex="-1">
-          <hy-icon icon={'hy-icon-arrow-right'} size={32} />
-        </a>
+        <span class={'hy-icon-wrapper'}>
+          <a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel} tabindex="-1">
+            <hy-icon icon={'hy-icon-arrow-to-right'} size={32} />
+          </a>
+        </span>
       </article>,
     ];
   }