Icons with inline SVG

Sizing

  1. First icon should be small and dark.
  2. Second icon should be medium and dark.
  3. Third icon should be large and dark.

Colors

  1. First icon should be small and red.
  2. Second icon should be small and blue, just like text around.

Dirtiness

  1. First icon should be large and green.

ViewBox

  1. First icon should be large and green, same as the previous one.

Colorful icons

  1. There should be seven colorful icon rendered without any distortions.
  2. Check the reference icons to see what they should look like.

Monochrome icons

Icon sizing

Icon colors

  1. icon has own color
  2. icon inherits color

Icon with dirty markup

Icon with own viewBox

Colorful icons with IconView component (attributes on <svg>, in .ck-reset_all parent)

Reference icons (raw)