Add 12px usage guidelines (#684)

* Add 12px usage guidelines * Create spotty-lemons-admire.md Co-authored-by: Jon Rohan <[email protected]>
primer · Oct 25, 2021 · 9ed6154 · 9ed6154
1 parent 777f229
commit 9ed6154
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/spotty-lemons-admire.md b/.changeset/spotty-lemons-admire.md
@@ -0,0 +1,5 @@
+---
+"@primer/octicons": patch
+---
+
+Add 12px usage guidelines
diff --git a/docs/content/guidelines/usage.mdx b/docs/content/guidelines/usage.mdx
@@ -30,7 +30,16 @@ Example | Color variable | Usage
 
 ## Sizing
 
-Octicons are available in two sizes: 16px and 24px. They should only be used at their dedicated sizes to maintain consistency in stroke width and legibility.
+Octicons are primarily available in two sizes: 16px and 24px. They should only be used at their dedicated sizes to maintain consistency in stroke width and legibility.
+
+A limited set of 12px icons are available for specific usage within condensed UI and are listed below.
+
+| Icon | Name | Usage
+| :--: | :--: | :--: |
+| ![12px alert fill icon](https://user-images.githubusercontent.com/10384315/138614527-c7d8aedb-e608-4768-9443-687fc1d5ed23.png) | [`alert-fill`](https://primer.style/octicons/alert-fill-12) | For cautionary messaging or to inform the user that an action requires attention |
+| ![12px check circle icon](https://user-images.githubusercontent.com/10384315/138614538-b4f5c1d0-6705-4a08-bc8c-2ce553acb4d6.png) | [`check-circle-fill`](https://primer.style/octicons/check-circle-fill-12) | For positive messaging to inform the user that an action is successful, complete, or that they may continue through a workflow |
+| ![12px no entry icon](https://user-images.githubusercontent.com/10384315/138614561-7ddc158b-932c-4f2f-854e-abba316676d9.png) | [`no-entry-fill`](https://primer.style/octicons/no-entry-fill-12) | Indicate an ending or that the user is blocked and cannot continue |
+| ![12px x circle icon](https://user-images.githubusercontent.com/10384315/138614582-72db2bad-ca03-4741-aaf9-c30095a831e7.png) | [`x-circle-fill`](https://primer.style/octicons/x-circle-fill-12) | For negative messaging to inform the user that an error has occurred as a result of an action or an action is unavailable. |
 
 <Dont>
 <img width="960" alt="Scaling the 16px icon larger causes the stroke to become too thick. Scaling the 24px icon smaller causes the stroke to become too thin." src="https://user-images.githubusercontent.com/10384315/103834253-c1d02880-5037-11eb-8106-db3acd64cfc3.png" />