@amsterdam/design-system-assets 1.1.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/CONTRIBUTING.md +45 -5
  3. package/README.md +3 -3
  4. package/icons/Delete.svg +1 -0
  5. package/icons/DeleteFill.svg +1 -0
  6. package/icons/Notification.svg +1 -0
  7. package/icons/NotificationFill.svg +1 -0
  8. package/icons/UserAccount.svg +1 -0
  9. package/icons/UserAccountFill.svg +1 -0
  10. package/package.json +1 -1
  11. /package/icons/{Linkedin.svg → LinkedIn.svg} +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.0](https://github.com/Amsterdam/design-system/compare/design-system-assets-v1.1.0...design-system-assets-v2.0.0) (2026-01-09)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * Use correct spelling for LinkedIn icon SVG ([#2357](https://github.com/Amsterdam/design-system/issues/2357))
12
+
13
+ ### Deprecations
14
+
15
+ The following icons will be removed in release 4.0.0:
16
+
17
+ - `Bell` and `BellFill`, use `Notification` and `NotificationFill` instead.
18
+ - `PersonCircle` and `PersonCircleFill`, use `UserAccount` and `UserAccountFill` instead.
19
+ - `TrashBin` and `TrashBinFill`, use `Delete` and `DeleteFill` instead.
20
+
21
+ ### Features
22
+
23
+ * Rename ‘Bell’, ‘PersonCircle’ and ‘TrashBin’ icons to ‘Notification’, ‘UserAccount’ and ‘Delete’ ([#2319](https://github.com/Amsterdam/design-system/issues/2319)) ([909f1d6](https://github.com/Amsterdam/design-system/commit/909f1d622c65f151f3936ea200ec6fe421ae1909))
24
+
25
+
26
+ ### Bug Fixes
27
+
28
+ * Use correct spelling for LinkedIn icon SVG ([#2357](https://github.com/Amsterdam/design-system/issues/2357)) ([7fd5d6f](https://github.com/Amsterdam/design-system/commit/7fd5d6f377907ab7503d8cfbdf9825ae8460d6c6))
29
+
6
30
  ## [1.1.0](https://github.com/Amsterdam/design-system/compare/design-system-assets-v1.0.1...design-system-assets-v1.1.0) (2025-09-26)
7
31
 
8
32
 
package/CONTRIBUTING.md CHANGED
@@ -2,16 +2,56 @@
2
2
 
3
3
  # Contributing Guidelines
4
4
 
5
+ ## Naming icons
6
+
7
+ Icon names are part of the public API, so they must be stable, predictable, and easy to interpret.
8
+ Use the guidelines below to name icons consistently.
9
+
10
+ ### General and functional icons
11
+
12
+ We reserve well-known icons for the functions users naturally associate with them.
13
+ This reduces ambiguity and makes the interface more intuitive.
14
+
15
+ - **Use the function** when the icon has a single, widely recognised UI purpose.
16
+ These names are typically **verbs** (e.g., Save, Close, Print).
17
+ Designate an icon as functional only when its meaning is clear and consistently used across interfaces.
18
+ - **Describe the pictogram** when the icon is generic or not tied to a specific interaction.
19
+ These names are usually **nouns** and remain reusable across contexts.
20
+ Broader concepts such as ‘justice’, ‘sustainability’, or ‘transport’ use generic pictograms for now, as no dedicated symbol has been defined for universal use.
21
+ - **Start with the simplest name.**
22
+ Only specialise when multiple variants appear (e.g., Ball becomes BallFootball once more types exist).
23
+
24
+ ### Grouping and ordering
25
+
26
+ - **Begin with the main concept, then add the variant** for compound icons.
27
+ For example: DocumentEdit, not EditDocument.
28
+ This improves grouping and sorting in lists.
29
+ - **Do not change natural two-word terms** such as BankCard or IdentityCard.
30
+ - For **variations with added shapes**, add the shape name after the concept: Plus and PlusCircle.
31
+
32
+ ### Specific conventions
33
+
34
+ - **Use ‘backward’ and ‘forward’**, not ‘left’ and ‘right’.
35
+ This supports right-to-left languages.
36
+ ‘Up’ and ‘down’ remain unchanged.
37
+ - **Use ‘with’** when the icon depicts two objects interacting:
38
+ DocumentWithPencil, HandWithPlant, PowerPlugWithSocket.
39
+ - **Do not use ‘…InCircle’** unless the circle represents a second distinct object.
40
+ A decorative or stylistic container is not enough to justify ‘in’.
41
+
5
42
  ## Importing icons from Figma
6
43
 
7
44
  We create and update icons in Figma, then import them into this package for distribution.
8
45
 
9
- **Important**: Only export icons from Figma for use in this package. Do not use these icons directly in an application.
46
+ **Important**: Only export icons from Figma for use in this package.
47
+ Do not use these icons directly in an application.
48
+
49
+ To export all icons from our [Figma Library](https://www.figma.com/community/file/1530535540611888495/amsterdam-design-system-community-edition), use Figma's built-in SVG export feature.
10
50
 
11
- To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124), use Figma's built-in SVG export feature.
12
- Select the frame containing all the icon shapes, press `Enter` to select direct children and then press `Enter` again to select all icon components.
13
- In the right-hand sidebar, click the plus sign next to Export. Choose SVG and export.
14
- Copy these files over to the `icons` folder and run the following command to optimize them:
51
+ 1. Select the frame containing all the icon shapes, press `Enter` to select direct children and then press `Enter` again to select all icon components.
52
+ 2. In the right-hand sidebar, click the plus sign next to Export.
53
+ 3. Choose SVG and export.
54
+ 4. Copy these files over to the `icons` folder and run the following command to optimize them:
15
55
 
16
56
  ```sh
17
57
  npm run optimize-icons
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  # Amsterdam Design System: Assets
4
4
 
5
5
  This package provides all assets from the [Amsterdam Design System](https://designsystem.amsterdam).
6
- Use it to include the correct fonts, icons or logos in your website or application.
6
+ Use it to include the correct fonts, icons or logos in your website.
7
7
 
8
8
  ## Installation
9
9
 
@@ -20,7 +20,7 @@ npm install @amsterdam/design-system-assets
20
20
 
21
21
  ### Application icons
22
22
 
23
- The Design System handbook helps using [a favicon](https://designsystem.amsterdam/?path=/docs/brand-assets-favicon--docs) or [a web manifest and application icons](https://designsystem.amsterdam/?path=/docs/docs-developer-guide-web-app--docs) for home screens of devices in your website or application.
23
+ The Design System handbook helps using [a favicon](https://designsystem.amsterdam/?path=/docs/brand-assets-favicon--docs) or [a web manifest and application icons](https://designsystem.amsterdam/?path=/docs/docs-developer-guide-web-app--docs) for home screens of devices in your websites.
24
24
 
25
25
  ### Font files
26
26
 
@@ -40,7 +40,7 @@ Note that the font is proprietary. Using it requires [a license](https://designs
40
40
 
41
41
  The Design System Handbook offers an [overview of our icon library](https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs).
42
42
 
43
- You can import the SVG files to use icons in your website or application.
43
+ You can import the SVG files to use icons in your websites.
44
44
 
45
45
  In a React project, use the [Icon component](https://designsystem.amsterdam/?path=/docs/components-media-icon--docs) instead.
46
46
  It offers a convenient API for using the icons and streamlines alignment with text.
package/icons/Delete.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 17.5V8.5H11V17.5H9Z"/><path d="M13 8.5V17.5H15V8.5H13Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 6.5V21.5H5V6.5H2.5V4.5H7.625V3.5C7.625 2.94772 8.07272 2.5 8.625 2.5H15.375C15.9273 2.5 16.375 2.94772 16.375 3.5V4.5H21.5V6.5H19ZM7 19.5V6.5H17V19.5H7Z"/></svg>
package/icons/DeleteFill.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.625 3.5C7.625 2.94772 8.07272 2.5 8.625 2.5H15.375C15.9273 2.5 16.375 2.94772 16.375 3.5V4.5H21.5V6.5H19V21.5H5V6.5H2.5V4.5H7.625V3.5ZM8.75 17.75V8.25H10.75V17.75H8.75ZM13.25 8.25V17.75H15.25V8.25H13.25Z"/></svg>
package/icons/Notification.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.9887 3.78654C13.8822 2.78234 13.0325 2 12 2C10.9675 2 10.1178 2.78234 10.0113 3.78654C7.11398 4.64348 5 7.32486 5 10.5V13L3.5 15V18.5H12H20.5V15L19 13V10.5C19 7.32486 16.886 4.64348 13.9887 3.78654ZM18.5 15.6667L17 13.6667V10.5C17 7.73858 14.7614 5.5 12 5.5C9.23858 5.5 7 7.73858 7 10.5V13.6667L5.5 15.6667V16.5H18.5V15.6667ZM11 19.5C11 20.0523 11.4477 20.5 12 20.5C12.5523 20.5 13 20.0523 13 19.5H15C15 21.1569 13.6569 22.5 12 22.5C10.3431 22.5 9 21.1569 9 19.5H11Z"/></svg>
package/icons/NotificationFill.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.9887 3.78654C13.8822 2.78234 13.0325 2 12 2C10.9675 2 10.1178 2.78234 10.0113 3.78654C7.11398 4.64348 5 7.32486 5 10.5V14L3.5 16V18H20.5V16L19 14V10.5C19 7.32486 16.886 4.64348 13.9887 3.78654ZM12 22.5C10.3431 22.5 9 21.1569 9 19.5H15C15 21.1569 13.6569 22.5 12 22.5Z"/></svg>
package/icons/UserAccount.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.9112 8.9819C15.9112 11.181 14.1491 12.9638 11.9754 12.9638C9.80168 12.9638 8.03954 11.181 8.03954 8.9819C8.03954 6.78276 9.80168 5 11.9754 5C14.1491 5 15.9112 6.78276 15.9112 8.9819ZM13.9433 8.9819C13.9433 10.0815 13.0622 10.9729 11.9754 10.9729C10.8885 10.9729 10.0075 10.0815 10.0075 8.9819C10.0075 7.88233 10.8885 6.99095 11.9754 6.99095C13.0622 6.99095 13.9433 7.88233 13.9433 8.9819Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 21C14.0339 21 15.9103 20.3253 17.4175 19.1875L17.2253 17.0415C17.2122 17.0192 17.192 16.9931 17.167 16.97C17.1549 16.9589 17.1445 16.951 17.1366 16.9457H6.8194C6.81695 16.9465 6.81155 16.9487 6.80393 16.9541C6.79886 16.9576 6.79481 16.9612 6.79161 16.9646C6.78399 17.0015 6.77909 17.0276 6.77576 17.0475C6.77282 17.0651 6.77183 17.074 6.77183 17.074L6.58255 19.1875C8.08972 20.3253 9.96607 21 12 21ZM19.172 16.7144L19.2299 17.3609C20.342 15.8635 21 14.0086 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.0086 3.65798 15.8635 4.77014 17.3609L4.81199 16.8936C4.82261 16.7751 4.84466 16.6559 4.86899 16.5395C4.88732 16.4518 4.9101 16.3506 4.9386 16.28C5.23188 15.4899 5.99196 14.9548 6.81499 14.9548H17.185C18.1677 14.9548 19.0261 15.8177 19.172 16.7144Z"/></svg>
package/icons/UserAccountFill.svg ADDED
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.9754 12.9638C14.1491 12.9638 15.9113 11.181 15.9113 8.9819C15.9113 6.78276 14.1491 5 11.9754 5C9.80169 5 8.03955 6.78276 8.03955 8.9819C8.03955 11.181 9.80169 12.9638 11.9754 12.9638Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM19.2299 17.3609L19.172 16.7144C19.0261 15.8177 18.1677 14.9548 17.185 14.9548H6.81499C5.99196 14.9548 5.23188 15.4899 4.9386 16.28C4.9101 16.3506 4.88732 16.4518 4.86899 16.5395C4.84466 16.6559 4.82261 16.7751 4.81199 16.8936L4.77014 17.3609C3.65798 15.8635 3 14.0086 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 14.0086 20.342 15.8635 19.2299 17.3609Z"/></svg>
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.1.0",
2
+ "version": "2.0.0",
3
3
  "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
4
4
  "description": "All assets from the Amsterdam Design System. Use it to include the correct fonts, icons or logos in your website or application.",
5
5
  "homepage": "https://designsystem.amsterdam",
/package/icons/{Linkedin.svg → LinkedIn.svg} RENAMED
File without changes