How do I create a custom icon in Salesforce?

How do I create a custom icon in Salesforce?

You assign custom icons using the Change Icon link when you create the action or tab….The icon should:

  1. Be less than 10k in size.
  2. Be 120 x 120 pixels.
  3. Be a PNG with a transparent background.
  4. Have a resolution of 72 dpi.
  5. Not include a color background.
  6. Not include outer shadows on the inner icon graphic.

How do I upload an icon to Salesforce?

Salesforce Classic:

  1. Click the “+” icon on the Navigation bar.
  2. Click “Documents”
  3. Click the “New” button.
  4. Fill up the Document Name.
  5. Tick the checkbox for “Externally Available Image”
  6. Select the folder you want it to be saved.
  7. Upload the logo by clicking on “Choose File”
  8. Find the file on your Computer and click “Open”

What do you need to tag an icon in Lightning?

1) iconName: As the name suggest it is the name of the icon which is the only required attribute for this tag. It is written in the format category:icon. There are mainly five categories of icons in lightning design system.

What do lightning icons do in Salesforce Lightning?

A lightning-icon is a visual element that provides context and enhances usability. Icons can be used inside the body of another component or on their own. You can specify an icon from the Lightning Design System using the icon-name attribute. Here is an example. Alternatively, you can provide a custom icon using the src attribute.

How to change color of lightning icon in CSS?

For example, change the color to a shade of green by inserting fill=#648079 in the element. Alternatively, use CSS custom properties to change the fill color on your imported icon. See the non-utility icon example in the Customize Component Styling section.

How to add red fill to lightning icon?

This example uses the error variant to add a red fill to the error utility icon. To apply additional styling, use the SLDS utility classes with the class attribute. For example, you can set class=”slds-m-vertical_large” or other margin classes to add spacing around the icon.