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/ui-library

Usage

Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.

Webcomponent

<script type="module">
  import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-icon';
  defineCustomElement();
</script>
<anchor-icon name="gitlab"></anchor-icon>

Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..

Webcomponent

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-icon name="gitlab"></anchor-icon>

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>

API

anchor-icon

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	⚠️ This prop is deprecated. Please use the CSS variable --icon-color to set your own color for the icon.	`string`	`'currentColor'`
`name`	`name`	Set 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" \| "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'`
`size`	`size`	We recommend using one of the strings. Number option included for the sake of flexibility.	`"large" \| "medium" \| "small" \| "xlarge" \| "xsmall" \| number`	`'medium'`
`stroke`	`stroke`		`number`	`undefined`

CSS Custom Properties

Name	Description
`--icon-color`	Set the color of the

Dependencies

Used by

Graph

Built with StencilJS

Icon3.0