frontend-plugin-api: document that icons should be 24x24

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

docs/frontend-system/architecture/15-plugins.md

@@ -52,7 +52,7 @@ export default createFrontendPlugin({
 
 ### `icon` option
 
-The display icon of the plugin, used in page headers and navigation. The type is `IconElement` (`JSX.Element | null`) from `@backstage/frontend-plugin-api`.
+The display icon of the plugin, used in page headers and navigation. The type is `IconElement` (`JSX.Element | null`) from `@backstage/frontend-plugin-api`. Icons should be exactly 24x24 pixels in size.
 
 ```tsx
 export default createFrontendPlugin({

docs/frontend-system/building-plugins/04-built-in-data-refs.md

@@ -48,7 +48,7 @@ The `title` data reference can be used for defining the extension input/output o
 | :---------: | :-----------: |
 | `core.icon` | `IconElement` |
 
-The `icon` data reference can be used for defining the extension input/output of icon elements. The type is `IconElement` (`JSX.Element | null`) from `@backstage/frontend-plugin-api`.
+The `icon` data reference can be used for defining the extension input/output of icon elements. The type is `IconElement` (`JSX.Element | null`) from `@backstage/frontend-plugin-api`. Icons should be exactly 24x24 pixels in size.
 
 ### `routePath`
 

packages/frontend-plugin-api/src/icons/types.ts

@@ -40,6 +40,10 @@ export type IconComponent = ComponentType<{
 /**
  * The type used for icon elements throughout Backstage.
  *
+ * @remarks
+ *
+ * Icons should be exactly 24x24 pixels in size.
+ *
  * @public
  */
 export type IconElement = JSX.Element | null;

packages/frontend-plugin-api/src/wiring/coreExtensionData.ts

@@ -22,6 +22,7 @@ import { createExtensionDataRef } from './createExtensionDataRef';
 /** @public */
 export const coreExtensionData = {
   title: createExtensionDataRef<string>().with({ id: 'core.title' }),
+  /** An icon element for the extension. Should be exactly 24x24 pixels. */
   icon: createExtensionDataRef<IconElement>().with({ id: 'core.icon' }),
   reactElement: createExtensionDataRef<JSX.Element>().with({
     id: 'core.reactElement',