Icon

Icons are symbols, also known as glyphs, used to depict an idea, object, or action. The Cosmos design system contains hundreds of icons out of the box, as well as support for registering custom icons.

For more information on how to use the features and props for this component, check out the developer documentation.

Icons by default are restricted to a height and width dimension of 18px. If you require larger or smaller icons, you must provide targetted styling against svg tags from a wrapping styled component.

Common icons

0 Icons

    Outlined icons

    0 Icons

      Solid icons

      0 Icons

        Mixed icons

        0 Icons

          Data visualization icons

          0 Icons

            Logos

            0 Icons

              If your application requires custom icons, you can register them easily by using the registerIcon function. This function can register multiple custom icons at once. Each parameter should be an object representing an individual icon. The object must include properties for name, viewBox, and Component, which is the actual svg code.

              NameTypeDefaultDescription
              name*stringThe name indicating the Cosmos Icon. Reference the catalog above for the available names.
              classNamestringAdditional CSS classes.
              refRef<SVGSVGElement>Ref for the wrapping element.