Add arrow-*-circle icons (including escape key) (#1013 )

* Add `arrow-up-left-from-circle` (<kbd>esc</kbd>ape key) icon * Add `arrow-up-right-from-circle` icon * Add `arrow-down-left-from-circle` icon * Add `arrow-down-right-from-circle` icon
Add note on use of <use> (#1050 )
2025-12-16 23:07:43 +01:00 · 2023-04-14 22:39:23 +02:00 · 2023-04-12 21:14:34 +02:00 · 2023-04-12 18:55:01 +00:00
18 changed files with 112 additions and 9 deletions
--- a/docs/icon-design-guide.md
+++ b/docs/icon-design-guide.md
@@ -55,6 +55,8 @@ Here are rules that should be followed to keep quality and consistency when maki

 Before an icon is added to the library, we like to have readable and optimized svg code.

+Never use [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.
+
 ### Global Attributes

 For each icon these attributes are applied, corresponding to the above rules.
--- a/icons/arrow-down-left-from-circle.json
+++ b/icons/arrow-down-left-from-circle.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "direction"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}
--- a/icons/arrow-down-left-from-circle.svg
+++ b/icons/arrow-down-left-from-circle.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="8,22 2,22 2,16 " />
+  <line x1="2" y1="22" x2="12" y2="12" />
+  <path d="M2,12C2,6.5,6.5,2,12,2s10,4.5,10,10s-4.5,10-10,10" />
+</svg>
--- a/icons/arrow-down-right-from-circle.json
+++ b/icons/arrow-down-right-from-circle.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "direction"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}
--- a/icons/arrow-down-right-from-circle.svg
+++ b/icons/arrow-down-right-from-circle.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="22,16 22,22 16,22 " />
+  <line x1="22" y1="22" x2="12" y2="12" />
+  <path d="M12,22C6.5,22,2,17.5,2,12S6.5,2,12,2s10,4.5,10,10" />
+</svg>
--- a/icons/arrow-up-left-from-circle.json
+++ b/icons/arrow-up-left-from-circle.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "direction",
+    "keyboard",
+    "key",
+    "escape",
+    "button"
+  ],
+  "categories": [
+    "arrows",
+    "coding"
+  ]
+}
--- a/icons/arrow-up-left-from-circle.svg
+++ b/icons/arrow-up-left-from-circle.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12,2c5.5,0,10,4.5,10,10s-4.5,10-10,10S2,17.5,2,12" />
+  <polyline points="2,8 2,2 8,2 " />
+  <line x1="2" y1="2" x2="12" y2="12" />
+</svg>
--- a/icons/arrow-up-right-from-circle.json
+++ b/icons/arrow-up-right-from-circle.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "direction"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}
--- a/icons/arrow-up-right-from-circle.svg
+++ b/icons/arrow-up-right-from-circle.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="16,2 22,2 22,8 " />
+  <line x1="22" y1="2" x2="12" y2="12" />
+  <path d="M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2" />
+</svg>
--- a/packages/lucide-angular/package.json
+++ b/packages/lucide-angular/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-angular",
  "description": "A Lucide icon library package for Angular applications",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "author": "SMAH1",
  "license": "ISC",
  "homepage": "https://lucide.dev",
--- a/packages/lucide-flutter/pubspec.yaml
+++ b/packages/lucide-flutter/pubspec.yaml
@@ -1,6 +1,6 @@
 name: lucide_icons
 description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
-version: 0.143.0
+version: 0.144.0
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide

--- a/packages/lucide-preact/package.json
+++ b/packages/lucide-preact/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-preact",
  "description": "A Lucide icon library package for Preact applications",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/packages/lucide-react-native/package.json
+++ b/packages/lucide-react-native/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-react-native",
  "description": "A Lucide icon library package for React Native applications",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-react",
  "description": "A Lucide icon library package for React applications",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/packages/lucide-svelte/package.json
+++ b/packages/lucide-svelte/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide-svelte",
  "description": "A Lucide icon library package for Svelte applications",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",
--- a/packages/lucide-vue-next/package.json
+++ b/packages/lucide-vue-next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lucide-vue-next",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "author": "Eric Fennis",
  "description": "A Lucide icon library package for Vue 3 applications",
  "license": "ISC",
--- a/packages/lucide-vue/package.json
+++ b/packages/lucide-vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lucide-vue",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "author": "Eric Fennis",
  "description": "A Lucide icon library package for Vue 2 applications",
  "license": "ISC",
--- a/packages/lucide/package.json
+++ b/packages/lucide/package.json
@@ -1,7 +1,7 @@
 {
  "name": "lucide",
  "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.143.0",
+  "version": "0.144.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
  "bugs": "https://github.com/lucide-icons/lucide/issues",