Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 15:37:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: keep guideline images in sync

Browse Source
This commit is contained in:
Jakob Guddas
2024-12-01 13:13:53 +01:00
parent 212b488dae
commit 974088a41c
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/guide/design/icon-design-guide.md
View File

@@ -2,13 +2,17 @@
title: Icon Design Guide
---
<script setup>
import example from '../../images/24px-24px.svg?raw'
</script>
## Icon Design Principles
Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
### 1. Icons must be designed on a **24 by 24 pixels** canvas.
![24px-24px](../../images/24px-24px.svg?raw=true "24px-24px")
<i v-html="example" />
### 2. Icons must have at least **1 pixel padding** within the canvas.

4
docs/images/24px-24px.svg
View File

@@ -49,9 +49,7 @@
<path d="M120 350h240" stroke="#D8D8D9" stroke-width=".5"/>
<path d="M350 120v240" stroke="#D8D8D9" stroke-width=".5"/>
</g>
<path d="m240 140-100 50 100 50 100-50-100-50Z" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m140 290 100 50 100-50" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="m140 240 100 50 100-50" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<image xlink:href="https://lucide.dev/api/icons/layers?color=3C3C43" src="https://lucide.dev/api/icons/layers?color=3C3C43" width="240" height="240" x="120" y="120"/>
<g opacity=".5" stroke="#fff" stroke-width="3">
<path d="M120 92v16"/>
<path d="M360 92v16"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB