Emotion icon components
120 icons are styled using Emotion. An icon is a visual symbol that indicates the purpose of an interface element. It’s used to represent ideas, content types, and actions. Emotion is a styling library that allows you to write styles in JavaScript. This technique is known as CSS-in-JS. When you write CSS alongside your JavaScript component files, you’re naturally encouraged to scope styling at the component level. Emotion is used to style 14 projects.
120components360storiesLast updated 8 days ago
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa921/thumb/capture-697ba59c.png)
IconButton
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa94f/thumb/capture-d4048f16.png)
IconTextButton
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aaa0b/thumb/capture-a77f2c17.png)
IconStatusBubble
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa93e/thumb/capture-136cd556.png)
ColoredIconButton
![](https://snapshots.chromatic.com/snapshots/6195b518b76f57003aa69b4c-669ab6fe466cbbafdd1aa96a/thumb/capture-ae759327.png)
ColoredIconTextButton
![](https://snapshots.chromatic.com/snapshots/629e648426469d004a80276e-629e64bc4b5e65004a07361b/w_680/capture.png)
NotificationBadge