Ocean Icons in PenpotI began the process of moving icons from Figma to Penpot. The icons are locate in the Icons page inside Penpot. This page contains some placeholder icon components created by our contributors. This was done so that we could use generic icons for UI as we complete more parts of Ocean design.Including new icons from Figma into Penpot is not easy. There are a couple of drawbacks we see. Penpot does not have the same shape control that Figma does. Because of that, Penpot does not recognize shapes like circles, squares, lines, etc. Another issue is the importing erases the naming schemes that the icons have. This is a known bug at Penpot and they are working to resolve it.Penpot also seems to do something pretty interesting on import. It creates a folder where the graphics are contained, it adds an invisible background image, and in some cases, a bitmap in the same structure. I believe these are just import issues that Penpot resolves in different ways. I hope their parsing on import gets better overtime.However, with the new rendering engine in Penpot, the icon collection, though slow at times, is able to keep up with the rendering and I am able to load up thousands of svg icons in Penpot. Under the previous set up, this would not be possible without crashing.Because of these two drawbacks, I had to flatten all the images before exporting. Otherwise, Penpot could run into rendering issues as svg code from Figma has its own quirks. Still, with these compromises, I was still able to copy all the monochrome icons built for Ocean into Penpot. Now, I have to take the time to rename all the icons to their proper names. There are also some icons that don’t render properly, or at all. For those icons, I will have to take them case by case and fix them.After renaming all these icons and getting them to their proper organization, I will create components from them that can be used in UI throughout the file.Ocean + Union June MeetingEarlier this month, we also connected with the Union team to discuss the implementation support of reference tokens and semantic tokens from Penpot into Plasma. We also discussed the creation of Ocean assets.Providing support in Plasma for Ocean design tokens is no small feat. It requires careful preparation. This is one of those elements that Ocean Design provides. The goal here is that Plasma and applications are able to support the tokens/variables provided by the Ocean design system.In a distant future, our goal would be to give the Ocean system to anyone willing to create their own version. They would export their tokens and Plasma would support them without the need for additional code. This achieves a couple of great things, one is that designers work in an environment that is ready for editing with all the graphical sources needed, no need for coding skills. On the other hand, this should push interested users into designing and testing their designs first, without the need to push code first, which requires the mobilization of our teams to review, adapt and provide feedback. It’s a “cheaper” effort to work with graphics first and see how they would look after export.There are more benefits to this approach, but these are two that I always go back to.From this meeting, our determination is that I should provide a series of spec files containing all the technical details from the foundational components in Penpot. These components are the smallest bit of interaction in graphical systems. Buttons, shadows, typography, etc. These are akin to the bricks on a wall.With this idea in mind, I was able to create and provide the specs to the Union team.New Components in PenpotContinuing with the process of creating sample components in Penpot, we now feature:Application Navigation: This page contains sidebars for desktop and mobile.Section Footers: This page contains footers used in application footers or even websites, for desktop and mobile sizes.Inline CTAs (Calls to action): These CTAs help users make quick decisions on a piece of information without the need for taking over the screen using Modals, for example.Section Headers (Received an expansion): Section headers used to be just one version of the component. This was expanded to add more versions.Please note that these components are "not" Plasma components and is not indicative of Plasma's future state. These are here for inspiration for the future, and for users looking to test their design edits and results. Eventually, these could serve as starting points for layout design, component creation, etc.In addition to these component samples, I am now working on building a calendar view component. I am taking inspiration from Merkuro Calendar and also including some ideas from Ocean. The idea is that a calendar view could be available for others to use and test designs against. More to come on this.Fixes in Ocean Design SystemFixed layout and design for dropdown items. They were previously just text in a layout. They are supposed to behave differently inside dropdown menus. They need to have inner margins and separation from other items in a list. The shortcut component also received updates and looks more legit than before. This should make it easier to use dropdown components in Penpot.Created a dot component that is used in Calendars to show activity or reminders inside monthly views.Inputs components received updates so they behave better when manipulating sizing. There were some issues with containers and components inside containers so I tried fixing those. There is an existing Penpot bug that when components are updated at the source, the component copies tend to go back to use fixed sizing instead of dynamic sizing. This makes me cycle through fixing not just sources but copies of the components. It seems the issue is in nested components where the parent takes over some of the sizing properties. Penpot is working on this.Created the checkmark inside a circle component. This component is meant to be used when running through selections that need to indicate success in their interaction. For example, completing a survey, or a multi-step installation procedure. A checkbox is not appropriate there but a circle with a checkmark inside. So now that’s available. It’s not using a monochrome Ocean icon checkmark yet, but that can be changed in the future.Avatars are now using an image with color all inside. Previously I had an avatar image that was white and it made it difficult to see the white border around the avatar image.Next in Component DesignCalendar viewSlideout menusProgress stepsThanksThanks to Beryesa for creating the Penpot Design Notes page. This is super helpful when users need to understand what they are looking at and how it is used in the system. Thanks to iclone for his work on commenting around UX issues in the VDG channel.Thanks to the Union team for all their support for Ocean.Thanks to Lorenz for helping me troubleshoot some crashes in Penpot.Penpot Issues and Featureshttps://github.com/penpot/penpot/issues: Ocean Updates – June 2026