Installation

Icon Component

The <post-icon> element is part of the @swisspost/design-system-components package. For more information, read the getting started with components guide.

Icon SVGs

The SVG files for icons should be hosted within your project. For guidelines on how to set this up, please refer to the icon package documentation.

Usage as Web-Component

Our <post-icon> component renders SVGs, so it scales quickly and easily and can be styled with CSS.

<post-icon name="1022"></post-icon>

UI Icons

UI icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. Use the resize handle in the example to see how the icon changes while you change its size.

<post-icon name="accessibility"></post-icon>

Color

By default, icons inherit the current text color of their parent element.
You can therefore colorize an icon by simply changing the color css property of the element itself.

<post-icon name="1022" style="color: blue"></post-icon
><post-icon name="1022" style="color:#800080"></post-icon
><post-icon name="1022" style="color: rgb(230, 0, 0)"></post-icon>

Size

Icons have a default width of 1em, which means they will scale with the size of the current font-size css property.

<post-icon name="1022" style="font-size: 1rem"></post-icon
><post-icon name="1022" style="font-size: 3rem"></post-icon
><post-icon name="1022" style="font-size: 6rem"></post-icon>

Transformations

The following examples are available by default only in the <post-icon> web-component. To do something similar with the CSS mixin, you would need to use the transform property or add your own css animations.

Flipping

Flip the icon horizontally and/or vertically with the flip-h and flip-v props.

<post-icon name="1022"></post-icon><post-icon name="1022" flip-h="true"></post-icon
><post-icon name="1022" flip-v="true"></post-icon
><post-icon name="1022" flip-h="true" flip-v="true"></post-icon>

Scaling

Scale the icon by any positive factor via the scale prop. Note this changes the icon's visual size but not its physical font size. To illustrate this we have added a background color to the icons.

<post-icon name="1022" scale="0.5"></post-icon><post-icon name="1022"></post-icon
><post-icon name="1022" scale="1.5"></post-icon>

Rotating

Rotate the icon by a number of degrees with the rotate prop. Positive values will rotate the icon clockwise, while negative values will rotate the icon counterclockwise.

<post-icon name="1022" rotate="-365"></post-icon><post-icon name="1022" rotate="-249"></post-icon
><post-icon name="1022" rotate="-35.5"></post-icon><post-icon name="1022" rotate="0"></post-icon
><post-icon name="1022" rotate="98"></post-icon><post-icon name="1022" rotate="365"></post-icon
><post-icon name="1022" rotate="753"></post-icon>

Animating

The post-icon includes the following built-in animations for icons:

• cylon slides the icon left and right
• cylon-vertical slides the icon up and down
• spin smoothly spins the icon clockwise
• spin-reverse smoothly spins the icon counter-clockwise
• fade fades the icon in and out
• throb scales the icon in and out

To use them, set the animation prop to one of the animation names above.

<div class="w-half py-16">
  <p class="text-muted fs-9">Animation: cylon</p>
  <post-icon name="2253" animation="cylon"></post-icon>
</div>

<div class="w-half py-16">
  <p class="text-muted fs-9">Animation: cylon-vertical</p>
  <post-icon name="2252" animation="cylon-vertical"></post-icon>
</div>

<div class="w-half py-16">
  <p class="text-muted fs-9">Animation: spin</p>
  <post-icon name="2041" animation="spin"></post-icon>
</div>

<div class="w-half py-16">
  <p class="text-muted fs-9">Animation: spin-reverse</p>
  <post-icon name="2042" animation="spin-reverse"></post-icon>
</div>

<div class="w-half py-16">
  <p class="text-muted fs-9">Animation: fade</p>
  <post-icon name="2151" animation="fade"></post-icon>
</div>

<div class="w-half py-16">
  <p class="text-muted fs-9">Animation: throb</p>
  <post-icon name="2063" animation="throb"></post-icon>
</div>

Usage in CSS

To define an icon in your own CSS, you need the @swisspost/design-system-styles package and use our post-icon mixin. The icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page.

The used classes in the examples below are only there for demonstration purposes.

Post Icons

<div class="my-1022-icon"></div>

UI Icons

UI icons are responsive and can have a different level-of-detail, depending on how big they are rendered on the page. Use the resize handle in the example to see how the icon changes while you change its size.

<div class="my-accessibility-icon"></div>

Colors

By default, icons inherit the current text color of their parent element. You can therefore colorize an icon by simply changing the color css property of the element itself.

<div class="my-1022-icon" style="color: blue"></div>

Size

Icons have a default width of 1em, which means they will scale with the size of the current font-size css property.

<div class="my-1022-icon" style="font-size: 3rem"></div>

Mixin usage

@use '@swisspost/design-system-styles/core' as post;

.my-icon {
  @include post.post-icon(
    $name: 'accessibility',
    // optional
    $base: '/optional/path/to/your/self-hosted/svgs',
    // optional
    $color: '#fc0'
  );
}