.sp-host .outline-icon-media-image {
  mask: url("images/image.svg");
}

.sp-host .outline-icon-media-video {
  mask: url("images/video.svg");
}

.sp-host .outline-icon-media-audio {
  mask: url("images/audio.svg");
}

.sp-host .outline-icon-media-picture {
  mask: url("images/picture.svg");
}

.sp-host .outline-icon-media-canvas {
  mask: url("images/canvas.svg");
}

.sp-host .outline-icon-media-iframe {
  mask: url("images/iframe.svg");
}

.sp-host .outline-icon-media-embed {
  mask: url("images/embed.svg");
}

.sp-host .outline-icon-paragraph {
  mask: url("images/paragraph.svg");
}

.sp-host .outline-icon-text-pre {
  mask: url("images/pre.svg");
}

.sp-host .outline-icon-text-code {
  mask: url("images/code.svg");
}

.sp-host .outline-icon-text-quote {
  mask: url("images/quote.svg");
}

.sp-host .outline-icon-text-italic {
  mask: url("images/italic.svg");
}

.sp-host .outline-icon-text-bold {
  mask: url("images/bold.svg");
}

.sp-host .outline-icon-text-highlight {
  mask: url("images/highlight.svg");
}

.sp-host .outline-icon-heading-h1 {
  mask: url("images/h1.svg");
}

.sp-host .outline-icon-heading-h2 {
  mask: url("images/h2.svg");
}

.sp-host .outline-icon-heading-h3 {
  mask: url("images/h3.svg");
}

.sp-host .outline-icon-heading-h4 {
  mask: url("images/h4.svg");
}

.sp-host .outline-icon-heading-h5 {
  mask: url("images/h5.svg");
}

.sp-host .outline-icon-heading-h6 {
  mask: url("images/h6.svg");
}

.sp-host .outline-icon-link {
  mask: url("images/link.svg");
}

.sp-host .outline-icon-input-button {
  mask: url("images/button.svg");
}

.sp-host .outline-icon-input-field {
  mask: url("images/input.svg");
}

.sp-host .outline-icon-input-textarea {
  mask: url("images/textarea.svg");
}

.sp-host .outline-icon-input-select {
  mask: url("images/select.svg");
}

.sp-host .outline-icon-form {
  mask: url("images/form.svg");
}

.sp-host .outline-icon-input-label {
  mask: url("images/label.svg");
}

.sp-host .outline-icon-form-fieldset {
  mask: url("images/fieldset.svg");
}

.sp-host .outline-icon-form-legend {
  mask: url("images/legend.svg");
}

.sp-host .outline-icon-list-unordered {
  mask: url("images/unordered.svg");
}

.sp-host .outline-icon-list-ordered {
  mask: url("images/ordered.svg");
}

.sp-host .outline-icon-list-item {
  mask: url("images/list.svg");
}

.sp-host .outline-icon-table,
.sp-host .outline-icon-table-head,
.sp-host .outline-icon-table-body,
.sp-host .outline-icon-table-foot,
.sp-host .outline-icon-table-row,
.sp-host .outline-icon-table-header-cell,
.sp-host .outline-icon-table-cell {
  mask: url("images/table.svg");
}

.sp-host .outline-icon-table-caption {
  mask: url("images/caption.svg");
}

.sp-host .outline-icon-semantic-header {
  mask: url("images/header.svg");
}

.sp-host .outline-icon-semantic-nav {
  mask: url("images/navigation.svg");
}

.sp-host .outline-icon-semantic-main {
  mask: url("images/main.svg");
}

.sp-host .outline-icon-semantic-section {
  mask: url("images/section.svg");
}

.sp-host .outline-icon-semantic-article {
  mask: url("images/article.svg");
}

.sp-host .outline-icon-semantic-aside {
  mask: url("images/aside.svg");
}

.sp-host .outline-icon-semantic-footer {
  mask: url("images/footer.svg");
}

.sp-host .outline-icon-semantic-figure {
  mask: url("images/image.svg");
}

.sp-host .outline-icon-semantic-figcaption {
  mask: url("images/caption.svg");
}

.sp-host .outline-icon-semantic-details {
  mask: url("images/disclose.svg");
}

.sp-host .outline-icon-semantic-summary {
  mask: url("images/summary.svg");
}

.sp-host .outline-icon-semantic-dialog {
  mask: url("images/dialog.svg");
}

.sp-host .outline-icon-svg {
  mask: url("images/vector.svg");
}

.sp-host .outline-icon-svg-path {
  mask: url("images/path.svg");
}

.sp-host .outline-icon-svg-circle {
  mask: url("images/circle.svg");
}

.sp-host .outline-icon-svg-rect {
  mask: url("images/rectangle.svg");
}

.sp-host .outline-icon-svg-group {
  mask: url("images/group.svg");
}

.sp-host .outline-icon-document-body {
  mask: url("images/body.svg");
}

.sp-host .outline-icon-document-root {
  mask: url("images/html.svg");
}

.sp-host .outline-icon-div {
  mask: url("images/div.svg");
}

.sp-host .outline-icon-general {
  mask: url("images/general.svg");
}