React Magma primarily uses the beautiful icons from Material Design. Specifically we use the rounded variant. We also have a group of custom icons when Material doesn't have what we need, but we take great care to design those icons with the same principles that Google does.
We do our best to keep up with any updates that happen to Material Design's icons, and that includes updating the Sketch icon library you can download. If you are a designer at Cengage, and you are a current Abstract user, then you'll find the Sketch libraries there instead.
When choosing a size for your icon, you should choose a size that is evenly divisible by 8 in order for it to harmonize with the spacing system. If you are pairing the icon with a line of text, try to choose a size that matches the line-height of that text.
The first example below shows a sample of acceptable icon sizes: 16px, 20px, 24px, 32px, 48px, 64px, 80px. The one exception to the sizing rule is the 20px icon. It is divisible by the smaller sub-unit of 4px, and is primarily for pairing with 14px text with a line-height of 20px.
This example illustrates how 12px, 14px, 16px, and 20px text strings are paired with icons sized to match their line-heights.
Our icons are simple monochromatic symbols, and any color from the color palette may be applied to one. But responsible use of color is important.
The color of an icon needs to hit a minimum color contrast ratio of 3:1 with the background it appears on. The color of the icon can help reflect the importance or nature of the action the icon is representing, but shouldn't rely on color alone. Text labels or tooltips are still important elements that can help make the action clearer to users.
When positioning an icon next to text you should always center-align them.