penpot/docs/user-guide/libraries/index.njk

---
title: 09· Asset Libraries
---

<h1 id="asset-libraries">Asset Libraries</h1>
<p class="main-paragraph">Asset Libraries allow you to store elements and styles so that they can be easily reused. Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>

<h2 id="assets">Assets</h2>

<h3 id="asset-types">Asset types</h3>
<p>In Penpot you can store different type of assets:</p>
<ul>
  <li><strong>Components:</strong> A component is an object or group of objects that can be reused multiple times across files (projects and teams in the future). Learn more at the <a href="/user-guide/components/">components section</a>.</li>
  <li><strong>Colors:</strong> Create your color styles and use them on fills and strokes.</li>
  <li><strong>Typographies:</strong> Penpot allows you to save typography styles with a set of reusable properties. You can always unlink a typography style maintaining the properties for the text layer.</li>
  <li><strong>[Deprecated] Graphics:</strong> In Penpot versions older than 2.0, bitmap and vector images can be stored at the Graphics section. This type was deprecated in favor of components.</li>
</ul>

<h3 id="add-assets-to-library">Add assets to libraries</h3>
<p>You can use the “+” icon to add assets. Each of the categories have their own specific adding action.</p>
<h4>Components</h4>
<p>There are two ways to add components to an assets library:</p>
<ol>
  <li>Main components are automatically stored in the local library at the moment of being created. Learn more about components at the <a href="/user-guide/components/">components section</a>.</li>
  <li>Clicking the “+” to launch import an image that will be added as a component.</li>
</ol>
<figure>
  <video title="Add component" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-component.webp" height="auto">
    <source src="/img/libraries/add-component.mp4" type="video/mp4">
  </video>
</figure>
<h4>Colors</h4>
<p>Click the “+” to launch the color picker and add a color to the library. Learn more about <a href="/user-guide/styling/#fill">managing color</a></p>
<figure>
  <video title="Add color" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-color.webp" height="auto">
    <source src="/img/libraries/add-color.mp4" type="video/mp4">
  </video>
</figure>
<h4>Typographies</h4>
<p>All typography styles created from the text properties (at the right sidebar) are automatically stored at the library. You can also click the “+” to create a new typography style from scratch.</p>
<figure>
  <video title="Add typography" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-typography.webp" height="auto">
    <source src="/img/libraries/add-typography.mp4" type="video/mp4">
  </video>
</figure>
<p><strong>Tip:</strong> If you select a text layer with certain properties (font family, size, line height...) and click the "+" at the Typographies section at the assets library (left sidebar), the created typography style will include the properties of the text layer.</p>

<h3 id="edit-assets">Edit assets</h3>
<p>Press left click over any asset of the library to show the options menu. Some options are available only for certain assets.</p>
<ul>
  <li><strong>Components:</strong> Rename, duplicate, delete, group.</li>
  <li><strong>Colors:</strong> Rename, edit, delete.</li>
  <li><strong>Typographies:</strong> Rename, edit, delete.</li>
</ul>
<figure>
  <video title="Asset options" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-options.webp" height="auto">
    <source src="/img/libraries/asset-options.mp4" type="video/mp4">
  </video>
</figure>

<h3 id="use-assets">Use Assets</h3>
<ul>
  <li><strong>Components:</strong> Drag the component directly from the library to the viewport.</li>
  <li><strong>Colors:</strong> With a shape or a text selected click a color from the library to apply it as a fill. If you press <kbd>Alt</kbd> (or <kbd>⌥</kbd> in macOS) while clicking, the color will be applied to the stroke.</li>
  <li><strong>Typographies:</strong> With a text layer selected click a typography style from the library to apply it.</li>
</ul>
<figure>
  <video title="Asset use" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-use.webp" height="auto">
    <source src="/img/libraries/asset-use.mp4" type="video/mp4">
  </video>
</figure>

<h3 id="organize-assets">Organize assets</h3>
<p>Learn how to better view and organize your assets:</p>

<h4>Assets list views</h4>
<p>You can switch between list and grid views.</p>
<ul>
  <li><strong>Grid view:</strong> With the thumbnails displayed is easier to visually identify the content of specific assets, specially components.</li>
  <li><strong>List view:</strong> Optimized to identify the assets by their names and view more assets at the same time.</li>
</ul>
<figure>
  <video title="Asset list" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-list.webp" height="auto">
    <source src="/img/libraries/asset-list.mp4" type="video/mp4">
  </video>
</figure>

<h4>Sort assets</h4>
<p>Click the sort button to change the alphabetical order.</p>
<figure>
  <video title="Asset sort" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-order.webp" height="auto">
    <source src="/img/libraries/asset-order.mp4" type="video/mp4">
  </video>
</figure>

<h4>Search assets</h4>
<p>Use the Search assets box to filter the assets with names that match what you write.</p>
<figure>
  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-search.webp" height="auto">
    <source src="/img/libraries/asset-search.mp4" type="video/mp4">
  </video>
</figure>

<h4>Filter assets</h4>
<p>You can decide whether to show all asset types or only one of your choice (components, colors or typographies).</p>

<h4>Multiselect assets</h4>
<figure>
  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-multiselect.webp" height="auto">
    <source src="/img/libraries/asset-multiselect.mp4" type="video/mp4">
  </video>
</figure>

<h4>Group assets</h4>
<p>There are two ways to create groups in a library.</p> 
<ol>
  <li><strong>With slashes (/):</strong> Select an asset and rename it as follows: "FOLDER NAME/ASSET NAME". For example, "Buttons/Alert Button".</li>
  <li><strong>With the "Group" option:</strong> Select one or more assets at the library, then right click to show the menu and then select "Group".</li>
</ol>
<figure>
  <video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.webp" height="auto">
    <source src="/img/components/components-group.mp4" type="video/mp4">
  </video>
</figure>

<h4>Ungroup assets</h4>
<p>You can ungroup the assets the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.</p>

<h4>Drag assets to groups</h4>
<p>One very direct way to move assets between groups at the libraries is by dragging them.</p>
<figure>
  <video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
    <source src="/img/components/components-drag.mp4" type="video/mp4">
  </video>
</figure>


<h2 id="libraries">Libraries</h2>

<h3 id="file-libraries">File libraries</h3>
<p>Each file has its own file library which is where the assets that belong to this file are stored.</p> 
<p>You have two ways to access the file library from the file <a href="/user-guide/the-interface/#interface-workspace">workspace</a>:</p>
<ul>
  <li>Click the assets tab icon at the left sidebar.</li>
  <li>Press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</li>
</ul>
<figure>
  <img src="/img/libraries/assets-tab.webp" alt="Library assets tab">
</figure>

<h3 id="shared-libraries">Shared libraries</h3>
<h4>Publish as shared library</h4>
<p>You can publish any regular file as a shared library. This means that the file library of this file will be available to be connected to other files that exist in the same team, so its library assets can be reused.</p>
<p>There are two ways to publish a library:</p>
<ul>
  <li>Using the file main menu.</li>
  <li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
</ul>
<figure>
  <img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">
  <figcaption>Publishing a library from the main menu</figcaption>
</figure>
<figure>
  <img src="/img/libraries/libraries-publish-panel.webp" alt="Publish library">
  <figcaption>Publishing a library from the libraries panel</figcaption>
</figure>

<h4>Unpublish a shared library</h4>
<p>You can unpublish any library anytime the same way you can publish it, both from the file menu and the libraries panel.</p>
<p>Unpublishing a library will disconnect it from the files where it was connected. The assets that have already been used in other files will remain, but no longer linked with the now unpublished library.</p>

<h4>Library updates</h4>
<p></p>
<figure>
  <img src="/img/libraries/libraries-updates.webp" alt="Update libraries">
</figure>

<h4>Connect shared libraries</h4>
<p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries. If you see the message "There are no Shared Libraries available", start by <a href="/user-guide/libraries/#shared-libraries">publishing other files as a shared library</a> or add from our <a href="https://penpot.app/libraries-templates">Libraries & templates</a>.</p>
<figure>
  <video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.webp" height="auto">
    <source src="/img/libraries/libraries-launch.mp4" type="video/mp4">
  </video>
</figure>

<h4>Disconnect shared library</h4>
<p>You can disconnect any library anytime from the libraries panel just by clicking on the disconnect button.</p>
<figure>
  <img src="/img/libraries/libraries-disconnect.webp" alt="Disconnect libraries">
</figure>

<h4>Use shared libraries</h4>
<p>Shared libraries will be listed at the assets panel, at the workspace left sidebar. You can expand and collapse them to access the assets of each connected shared library.</p>
<figure>
  <img src="/img/libraries/libraries-sidebar.webp" alt="Connected libraries list">
</figure>

<h4>Open shared library file</h4>
<p>Click on the arrow icon at the right of a shared library name to go to the file where the library is and edit its contents.</p>
<figure>
  <img src="/img/libraries/libraries-open.webp" alt="Open libraries">
</figure>