Skip to main content

Icons - Basic Component

This component allows you to add an icon in your web application wherever you want.

DrapCode provides you a bunch of high quality SVG icons. Each icon can be customised by resizing its width and height. You can also style it using the Style Manager.

DrapCode Builder Icon List

Adding an Icon​

To add an icon, go to the “Basic” category under the Components panel and drag and drop the "Icons" component in the canvas. As you drop the component in the canvas, a repository containing the icons will automatically open. Click on the icon you want to add and click the Add Icon button.

DrapCode Builder Adding Icon

Styling the Icons​

You have to open “Settings” to style, edit and format the dimensions of the icon. The Style Manager does not work for the icon.

So, click the settings icon (i.e. ), positioned above the icon box. It contains different setting options shown in the image below to change the standard configuration and customise the added icon:

DrapCode Builder Styling Icon

Let’s closely look at each option:

  1. Width: Allows you to adjust the width of the icon.

  2. Height: Allows you to adjust the height of the icon.

  3. Fill: Allows you to add colour inside an icon. You can fill any colour of your choice from the colour pallete.

  4. Stroke: Allows you to add the outline of an icon with any colour of your choice.

  5. Stroke Width: Allows you to adjust the width of the added outline of an icon.

  6. Stroke Linecap: Allows you to choose the shape of an icon at the end of open subpaths. You can choose from following values:

    • Butt: Makes the outline or stroke of an icon to not extend beyond its end points.
    • Round: Makes the outline or stroke of an icon to extend half a circle with its diameter equal to the stroke width.
    • Square: Makes the outline or stroke of the icon to extend by a rectangle with a height equal to the stroke width and a width half the stroke width.

  7. Stroke Linejoin: Allows you to soften or sharpen the corners or joints of an icon's stroke, where two joints of a stroke meet.

    • Crop: Gives the corners of a stroke where two joints meet, a convex shape.
    • Miter: Makes the corners of a stroke sharp.
    • Arcs: Gives the corners of a stroke arc shape.
    • Bevel: Crops the connecting point or the corners of a stroke perpendicularly to the joint.
    • Round: Makes the corners of a stroke round.
    • Fallback: Specifies the cropped bevel value.

"Crop" is a default value of Stroke Linejoin.

  1. Icon It shows the repository of different types of icons. Scroll the list of icons and select any one of your choice.

Additional Tools​

The Icons component also comes with a set of additional tools, positioned in the right side of the component. Know more.