Anchor Design System

Icon3.0

The Anchor Icons help maintain visual consistency across our applications and platforms by providing a unified language for conveying information.

figmagitlab
Job posting image
We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?
Ads by Tryg Careers

Introduction

The Anchor Icons help maintain visual consistency across our applications and platforms by providing a unified language for conveying information. They serve as visual cues that guide users through the interface, making interactions more intuitive and efficient.

The Icons within Anchor are created as vector graphics, allowing them to scale seamlessly across different screen sizes and resolutions. This scalability ensures that icons remain crisp and clear, whether viewed on a high-resolution monitor or a mobile device.

Icons are based on feather https://feathericons.com/

Installation

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js
import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');
YourComponent.vue
<template>
  <anchor-icon name="check" size="medium"></anchor-icon>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue
<script setup>
import { AnchorIcon } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-icon name="check" size="medium"></anchor-icon>
</template>

Sizes

<anchor-icon name="alert-circle" size="xsmall"></anchor-icon>
<anchor-icon name="alert-circle" size="small"></anchor-icon>
<anchor-icon name="alert-circle" size="medium"></anchor-icon>
<anchor-icon name="alert-circle" size="large"></anchor-icon>
<anchor-icon name="alert-circle" size="xlarge"></anchor-icon>
<anchor-icon name="alert-circle" size="150"></anchor-icon>

Accessibility

  • All icons are rendered with aria-hidden="true" by default, treating them as decorative elements that screen readers will ignore.
  • When an icon conveys meaningful information on its own (for example, a standalone close or search icon), wrap it in an element with role="img" and provide an aria-label to describe its purpose.
  • When an icon accompanies a button or link that already has accessible text, the default aria-hidden="true" behavior is appropriate -- do not add an additional aria-label.
  • Consider providing a text alternative or hidden label for icons that serve as the only visual indicator of an action.

API

anchor-icon

Properties

PropertyAttributeDescriptionTypeDefault
colorcolor⚠️ This prop is deprecated. Please use the CSS variable --icon-color to set your own color for the icon.string'currentColor'
namenameSet which icon is displayed with this prop."activity" | "airplay" | "alarm" | "alert-circle" | "alert-octagon" | "alert-triangle" | "align-center" | "align-justify" | "align-left" | "align-right" | "anchor" | "aperture" | "archive" | "arrow-down" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "at-sign" | "award" | "band-aid" | "bar-chart" | "bar-chart-2" | "basket" | "battery" | "battery-charging" | "bell" | "bell-off" | "bluetooth" | "bold" | "bonus-tryghedsgruppen" | "book" | "book-open" | "bookmark" | "box" | "briefcase" | "calculator" | "calendar" | "camera" | "camera-off" | "cast" | "check" | "check-circle" | "check-square" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "child" | "chrome" | "circle" | "clipboard" | "clock" | "cloud" | "cloud-drizzle" | "cloud-lightning" | "cloud-off" | "cloud-rain" | "cloud-snow" | "code" | "codepen" | "codesandbox" | "coffee" | "columns" | "command" | "company" | "compass" | "copy" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "cpu" | "credit-card" | "crop" | "crosshair" | "database" | "delete" | "disc" | "divide" | "divide-circle" | "divide-square" | "dollar-sign" | "download" | "download-cloud" | "dribbble" | "droplet" | "edit" | "edit-2" | "edit-3" | "external-link" | "eye" | "eye-off" | "facebook" | "fast-forward" | "feather" | "figma" | "file" | "file-minus" | "file-pdf" | "file-plus" | "file-text" | "film" | "filter" | "flag" | "folder" | "folder-minus" | "folder-plus" | "framer" | "frown" | "gift" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "github" | "gitlab" | "globe" | "grid" | "hard-drive" | "hash" | "headphones" | "heart" | "help-circle" | "hexagon" | "home" | "image" | "inbox" | "info" | "instagram" | "italic" | "key" | "layers" | "layout" | "life-buoy" | "link" | "link-2" | "linkedin" | "list" | "loader" | "lock" | "log-in" | "log-out" | "mail" | "map" | "map-pin" | "maximize" | "maximize-2" | "megaphone" | "meh" | "menu" | "message-circle" | "message-square" | "mic" | "mic-off" | "minimize" | "minimize-2" | "minus" | "minus-circle" | "minus-square" | "monitor" | "moon" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move" | "music" | "navigation" | "navigation-2" | "octagon" | "offer" | "package" | "paperclip" | "pause" | "pause-circle" | "pen-tool" | "percent" | "phone" | "phone-call" | "phone-forwarded" | "phone-incoming" | "phone-missed" | "phone-off" | "phone-outgoing" | "pie-chart" | "play" | "play-circle" | "plus" | "plus-circle" | "plus-square" | "pocket" | "power" | "printer" | "radio" | "refresh-ccw" | "refresh-cw" | "repeat" | "rewind" | "rotate-ccw" | "rotate-cw" | "rss" | "save" | "scissors" | "search" | "send" | "server" | "settings" | "share" | "share-2" | "shield" | "shield-off" | "shopping-bag" | "shopping-cart" | "shuffle" | "sidebar" | "skip-back" | "skip-forward" | "slack" | "slash" | "sliders" | "smartphone" | "smile" | "speaker" | "sprout" | "square" | "star" | "star-filled" | "stop-circle" | "storm" | "sun" | "sunrise" | "sunset" | "table" | "tablet" | "tag" | "target" | "terminal" | "thermometer" | "thumbs-down" | "thumbs-up" | "toggle-left" | "toggle-right" | "tool" | "trash" | "trash-2" | "trello" | "trending-down" | "trending-up" | "triangle" | "truck" | "trygfonden" | "tv" | "twitch" | "twitter" | "type" | "umbrella" | "underline" | "unlock" | "upload" | "upload-cloud" | "user" | "user-check" | "user-minus" | "user-plus" | "user-x" | "users" | "video" | "video-off" | "voicemail" | "volume" | "volume-1" | "volume-2" | "volume-x" | "watch" | "wifi" | "wifi-off" | "wind" | "x" | "x-circle" | "x-octagon" | "x-square" | "youtube" | "zap" | "zap-off" | "zoom-in" | "zoom-out"'activity'
sizesizeWe recommend using one of the strings. Number option included for the sake of flexibility."large" | "medium" | "small" | "xlarge" | "xsmall" | number'medium'
strokestrokenumberundefined

CSS Custom Properties

NameDescription
--icon-colorSet the color of the

Dependencies

Used by

Graph

graph TD;
  anchor-accordion-item --> anchor-icon
  anchor-actionbar --> anchor-icon
  anchor-button --> anchor-icon
  anchor-card --> anchor-icon
  anchor-checkbox --> anchor-icon
  anchor-form-field --> anchor-icon
  anchor-form-group --> anchor-icon
  anchor-help-box --> anchor-icon
  anchor-input --> anchor-icon
  anchor-link --> anchor-icon
  anchor-link-item --> anchor-icon
  anchor-menu-item --> anchor-icon
  anchor-modal --> anchor-icon
  anchor-navigation-card --> anchor-icon
  anchor-notification-banner --> anchor-icon
  anchor-notification-center --> anchor-icon
  anchor-notification-inline --> anchor-icon
  anchor-number --> anchor-icon
  anchor-option --> anchor-icon
  anchor-phone --> anchor-icon
  anchor-progress-indicator-step --> anchor-icon
  anchor-quantity --> anchor-icon
  anchor-read-more --> anchor-icon
  anchor-select --> anchor-icon
  anchor-select-item --> anchor-icon
  anchor-textarea --> anchor-icon
  style anchor-icon fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Product Illustration

Product illustrations display visual representations for products and services.

Icon Container

A container component that wraps icons with consistent sizing, theming, and interactive behavior.

On this page

IntroductionInstallationUsageSizesAccessibilityAPIanchor-iconPropertiesCSS Custom PropertiesDependenciesUsed byGraph