Porsche Design System

Icon

Table of Contents

Props
CSS Variables

Properties

type BreakpointCustomizable<T> = {
  base: T;
  xs?: T;
  s?: T;
  m?: T;
  l?: T;
  xl?: T;
  xxl?: T;
};

Property

Attribute

Description

Type

Default

aria

Sets ARIA attributes on the icon — use aria-label to make the icon meaningful to screen readers when it conveys information.

type IconAriaAttribute = {
  'aria-label'?: string;
}

undefined

color

Sets the fill color of the icon using PDS color tokens.

type IconColor =
'primary'
'contrast-higher'
'contrast-high'
'contrast-medium'
'contrast-low'
'contrast-lower'
'success'
'warning'
'error'
'info'
'inherit'

'primary'

name

Selects an icon from the built-in PDS icon library by name (e.g. arrow-right, close).

type IconName =
'360'
'4-wheel-drive'
'accessibility'
'active-cabin-ventilation'
'add'
'adjust'
'aggregation'
'ai-3d-object'
'ai-code'
'ai-edit'
'ai-image'
'ai-scale'
'ai-sound'
'ai-spark'
'ai-spark-filled'
'ai-text'
'ai-video'
'arrow-compact-down'
'arrow-compact-left'
'arrow-compact-right'
'arrow-compact-up'
'arrow-double-down'
'arrow-double-left'
'arrow-double-right'
'arrow-double-up'
'arrow-down'
'arrow-down-left'
'arrow-down-right'
'arrow-first'
'arrow-head-down'
'arrow-head-left'
'arrow-head-right'
'arrow-head-up'
'arrow-last'
'arrow-left'
'arrow-right'
'arrow-up'
'arrow-up-left'
'arrow-up-right'
'arrows'
'attachment'
'augmented-reality'
'battery-empty'
'battery-empty-co2'
'battery-empty-fuel'
'battery-full'
'battery-half'
'battery-one-quarter'
'battery-three-quarters'
'bell'
'bookmark'
'bookmark-filled'
'brain'
'broadcast'
'cabriolet'
'calculator'
'calendar'
'camera'
'car'
'car-battery'
'card'
'charging-active'
'charging-network'
'charging-state'
'charging-station'
'chart'
'chat'
'check'
'city'
'climate'
'climate-control'
'clock'
'close'
'closed-caption'
'cloud'
'co2-class'
'co2-emission'
'color-picker'
'compare'
'compass'
'configurate'
'copy'
'country-road'
'coupe'
'cubic-capacity'
'cut'
'delete'
'disable'
'dislike'
'dislike-filled'
'document'
'door'
'download'
'drag'
'duration'
'ear'
'edit'
'email'
'error'
'error-filled'
'exclamation'
'exclamation-filled'
'external'
'fast-backward'
'fast-forward'
'file-csv'
'file-excel'
'filter'
'fingerprint'
'flag'
'flash'
'fuel-station'
'garage'
'genuine-parts'
'geo-localization'
'gift'
'globe'
'grid'
'grip'
'group'
'hand'
'heart'
'heart-filled'
'highway'
'highway-filled'
'history'
'home'
'horn'
'image'
'increase'
'information'
'information-filled'
'key'
'laptop'
'leaf'
'leather'
'light'
'like'
'like-filled'
'limousine'
'linked'
'list'
'locate'
'lock'
'lock-open'
'logo-apple-carplay'
'logo-apple-music'
'logo-apple-podcast'
'logo-baidu'
'logo-delicious'
'logo-digg'
'logo-facebook'
'logo-foursquare'
'logo-gmail'
'logo-google'
'logo-hatena'
'logo-instagram'
'logo-kaixin'
'logo-kakaotalk'
'logo-kununu'
'logo-linkedin'
'logo-naver'
'logo-pinterest'
'logo-qq'
'logo-qq-share'
'logo-reddit'
'logo-skyrock'
'logo-snapchat'
'logo-sohu'
'logo-spotify'
'logo-tecent'
'logo-telegram'
'logo-tiktok'
'logo-tumblr'
'logo-twitter'
'logo-viber'
'logo-vk'
'logo-wechat'
'logo-weibo'
'logo-whatsapp'
'logo-x'
'logo-xing'
'logo-yahoo'
'logo-youku'
'logo-youtube'
'logout'
'map'
'menu-dots-horizontal'
'menu-dots-vertical'
'menu-lines'
'microphone'
'minus'
'mobile'
'moon'
'new-chat'
'news'
'north-arrow'
'oil-can'
'online-search'
'parking-brake'
'parking-light'
'paste'
'pause'
'phone'
'pin'
'pin-filled'
'pivot'
'play'
'play-filled'
'plug'
'plus'
'preheating'
'price-tag'
'printer'
'purchase'
'push-pin'
'push-pin-off'
'qr'
'qr-off'
'question'
'question-filled'
'racing-flag'
'radar'
'radio'
'refresh'
'replay'
'reset'
'return'
'road'
'roof-closed'
'roof-open'
'route'
'rss'
'save'
'screen'
'search'
'seat'
'send'
'service-technician'
'share'
'shopping-bag'
'shopping-bag-filled'
'shopping-cart'
'shopping-cart-filled'
'sidebar'
'sidelights'
'skip-backward'
'skip-forward'
'snowflake'
'sort'
'stack'
'star'
'star-filled'
'steering-wheel'
'stop'
'stopwatch'
'subtract'
'success'
'success-filled'
'sun'
'suv'
'switch'
'tablet'
'tachometer'
'theme'
'tire'
'trigger-finger'
'truck'
'turismo'
'unlinked'
'upload'
'user'
'user-filled'
'user-group'
'user-manual'
'video'
'view'
'view-off'
'volume-off'
'volume-up'
'warning'
'warning-filled'
'weather'
'weight'
'wifi'
'work'
'wrench'
'wrenches'
'zoom-in'
'zoom-out'

'arrow-right'

size 🛠

size

Sets the icon size using the PDS typographic scale. Use inherit to derive size from the parent element. Supports responsive breakpoint values.

type IconSize =
'2xs'
'xs'
'sm'
'md'
'lg'
'xl'
'2xl'
'3xl'
'4xl'
'5xl'
'inherit'
'xx-small' 🚫
'x-small' 🚫
'small' 🚫
'medium' 🚫
'large' 🚫
'x-large' 🚫
'xx-large' 🚫
BreakpointCustomizable<IconSize>

'sm'

source

Sets a path to a custom SVG icon, used instead of the built-in icon library.

string

undefined

CSS Variables

CSS Variable

Description

defaultValue

--p-icon-size

Defines the width and height of the icon. Overrides the `size` property when set.

--p-icon-color

Defines the icon color. Overrides the `color` property when set.