Use Product Category Icons as pictograms that communicate in a glance, offer interactivity, or simplify complex ideas related to specific Appfire product categories.

Use on websites, in product UI, and with merchandise.

Import

import {ProductCategoryIcon} from '@fuegokit/react'

Usage

<ProductCategoryIcon icon={`adminToolsColor`} size={`lg`} />

<ProductCategoryIcon icon={`adminToolsColor`} size={`lg`} />

Product categories

"Outlined" and "full color" versions of each are available.

Icon	Type	Product Category
`workflowAutomationOutline`	string	Workflow & Automation
`publishingOutline`	string	Publishing
`portfolioManagementOutline`	string	Portfolio Management
`itsmOutline`	string	ITSM
`documentManagementOutline`	string	Document Management
`developerToolsOutline`	string	Developer Tools
`biReportingOutline`	string	BI & Reporting
`agileOutline`	string	Agile
`adminToolsOutline`	string	Admin Tools
`workflowAutomationColor`	string	Workflow & Automation
`publishingColor`	string	Publishing
`portfolioManagementColor`	string	Portfolio Management
`itsmColor`	string	ITSM
`documentManagementColor`	string	Document Management
`developerToolsColor`	string	Developer Tools
`biReportingColor`	string	BI & Reporting
`agileColor`	string	Agile
`adminToolsColor`	string	Admin Tools

Both "outline" and "full color" variants of each product category are available via the icon prop:

<Box
  sx={{
    p: 2,
    borderRadius: 3,
    backgroundColor: 'background.neutral.bold.default',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: 'fit-content'
  }}
>
  <ProductCategoryIcon icon="developerToolsOutline" size={`sm`} sx={{color: 'icon.inverse'}} />
</Box>

<Box
  sx={{
    p: 2,
    borderRadius: 3,
    backgroundColor: 'background.neutral.bold.default',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: 'fit-content'
  }}
>
  <ProductCategoryIcon icon="developerToolsOutline" size={`sm`} sx={{color: 'icon.inverse'}} />
</Box>

Sizing

Product Category Icons can be used in a range of sizes.

"Outline" variants may be as small as 16px, and the maximum size may vary based on application.

"Full color" variants should never be smaller than 128px.

Use Product Category Icons at their original sizes or scale at accepted increments.

<Box
  sx={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: '1px solid',
    borderColor: 'border.default',
    height: '300px'
  }}
>
  <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '32px'}}>
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`xs`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`sm`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`md`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`lg`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`xl`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`xxl`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`jumbo`} />
  </Box>
</Box>

<Box
  sx={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: '1px solid',
    borderColor: 'border.default',
    height: '300px'
  }}
>
  <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '32px'}}>
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`xs`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`sm`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`md`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`lg`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`xl`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`xxl`} />
    <ProductCategoryIcon icon="workflowAutomationOutline" size={`jumbo`} />
  </Box>
</Box>

Product Category Icon

Import

Usage

Product categories

Sizing

Resources list