Appfire's logo
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue. Use a Logo component wherever you need to easily add Appfire branding.
Three variants are available: solid, gradient, and animated.
<Box sx={{bg: '#000000', p: 8, display: 'flex', gap: '48px'}}>
<Logo size={24} variant="solid" color="#FFFFFF" />
<Logo size={24} stopColor1="#1FDA96" stopColor2="#3FB3F2" variant="gradient" />
<Logo size={24} variant="animated" />
</Box>
Using gradients
When using gradient variant Logo components, use the gradient combinations provided by the Appfire creative team:
Orange-yellow gradient values:
<Logo size={72} stopColor1="#F96C2C" stopColor2="#F9D95D" variant="gradient" />
Green-blue gradient values:
<Logo size={72} stopColor1="#1FDA96" stopColor2="#3FB3F2" variant="gradient" />
Pink-orange gradient values:
<Logo size={72} stopColor1="#E54074" stopColor2="#F96C2C" variant="gradient" />
Do
Do
Use Appfire's default and approved gradient svg stops
Don't
Don't
Don't invent your own gradient combinations.