diff --git a/.changeset/spotty-lemons-admire.md b/.changeset/spotty-lemons-admire.md new file mode 100644 index 000000000..0c74e80cb --- /dev/null +++ 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 index d809c91f6..c914fa6cb 100644 --- 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. | Scaling the 16px icon larger causes the stroke to become too thick. Scaling the 24px icon smaller causes the stroke to become too thin.