Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageGuidelineAccessibilityAPI
Icon We want to enable you to use the icons you need. Check the Porsche Design System for an appropriate icon you are looking for. If there is no match, we encourage you to build, test and use the icons you need. To help you meet the quality standards of Porsche, you will find the guidelines below. Do you have an icon that is mandatory for several teams and purposes? We are happy to include it in the Porsche Design System. Feel free to get in touch with us on our Porsche Design System Slack Table of Contents Metaphor and Appearance Check the Porsche environment for similar or close icons to adapt (Web, App, In Car, Print) Stick to the basic geometric shapes. Use easy and commonly known metaphors. Keep the details and complexity to a minimum. Make sure corresponding icons have the same position e.g. the "add" and "remove" icon. Check your design about other icons from the Porsche Design System. Quality assurance Build your icons based on the default grid (48x48px) Default Porsche icons are based on 2px lines. Fill areas smaller than 4px. Snap pixels to the grid to ensure a sharp visual appearance (prevents blurred lines because of anti-aliasing on low-resolution displays). Try to balance the width and height of the icon a uniform appearance in icon groups. Respect the safe area around the icon (approximately 4px, which can vary depending on the ratio of the icon). Design with only one color. SVG Export Transform vector forms in a full, coherent vector shape. (convert strokes to shapes and merge objects). Delete everything that is not necessary (layers, strokes, variants, etc.). Export your icon as an svg. Name svg according to the icons (e.g. "delete.svg" or "edit.svg"). Name social icons "logo-companyname.svg". Run an svg optimizer to gain pure semantic code. Read more on Nielsen Norman Group UsabilityHub
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%