@porsche-design-system/components-react 4.5.0 → 4.6.0-rc.0

package/skill/references/components/p-icon/examples/Overview.tsx

@@ -0,0 +1,588 @@
+import React from 'react';
+import { PIcon } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PIcon name="360" aria={{'aria-label': '360 icon'}}></PIcon>
+
+      <PIcon name="4-wheel-drive" aria={{'aria-label': '4 Wheel Drive icon'}}></PIcon>
+
+      <PIcon name="accessibility" aria={{'aria-label': 'Accessibility icon'}}></PIcon>
+
+      <PIcon name="active-cabin-ventilation" aria={{'aria-label': 'Active Cabin Ventilation icon'}}></PIcon>
+
+      <PIcon name="add" aria={{'aria-label': 'Add icon'}}></PIcon>
+
+      <PIcon name="adjust" aria={{'aria-label': 'Adjust icon'}}></PIcon>
+
+      <PIcon name="aggregation" aria={{'aria-label': 'Aggregation icon'}}></PIcon>
+
+      <PIcon name="ai-3d-object" aria={{'aria-label': 'Ai 3d Object icon'}}></PIcon>
+
+      <PIcon name="ai-code" aria={{'aria-label': 'Ai Code icon'}}></PIcon>
+
+      <PIcon name="ai-edit" aria={{'aria-label': 'Ai Edit icon'}}></PIcon>
+
+      <PIcon name="ai-image" aria={{'aria-label': 'Ai Image icon'}}></PIcon>
+
+      <PIcon name="ai-scale" aria={{'aria-label': 'Ai Scale icon'}}></PIcon>
+
+      <PIcon name="ai-sound" aria={{'aria-label': 'Ai Sound icon'}}></PIcon>
+
+      <PIcon name="ai-spark" aria={{'aria-label': 'Ai Spark icon'}}></PIcon>
+
+      <PIcon name="ai-spark-filled" aria={{'aria-label': 'Ai Spark Filled icon'}}></PIcon>
+
+      <PIcon name="ai-text" aria={{'aria-label': 'Ai Text icon'}}></PIcon>
+
+      <PIcon name="ai-video" aria={{'aria-label': 'Ai Video icon'}}></PIcon>
+
+      <PIcon name="arrow-compact-down" aria={{'aria-label': 'Arrow Compact Down icon'}}></PIcon>
+
+      <PIcon name="arrow-compact-left" aria={{'aria-label': 'Arrow Compact Left icon'}}></PIcon>
+
+      <PIcon name="arrow-compact-right" aria={{'aria-label': 'Arrow Compact Right icon'}}></PIcon>
+
+      <PIcon name="arrow-compact-up" aria={{'aria-label': 'Arrow Compact Up icon'}}></PIcon>
+
+      <PIcon name="arrow-double-down" aria={{'aria-label': 'Arrow Double Down icon'}}></PIcon>
+
+      <PIcon name="arrow-double-left" aria={{'aria-label': 'Arrow Double Left icon'}}></PIcon>
+
+      <PIcon name="arrow-double-right" aria={{'aria-label': 'Arrow Double Right icon'}}></PIcon>
+
+      <PIcon name="arrow-double-up" aria={{'aria-label': 'Arrow Double Up icon'}}></PIcon>
+
+      <PIcon name="arrow-down" aria={{'aria-label': 'Arrow Down icon'}}></PIcon>
+
+      <PIcon name="arrow-down-left" aria={{'aria-label': 'Arrow Down Left icon'}}></PIcon>
+
+      <PIcon name="arrow-down-right" aria={{'aria-label': 'Arrow Down Right icon'}}></PIcon>
+
+      <PIcon name="arrow-first" aria={{'aria-label': 'Arrow First icon'}}></PIcon>
+
+      <PIcon name="arrow-head-down" aria={{'aria-label': 'Arrow Head Down icon'}}></PIcon>
+
+      <PIcon name="arrow-head-left" aria={{'aria-label': 'Arrow Head Left icon'}}></PIcon>
+
+      <PIcon name="arrow-head-right" aria={{'aria-label': 'Arrow Head Right icon'}}></PIcon>
+
+      <PIcon name="arrow-head-up" aria={{'aria-label': 'Arrow Head Up icon'}}></PIcon>
+
+      <PIcon name="arrow-last" aria={{'aria-label': 'Arrow Last icon'}}></PIcon>
+
+      <PIcon name="arrow-left" aria={{'aria-label': 'Arrow Left icon'}}></PIcon>
+
+      <PIcon name="arrow-right" aria={{'aria-label': 'Arrow Right icon'}}></PIcon>
+
+      <PIcon name="arrow-up" aria={{'aria-label': 'Arrow Up icon'}}></PIcon>
+
+      <PIcon name="arrow-up-left" aria={{'aria-label': 'Arrow Up Left icon'}}></PIcon>
+
+      <PIcon name="arrow-up-right" aria={{'aria-label': 'Arrow Up Right icon'}}></PIcon>
+
+      <PIcon name="arrows" aria={{'aria-label': 'Arrows icon'}}></PIcon>
+
+      <PIcon name="attachment" aria={{'aria-label': 'Attachment icon'}}></PIcon>
+
+      <PIcon name="augmented-reality" aria={{'aria-label': 'Augmented Reality icon'}}></PIcon>
+
+      <PIcon name="battery-empty" aria={{'aria-label': 'Battery Empty icon'}}></PIcon>
+
+      <PIcon name="battery-empty-co2" aria={{'aria-label': 'Battery Empty Co2 icon'}}></PIcon>
+
+      <PIcon name="battery-empty-fuel" aria={{'aria-label': 'Battery Empty Fuel icon'}}></PIcon>
+
+      <PIcon name="battery-full" aria={{'aria-label': 'Battery Full icon'}}></PIcon>
+
+      <PIcon name="battery-half" aria={{'aria-label': 'Battery Half icon'}}></PIcon>
+
+      <PIcon name="battery-one-quarter" aria={{'aria-label': 'Battery One Quarter icon'}}></PIcon>
+
+      <PIcon name="battery-three-quarters" aria={{'aria-label': 'Battery Three Quarters icon'}}></PIcon>
+
+      <PIcon name="bell" aria={{'aria-label': 'Bell icon'}}></PIcon>
+
+      <PIcon name="bookmark" aria={{'aria-label': 'Bookmark icon'}}></PIcon>
+
+      <PIcon name="bookmark-filled" aria={{'aria-label': 'Bookmark Filled icon'}}></PIcon>
+
+      <PIcon name="brain" aria={{'aria-label': 'Brain icon'}}></PIcon>
+
+      <PIcon name="broadcast" aria={{'aria-label': 'Broadcast icon'}}></PIcon>
+
+      <PIcon name="cabriolet" aria={{'aria-label': 'Cabriolet icon'}}></PIcon>
+
+      <PIcon name="calculator" aria={{'aria-label': 'Calculator icon'}}></PIcon>
+
+      <PIcon name="calendar" aria={{'aria-label': 'Calendar icon'}}></PIcon>
+
+      <PIcon name="camera" aria={{'aria-label': 'Camera icon'}}></PIcon>
+
+      <PIcon name="car" aria={{'aria-label': 'Car icon'}}></PIcon>
+
+      <PIcon name="car-battery" aria={{'aria-label': 'Car Battery icon'}}></PIcon>
+
+      <PIcon name="card" aria={{'aria-label': 'Card icon'}}></PIcon>
+
+      <PIcon name="charging-active" aria={{'aria-label': 'Charging Active icon'}}></PIcon>
+
+      <PIcon name="charging-network" aria={{'aria-label': 'Charging Network icon'}}></PIcon>
+
+      <PIcon name="charging-state" aria={{'aria-label': 'Charging State icon'}}></PIcon>
+
+      <PIcon name="charging-station" aria={{'aria-label': 'Charging Station icon'}}></PIcon>
+
+      <PIcon name="chart" aria={{'aria-label': 'Chart icon'}}></PIcon>
+
+      <PIcon name="chat" aria={{'aria-label': 'Chat icon'}}></PIcon>
+
+      <PIcon name="check" aria={{'aria-label': 'Check icon'}}></PIcon>
+
+      <PIcon name="city" aria={{'aria-label': 'City icon'}}></PIcon>
+
+      <PIcon name="climate" aria={{'aria-label': 'Climate icon'}}></PIcon>
+
+      <PIcon name="climate-control" aria={{'aria-label': 'Climate Control icon'}}></PIcon>
+
+      <PIcon name="clock" aria={{'aria-label': 'Clock icon'}}></PIcon>
+
+      <PIcon name="close" aria={{'aria-label': 'Close icon'}}></PIcon>
+
+      <PIcon name="closed-caption" aria={{'aria-label': 'Closed Caption icon'}}></PIcon>
+
+      <PIcon name="cloud" aria={{'aria-label': 'Cloud icon'}}></PIcon>
+
+      <PIcon name="co2-class" aria={{'aria-label': 'Co2 Class icon'}}></PIcon>
+
+      <PIcon name="co2-emission" aria={{'aria-label': 'Co2 Emission icon'}}></PIcon>
+
+      <PIcon name="color-picker" aria={{'aria-label': 'Color Picker icon'}}></PIcon>
+
+      <PIcon name="compare" aria={{'aria-label': 'Compare icon'}}></PIcon>
+
+      <PIcon name="compass" aria={{'aria-label': 'Compass icon'}}></PIcon>
+
+      <PIcon name="configurate" aria={{'aria-label': 'Configurate icon'}}></PIcon>
+
+      <PIcon name="copy" aria={{'aria-label': 'Copy icon'}}></PIcon>
+
+      <PIcon name="country-road" aria={{'aria-label': 'Country Road icon'}}></PIcon>
+
+      <PIcon name="coupe" aria={{'aria-label': 'Coupe icon'}}></PIcon>
+
+      <PIcon name="cubic-capacity" aria={{'aria-label': 'Cubic Capacity icon'}}></PIcon>
+
+      <PIcon name="cut" aria={{'aria-label': 'Cut icon'}}></PIcon>
+
+      <PIcon name="delete" aria={{'aria-label': 'Delete icon'}}></PIcon>
+
+      <PIcon name="disable" aria={{'aria-label': 'Disable icon'}}></PIcon>
+
+      <PIcon name="dislike" aria={{'aria-label': 'Dislike icon'}}></PIcon>
+
+      <PIcon name="dislike-filled" aria={{'aria-label': 'Dislike Filled icon'}}></PIcon>
+
+      <PIcon name="document" aria={{'aria-label': 'Document icon'}}></PIcon>
+
+      <PIcon name="door" aria={{'aria-label': 'Door icon'}}></PIcon>
+
+      <PIcon name="download" aria={{'aria-label': 'Download icon'}}></PIcon>
+
+      <PIcon name="drag" aria={{'aria-label': 'Drag icon'}}></PIcon>
+
+      <PIcon name="duration" aria={{'aria-label': 'Duration icon'}}></PIcon>
+
+      <PIcon name="ear" aria={{'aria-label': 'Ear icon'}}></PIcon>
+
+      <PIcon name="edit" aria={{'aria-label': 'Edit icon'}}></PIcon>
+
+      <PIcon name="email" aria={{'aria-label': 'Email icon'}}></PIcon>
+
+      <PIcon name="error" aria={{'aria-label': 'Error icon'}}></PIcon>
+
+      <PIcon name="error-filled" aria={{'aria-label': 'Error Filled icon'}}></PIcon>
+
+      <PIcon name="exclamation" aria={{'aria-label': 'Exclamation icon'}}></PIcon>
+
+      <PIcon name="exclamation-filled" aria={{'aria-label': 'Exclamation Filled icon'}}></PIcon>
+
+      <PIcon name="external" aria={{'aria-label': 'External icon'}}></PIcon>
+
+      <PIcon name="fast-backward" aria={{'aria-label': 'Fast Backward icon'}}></PIcon>
+
+      <PIcon name="fast-forward" aria={{'aria-label': 'Fast Forward icon'}}></PIcon>
+
+      <PIcon name="file-csv" aria={{'aria-label': 'File Csv icon'}}></PIcon>
+
+      <PIcon name="file-excel" aria={{'aria-label': 'File Excel icon'}}></PIcon>
+
+      <PIcon name="filter" aria={{'aria-label': 'Filter icon'}}></PIcon>
+
+      <PIcon name="fingerprint" aria={{'aria-label': 'Fingerprint icon'}}></PIcon>
+
+      <PIcon name="flag" aria={{'aria-label': 'Flag icon'}}></PIcon>
+
+      <PIcon name="flash" aria={{'aria-label': 'Flash icon'}}></PIcon>
+
+      <PIcon name="fuel-station" aria={{'aria-label': 'Fuel Station icon'}}></PIcon>
+
+      <PIcon name="garage" aria={{'aria-label': 'Garage icon'}}></PIcon>
+
+      <PIcon name="genuine-parts" aria={{'aria-label': 'Genuine Parts icon'}}></PIcon>
+
+      <PIcon name="geo-localization" aria={{'aria-label': 'Geo Localization icon'}}></PIcon>
+
+      <PIcon name="gift" aria={{'aria-label': 'Gift icon'}}></PIcon>
+
+      <PIcon name="globe" aria={{'aria-label': 'Globe icon'}}></PIcon>
+
+      <PIcon name="grid" aria={{'aria-label': 'Grid icon'}}></PIcon>
+
+      <PIcon name="grip" aria={{'aria-label': 'Grip icon'}}></PIcon>
+
+      <PIcon name="group" aria={{'aria-label': 'Group icon'}}></PIcon>
+
+      <PIcon name="hand" aria={{'aria-label': 'Hand icon'}}></PIcon>
+
+      <PIcon name="heart" aria={{'aria-label': 'Heart icon'}}></PIcon>
+
+      <PIcon name="heart-filled" aria={{'aria-label': 'Heart Filled icon'}}></PIcon>
+
+      <PIcon name="highway" aria={{'aria-label': 'Highway icon'}}></PIcon>
+
+      <PIcon name="highway-filled" aria={{'aria-label': 'Highway Filled icon'}}></PIcon>
+
+      <PIcon name="history" aria={{'aria-label': 'History icon'}}></PIcon>
+
+      <PIcon name="home" aria={{'aria-label': 'Home icon'}}></PIcon>
+
+      <PIcon name="horn" aria={{'aria-label': 'Horn icon'}}></PIcon>
+
+      <PIcon name="image" aria={{'aria-label': 'Image icon'}}></PIcon>
+
+      <PIcon name="increase" aria={{'aria-label': 'Increase icon'}}></PIcon>
+
+      <PIcon name="information" aria={{'aria-label': 'Information icon'}}></PIcon>
+
+      <PIcon name="information-filled" aria={{'aria-label': 'Information Filled icon'}}></PIcon>
+
+      <PIcon name="key" aria={{'aria-label': 'Key icon'}}></PIcon>
+
+      <PIcon name="laptop" aria={{'aria-label': 'Laptop icon'}}></PIcon>
+
+      <PIcon name="leaf" aria={{'aria-label': 'Leaf icon'}}></PIcon>
+
+      <PIcon name="leather" aria={{'aria-label': 'Leather icon'}}></PIcon>
+
+      <PIcon name="light" aria={{'aria-label': 'Light icon'}}></PIcon>
+
+      <PIcon name="like" aria={{'aria-label': 'Like icon'}}></PIcon>
+
+      <PIcon name="like-filled" aria={{'aria-label': 'Like Filled icon'}}></PIcon>
+
+      <PIcon name="limousine" aria={{'aria-label': 'Limousine icon'}}></PIcon>
+
+      <PIcon name="linked" aria={{'aria-label': 'Linked icon'}}></PIcon>
+
+      <PIcon name="list" aria={{'aria-label': 'List icon'}}></PIcon>
+
+      <PIcon name="locate" aria={{'aria-label': 'Locate icon'}}></PIcon>
+
+      <PIcon name="lock" aria={{'aria-label': 'Lock icon'}}></PIcon>
+
+      <PIcon name="lock-open" aria={{'aria-label': 'Lock Open icon'}}></PIcon>
+
+      <PIcon name="logo-apple-carplay" aria={{'aria-label': 'Logo Apple Carplay icon'}}></PIcon>
+
+      <PIcon name="logo-apple-music" aria={{'aria-label': 'Logo Apple Music icon'}}></PIcon>
+
+      <PIcon name="logo-apple-podcast" aria={{'aria-label': 'Logo Apple Podcast icon'}}></PIcon>
+
+      <PIcon name="logo-baidu" aria={{'aria-label': 'Logo Baidu icon'}}></PIcon>
+
+      <PIcon name="logo-delicious" aria={{'aria-label': 'Logo Delicious icon'}}></PIcon>
+
+      <PIcon name="logo-digg" aria={{'aria-label': 'Logo Digg icon'}}></PIcon>
+
+      <PIcon name="logo-facebook" aria={{'aria-label': 'Logo Facebook icon'}}></PIcon>
+
+      <PIcon name="logo-foursquare" aria={{'aria-label': 'Logo Foursquare icon'}}></PIcon>
+
+      <PIcon name="logo-gmail" aria={{'aria-label': 'Logo Gmail icon'}}></PIcon>
+
+      <PIcon name="logo-google" aria={{'aria-label': 'Logo Google icon'}}></PIcon>
+
+      <PIcon name="logo-hatena" aria={{'aria-label': 'Logo Hatena icon'}}></PIcon>
+
+      <PIcon name="logo-instagram" aria={{'aria-label': 'Logo Instagram icon'}}></PIcon>
+
+      <PIcon name="logo-kaixin" aria={{'aria-label': 'Logo Kaixin icon'}}></PIcon>
+
+      <PIcon name="logo-kakaotalk" aria={{'aria-label': 'Logo Kakaotalk icon'}}></PIcon>
+
+      <PIcon name="logo-kununu" aria={{'aria-label': 'Logo Kununu icon'}}></PIcon>
+
+      <PIcon name="logo-linkedin" aria={{'aria-label': 'Logo Linkedin icon'}}></PIcon>
+
+      <PIcon name="logo-naver" aria={{'aria-label': 'Logo Naver icon'}}></PIcon>
+
+      <PIcon name="logo-pinterest" aria={{'aria-label': 'Logo Pinterest icon'}}></PIcon>
+
+      <PIcon name="logo-qq" aria={{'aria-label': 'Logo Qq icon'}}></PIcon>
+
+      <PIcon name="logo-qq-share" aria={{'aria-label': 'Logo Qq Share icon'}}></PIcon>
+
+      <PIcon name="logo-reddit" aria={{'aria-label': 'Logo Reddit icon'}}></PIcon>
+
+      <PIcon name="logo-skyrock" aria={{'aria-label': 'Logo Skyrock icon'}}></PIcon>
+
+      <PIcon name="logo-snapchat" aria={{'aria-label': 'Logo Snapchat icon'}}></PIcon>
+
+      <PIcon name="logo-sohu" aria={{'aria-label': 'Logo Sohu icon'}}></PIcon>
+
+      <PIcon name="logo-spotify" aria={{'aria-label': 'Logo Spotify icon'}}></PIcon>
+
+      <PIcon name="logo-tecent" aria={{'aria-label': 'Logo Tecent icon'}}></PIcon>
+
+      <PIcon name="logo-telegram" aria={{'aria-label': 'Logo Telegram icon'}}></PIcon>
+
+      <PIcon name="logo-tiktok" aria={{'aria-label': 'Logo Tiktok icon'}}></PIcon>
+
+      <PIcon name="logo-tumblr" aria={{'aria-label': 'Logo Tumblr icon'}}></PIcon>
+
+      <PIcon name="logo-twitter" aria={{'aria-label': 'Logo Twitter icon'}}></PIcon>
+
+      <PIcon name="logo-viber" aria={{'aria-label': 'Logo Viber icon'}}></PIcon>
+
+      <PIcon name="logo-vk" aria={{'aria-label': 'Logo Vk icon'}}></PIcon>
+
+      <PIcon name="logo-wechat" aria={{'aria-label': 'Logo Wechat icon'}}></PIcon>
+
+      <PIcon name="logo-weibo" aria={{'aria-label': 'Logo Weibo icon'}}></PIcon>
+
+      <PIcon name="logo-whatsapp" aria={{'aria-label': 'Logo Whatsapp icon'}}></PIcon>
+
+      <PIcon name="logo-x" aria={{'aria-label': 'Logo X icon'}}></PIcon>
+
+      <PIcon name="logo-xing" aria={{'aria-label': 'Logo Xing icon'}}></PIcon>
+
+      <PIcon name="logo-yahoo" aria={{'aria-label': 'Logo Yahoo icon'}}></PIcon>
+
+      <PIcon name="logo-youku" aria={{'aria-label': 'Logo Youku icon'}}></PIcon>
+
+      <PIcon name="logo-youtube" aria={{'aria-label': 'Logo Youtube icon'}}></PIcon>
+
+      <PIcon name="logout" aria={{'aria-label': 'Logout icon'}}></PIcon>
+
+      <PIcon name="map" aria={{'aria-label': 'Map icon'}}></PIcon>
+
+      <PIcon name="menu-dots-horizontal" aria={{'aria-label': 'Menu Dots Horizontal icon'}}></PIcon>
+
+      <PIcon name="menu-dots-vertical" aria={{'aria-label': 'Menu Dots Vertical icon'}}></PIcon>
+
+      <PIcon name="menu-lines" aria={{'aria-label': 'Menu Lines icon'}}></PIcon>
+
+      <PIcon name="microphone" aria={{'aria-label': 'Microphone icon'}}></PIcon>
+
+      <PIcon name="minus" aria={{'aria-label': 'Minus icon'}}></PIcon>
+
+      <PIcon name="mobile" aria={{'aria-label': 'Mobile icon'}}></PIcon>
+
+      <PIcon name="moon" aria={{'aria-label': 'Moon icon'}}></PIcon>
+
+      <PIcon name="new-chat" aria={{'aria-label': 'New Chat icon'}}></PIcon>
+
+      <PIcon name="news" aria={{'aria-label': 'News icon'}}></PIcon>
+
+      <PIcon name="north-arrow" aria={{'aria-label': 'North Arrow icon'}}></PIcon>
+
+      <PIcon name="oil-can" aria={{'aria-label': 'Oil Can icon'}}></PIcon>
+
+      <PIcon name="online-search" aria={{'aria-label': 'Online Search icon'}}></PIcon>
+
+      <PIcon name="parking-brake" aria={{'aria-label': 'Parking Brake icon'}}></PIcon>
+
+      <PIcon name="parking-light" aria={{'aria-label': 'Parking Light icon'}}></PIcon>
+
+      <PIcon name="paste" aria={{'aria-label': 'Paste icon'}}></PIcon>
+
+      <PIcon name="pause" aria={{'aria-label': 'Pause icon'}}></PIcon>
+
+      <PIcon name="phone" aria={{'aria-label': 'Phone icon'}}></PIcon>
+
+      <PIcon name="pin" aria={{'aria-label': 'Pin icon'}}></PIcon>
+
+      <PIcon name="pin-filled" aria={{'aria-label': 'Pin Filled icon'}}></PIcon>
+
+      <PIcon name="pivot" aria={{'aria-label': 'Pivot icon'}}></PIcon>
+
+      <PIcon name="play" aria={{'aria-label': 'Play icon'}}></PIcon>
+
+      <PIcon name="play-filled" aria={{'aria-label': 'Play Filled icon'}}></PIcon>
+
+      <PIcon name="plug" aria={{'aria-label': 'Plug icon'}}></PIcon>
+
+      <PIcon name="plus" aria={{'aria-label': 'Plus icon'}}></PIcon>
+
+      <PIcon name="preheating" aria={{'aria-label': 'Preheating icon'}}></PIcon>
+
+      <PIcon name="price-tag" aria={{'aria-label': 'Price Tag icon'}}></PIcon>
+
+      <PIcon name="printer" aria={{'aria-label': 'Printer icon'}}></PIcon>
+
+      <PIcon name="purchase" aria={{'aria-label': 'Purchase icon'}}></PIcon>
+
+      <PIcon name="push-pin" aria={{'aria-label': 'Push Pin icon'}}></PIcon>
+
+      <PIcon name="push-pin-off" aria={{'aria-label': 'Push Pin Off icon'}}></PIcon>
+
+      <PIcon name="qr" aria={{'aria-label': 'Qr icon'}}></PIcon>
+
+      <PIcon name="qr-off" aria={{'aria-label': 'Qr Off icon'}}></PIcon>
+
+      <PIcon name="question" aria={{'aria-label': 'Question icon'}}></PIcon>
+
+      <PIcon name="question-filled" aria={{'aria-label': 'Question Filled icon'}}></PIcon>
+
+      <PIcon name="racing-flag" aria={{'aria-label': 'Racing Flag icon'}}></PIcon>
+
+      <PIcon name="radar" aria={{'aria-label': 'Radar icon'}}></PIcon>
+
+      <PIcon name="radio" aria={{'aria-label': 'Radio icon'}}></PIcon>
+
+      <PIcon name="refresh" aria={{'aria-label': 'Refresh icon'}}></PIcon>
+
+      <PIcon name="replay" aria={{'aria-label': 'Replay icon'}}></PIcon>
+
+      <PIcon name="reset" aria={{'aria-label': 'Reset icon'}}></PIcon>
+
+      <PIcon name="return" aria={{'aria-label': 'Return icon'}}></PIcon>
+
+      <PIcon name="road" aria={{'aria-label': 'Road icon'}}></PIcon>
+
+      <PIcon name="roof-closed" aria={{'aria-label': 'Roof Closed icon'}}></PIcon>
+
+      <PIcon name="roof-open" aria={{'aria-label': 'Roof Open icon'}}></PIcon>
+
+      <PIcon name="route" aria={{'aria-label': 'Route icon'}}></PIcon>
+
+      <PIcon name="rss" aria={{'aria-label': 'Rss icon'}}></PIcon>
+
+      <PIcon name="save" aria={{'aria-label': 'Save icon'}}></PIcon>
+
+      <PIcon name="screen" aria={{'aria-label': 'Screen icon'}}></PIcon>
+
+      <PIcon name="search" aria={{'aria-label': 'Search icon'}}></PIcon>
+
+      <PIcon name="seat" aria={{'aria-label': 'Seat icon'}}></PIcon>
+
+      <PIcon name="send" aria={{'aria-label': 'Send icon'}}></PIcon>
+
+      <PIcon name="service-technician" aria={{'aria-label': 'Service Technician icon'}}></PIcon>
+
+      <PIcon name="share" aria={{'aria-label': 'Share icon'}}></PIcon>
+
+      <PIcon name="shopping-bag" aria={{'aria-label': 'Shopping Bag icon'}}></PIcon>
+
+      <PIcon name="shopping-bag-filled" aria={{'aria-label': 'Shopping Bag Filled icon'}}></PIcon>
+
+      <PIcon name="shopping-cart" aria={{'aria-label': 'Shopping Cart icon'}}></PIcon>
+
+      <PIcon name="shopping-cart-filled" aria={{'aria-label': 'Shopping Cart Filled icon'}}></PIcon>
+
+      <PIcon name="sidebar" aria={{'aria-label': 'Sidebar icon'}}></PIcon>
+
+      <PIcon name="sidelights" aria={{'aria-label': 'Sidelights icon'}}></PIcon>
+
+      <PIcon name="skip-backward" aria={{'aria-label': 'Skip Backward icon'}}></PIcon>
+
+      <PIcon name="skip-forward" aria={{'aria-label': 'Skip Forward icon'}}></PIcon>
+
+      <PIcon name="snowflake" aria={{'aria-label': 'Snowflake icon'}}></PIcon>
+
+      <PIcon name="sort" aria={{'aria-label': 'Sort icon'}}></PIcon>
+
+      <PIcon name="stack" aria={{'aria-label': 'Stack icon'}}></PIcon>
+
+      <PIcon name="star" aria={{'aria-label': 'Star icon'}}></PIcon>
+
+      <PIcon name="star-filled" aria={{'aria-label': 'Star Filled icon'}}></PIcon>
+
+      <PIcon name="steering-wheel" aria={{'aria-label': 'Steering Wheel icon'}}></PIcon>
+
+      <PIcon name="stop" aria={{'aria-label': 'Stop icon'}}></PIcon>
+
+      <PIcon name="stopwatch" aria={{'aria-label': 'Stopwatch icon'}}></PIcon>
+
+      <PIcon name="subtract" aria={{'aria-label': 'Subtract icon'}}></PIcon>
+
+      <PIcon name="success" aria={{'aria-label': 'Success icon'}}></PIcon>
+
+      <PIcon name="success-filled" aria={{'aria-label': 'Success Filled icon'}}></PIcon>
+
+      <PIcon name="sun" aria={{'aria-label': 'Sun icon'}}></PIcon>
+
+      <PIcon name="suv" aria={{'aria-label': 'Suv icon'}}></PIcon>
+
+      <PIcon name="switch" aria={{'aria-label': 'Switch icon'}}></PIcon>
+
+      <PIcon name="tablet" aria={{'aria-label': 'Tablet icon'}}></PIcon>
+
+      <PIcon name="tachometer" aria={{'aria-label': 'Tachometer icon'}}></PIcon>
+
+      <PIcon name="theme" aria={{'aria-label': 'Theme icon'}}></PIcon>
+
+      <PIcon name="tire" aria={{'aria-label': 'Tire icon'}}></PIcon>
+
+      <PIcon name="trigger-finger" aria={{'aria-label': 'Trigger Finger icon'}}></PIcon>
+
+      <PIcon name="truck" aria={{'aria-label': 'Truck icon'}}></PIcon>
+
+      <PIcon name="turismo" aria={{'aria-label': 'Turismo icon'}}></PIcon>
+
+      <PIcon name="unlinked" aria={{'aria-label': 'Unlinked icon'}}></PIcon>
+
+      <PIcon name="upload" aria={{'aria-label': 'Upload icon'}}></PIcon>
+
+      <PIcon name="user" aria={{'aria-label': 'User icon'}}></PIcon>
+
+      <PIcon name="user-filled" aria={{'aria-label': 'User Filled icon'}}></PIcon>
+
+      <PIcon name="user-group" aria={{'aria-label': 'User Group icon'}}></PIcon>
+
+      <PIcon name="user-manual" aria={{'aria-label': 'User Manual icon'}}></PIcon>
+
+      <PIcon name="video" aria={{'aria-label': 'Video icon'}}></PIcon>
+
+      <PIcon name="view" aria={{'aria-label': 'View icon'}}></PIcon>
+
+      <PIcon name="view-off" aria={{'aria-label': 'View Off icon'}}></PIcon>
+
+      <PIcon name="volume-off" aria={{'aria-label': 'Volume Off icon'}}></PIcon>
+
+      <PIcon name="volume-up" aria={{'aria-label': 'Volume Up icon'}}></PIcon>
+
+      <PIcon name="warning" aria={{'aria-label': 'Warning icon'}}></PIcon>
+
+      <PIcon name="warning-filled" aria={{'aria-label': 'Warning Filled icon'}}></PIcon>
+
+      <PIcon name="weather" aria={{'aria-label': 'Weather icon'}}></PIcon>
+
+      <PIcon name="weight" aria={{'aria-label': 'Weight icon'}}></PIcon>
+
+      <PIcon name="wifi" aria={{'aria-label': 'Wifi icon'}}></PIcon>
+
+      <PIcon name="work" aria={{'aria-label': 'Work icon'}}></PIcon>
+
+      <PIcon name="wrench" aria={{'aria-label': 'Wrench icon'}}></PIcon>
+
+      <PIcon name="wrenches" aria={{'aria-label': 'Wrenches icon'}}></PIcon>
+
+      <PIcon name="zoom-in" aria={{'aria-label': 'Zoom In icon'}}></PIcon>
+
+      <PIcon name="zoom-out" aria={{'aria-label': 'Zoom Out icon'}}></PIcon>
+    </>
+  )
+}

package/skill/references/components/p-icon/examples/ResponsiveSize.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PIcon } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PIcon size={{'base': 'sm', 'l': '2xl'}} name="highway" aria={{'aria-label': 'Highway icon'}}></PIcon>
+    </>
+  )
+}

package/skill/references/components/p-icon/examples/Size.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PIcon, PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText className="text-[48px]" size="inherit">
+        <PIcon className="me-static-sm" size="inherit" name="highway" aria={{'aria-label': 'Highway icon'}}></PIcon>
+        Some text
+      </PText>
+    </>
+  )
+}

package/skill/references/components/p-icon/examples/SizeCssVar.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PIcon } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PIcon className="[--p-icon-size:48px]" name="highway" aria={{'aria-label': 'Highway icon'}}></PIcon>
+    </>
+  )
+}