Styling

To customize the look & feel, you can utilize the "Elements" section in your browser's developer tools panel. It's straightforward to locate any uploader inner components and their contents because they are distinguished by custom tag names. Unlike libraries such as React, there's no need for any specific tools. These tag names can be conveniently used as CSS selectors.

For additional isolation and enhanced styling security, we employ the Shadow DOM.

Activate the default styles by using the css-src attribute:

<lr-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
></lr-config>

<lr-file-uploader-regular
  ctx-name="my-uploader"
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-file-uploader-regular.min.css">
</lr-file-uploader-regular>

Then, you can override the default styles with your own CSS rules. There are three major levels of possible styling customizations:

  1. Light and dark theme flag: --darkmode:1; (enabled) or --darkmode:0; (disabled).
  2. The set of basic CSS variables used for the other styling calculations.
  3. Custom CSS rules for each element.

Basic theme

There are 4 levels of abstraction:

  • Base values
  • Derivative values
  • Common styles
  • Component styles

HSL color space

We use HSL color space because it allows us to easily calculate derivative colors. That's what prefixes --h-, --s-, and --l- are stand for.

Quick styling

In most cases switching the dark mode on or off and changing the accent color is enough to make File Uploader match your design.

--darkmode: 1;
--h-accent: 211;
--s-accent: 100%;
--l-accent: calc(50% - 5% * var(--darkmode));

Base values

  • --darkmode — 1: dark mode is enabled, 0: disabled.
  • --*-foreground — text color, borders, and shaders. It should be in contrast to the background.
  • --*-background — background color and its variations.
  • --*-accent — color of the buttons, links, and text input borders (hover and focus). It should be in contrast to the background.
  • --*-confirm — the color of confirmation notifications and badges.
  • --*-error — the color of error notifications and badges.
  • --opacity-* — opacity of different states of small icon buttons.
  • --ui-size — minimum size of a clickable element. Also used to calculate the size of the elements, which should be proportional to it.
  • --gap-* — paddings and margins.
  • --gap-table — the gap between elements in lists (for example, in upload-list).
  • --borders — 1: borders enabled, 0: disabled. Can be fractional, for example, 0.5 will make borders half as opaque.
  • --border-radius-element — border radius of buttons and inputs.
  • --border-radius-frame — border radius of modal windows and drop area.
  • --border-radius-thumb — border radius of thumbnails.
  • --transition-duration — duration of all animated transitions.
  • --shadows — 1: shadows enabled, 0: disabled. Can be fractional, for example 0.5, will make shadows half as opaque.
  • --*-shadow — the color of box shadows.
  • --modal-max-w, --modal-max-h — the maximum size of the modal window.

Derivative values are calculated from the base values.

  • --darkmode-minus — used for dark mode color calculations. Gives -1 when dark mode is enabled, 1 when disabled.
  • --clr-background* — lightness variations of the background color.
  • --clr-accent* — opacity variations of the accent color.
  • --clr-confirm — confirmation notifications color.
  • --clr-error — opacity and lightness variations of the error notifications color.
  • --clr-txt* — lightness variations of the text color;
  • --clr-shade-lv* — shading colors (foreground color with low opacity variations).
  • --border-* — border variations.
  • --clr-curtain — color of the background behind the modal window.
  • --clr-btn-bgr-primary*, --clr-btn-txt-primary, --shadow-btn-primary — primary action button values.
  • --clr-btn-bgr-secondary*, --clr-btn-txt-secondary, --shadow-btn-secondary — secondary action button values.
  • --clr-btn-bgr-disabled, --clr-btn-txt-disabled, --shadow-btn-disabled — disabled button values. -->

Icons

All icons are provided via the set of SVG path descriptions inside CSS:

.lr-wgt-icons,
.lr-wgt-common,
:host {
  --icon-default: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z';
  --icon-file: 'm13.3333 5.57143 4 3.85714h-4zm-6.66663-2.57143c-1.47266 0-2.66667 1.15121-2.66667 2.57143v12.85717c0 1.4202 1.19401 2.5714 2.66667 2.5714h10.66663c1.4727 0 2.6667-1.1512 2.6667-2.5714v-9.00003l-6.6667-6.42857z';
  --icon-close: 'M17.6569 7.75734c.3905-.39053.3905-1.02369 0-1.41421-.3906-.39053-1.0237-.39053-1.4143 0L12 10.5858 7.75736 6.34313c-.39053-.39053-1.02369-.39053-1.41421 0-.39053.39052-.39053 1.02368 0 1.41421L10.5858 12l-4.24266 4.2426c-.39052.3905-.39052 1.0237 0 1.4142.39053.3906 1.02369.3906 1.41422 0L12 13.4142l4.2426 4.2426c.3906.3906 1.0237.3906 1.4143 0 .3905-.3905.3905-1.0237 0-1.4142L13.4142 12l4.2427-4.24266Z';
  --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z';
  --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z';
  --icon-upload: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z';
  --icon-local: 'M2 10.0928C2 7.7191 2 6.53224 2.55634 5.66549C2.84743 5.21197 3.23952 4.8286 3.70334 4.54398C4.58979 4 5.80363 4 8.23131 4C9.21033 4 9.69984 4 10.1402 4.15191C10.374 4.23254 10.5954 4.34395 10.7983 4.48306C11.1807 4.74515 11.4652 5.13463 12.0343 5.91358L12.9091 7.11111H15.4091C18.1796 7.11111 19.5649 7.11111 20.5298 7.81082C20.8171 8.01913 21.0713 8.26774 21.2844 8.54862C22 9.49207 22 10.8466 22 13.5556C22 16.2645 22 17.619 21.2844 18.5625C21.0713 18.8434 20.8171 19.092 20.5298 19.3003C19.5649 20 18.1797 20 15.4091 20H9.27273C5.84433 20 4.13013 20 3.06507 18.9586C2 17.9172 2 16.2411 2 12.8889V10.0928Z';
  --icon-url: 'm15.069028 1.7437159c-1.839249 0-3.678387.7023305-5.0816705 2.105638l-1.0683184 1.0683191c-.5721674.572155-.5721674 1.5000856 0 2.0722529.5721673.5721673 1.4977379.5721673 2.0698679 0l1.070704-1.0683191c1.662305-1.6622801 4.356529-1.6622801 6.018834 0 1.662304 1.6622801 1.662304 4.3566512 0 6.0188332l-1.068319 1.070704c-.572131.572131-.572131 1.497737 0 2.069869.572131.57213 1.500121.57213 2.072253 0l1.068318-1.06832c2.806688-2.806565 2.806688-7.3567246 0-10.1633391-1.403282-1.4033075-3.24242-2.105638-5.081669-2.105638zm-.138309 5.8614473c-.37495 0-.751254.1431516-1.037319.4292353l-5.8590627 5.8590625c-.5721673.572253-.5721673 1.500123 0 2.072253.5721673.572131 1.5001344.572131 2.0722527 0l5.859063-5.859062c.572252-.5721679.572252-1.5000862 0-2.0722535-.286066-.2860837-.659984-.4292353-1.034934-.4292353zm-8.9757886.8847018c-.3749556 0-.7512351.1431516-1.0373187.4292353l-1.0683191 1.0683185c-2.8066147 2.8066882-2.8066148 7.3567742 0 10.1633392 2.8066147 2.806689 7.3567734 2.806689 10.1633404 0l1.068319-1.068319c.572251-.57213.572253-1.500121 0-2.072251-.572132-.572254-1.497739-.572254-2.069869 0l-1.070704 1.068318c-1.662305 1.662183-4.3565534 1.662183-6.0188335 0-1.6622801-1.662304-1.6622801-4.356529 0-6.018833l1.0683191-1.070704c.5721673-.572131.5721673-1.4977014 0-2.0698687-.2860836-.2860837-.6599786-.4292353-1.0349342-.4292353z';
  --icon-camera: 'm11 3c-.9428 0-1.4141313.0000788-1.7070312.2929688-.2714001.2714099-.2915088.6968024-.2929688 1.5078124-3.45256.0000701-5.18871.0076507-6.34375.9941407-.16547.14133-.3196175.2954675-.4609375.4609375-.99524 1.16527-.9960937 2.9216069-.9960937 6.4355466 0 3.5139.0008537 5.2722.9960937 6.4375.14132.1654.2954675.319538.4609375.460938 1.16527.9952 2.9216169.99414 6.4355469.99414h5.8164061c3.5139 0 5.270247.00106 6.435547-.99414.1654-.1414.319637-.295538.460938-.460938.9952-1.1653.996093-2.9236.996093-6.4375 0-3.5139397-.000893-5.2702766-.996093-6.4355466-.1413-.16547-.295538-.3196075-.460938-.4609375-1.1551-.98649-2.89125-.9940706-6.34375-.9941407-.0015-.8110099-.021569-1.2364025-.292969-1.5078124-.2929-.29289-.764231-.2929688-1.707031-.2929688zm1 5.1230469c2.5235 0 4.568359 2.0448591 4.568359 4.5683591s-2.044859 4.570313-4.568359 4.570313-4.5683594-2.046813-4.5683594-4.570313 2.0448594-4.5683591 4.5683594-4.5683591zm6.646484 0c.4588 0 .830078.3712581.830078.8300781 0 .45883-.371278.8320312-.830078.8320312-.4589 0-.832031-.3732012-.832031-.8320312 0-.45882.373131-.8300781.832031-.8300781z';
  --icon-dots: 'M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z';
  --icon-back: 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z';
  --icon-remove: 'm6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z';
  --icon-edit: 'M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z';
  --icon-detail: 'M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z';
  --icon-check: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z';
  --icon-edit-file: 'M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z';
  --icon-remove-file: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm3.7071-13.70711c.3905.39053.3905 1.02369 0 1.41422l-2.2929 2.29289 2.2929 2.2929c.3905.3905.3905 1.0237 0 1.4142s-1.0237.3905-1.4142 0l-2.2929-2.2929-2.29289 2.2929c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l2.29291-2.2929-2.2929-2.29289c-.39053-.39053-.39053-1.02369 0-1.41422.39052-.39052 1.02369-.39052 1.41421 0l2.29289 2.29291 2.2929-2.29291c.3905-.39052 1.0237-.39052 1.4142 0z';
  --icon-trash-file: var(--icon-remove);
  --icon-upload-error: var(--icon-error);
  --icon-fullscreen: 'M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z';
  --icon-fullscreen-exit: 'M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z';
  --icon-badge-success: 'M10.5 18.2044L18.0992 10.0207C18.6629 9.41362 18.6277 8.46452 18.0207 7.90082C17.4136 7.33711 16.4645 7.37226 15.9008 7.97933L10.5 13.7956L8.0992 11.2101C7.53549 10.603 6.5864 10.5679 5.97933 11.1316C5.37226 11.6953 5.33711 12.6444 5.90082 13.2515L10.5 18.2044Z';
  --icon-badge-error: 'm13.6 18.4c0 .8837-.7164 1.6-1.6 1.6-.8837 0-1.6-.7163-1.6-1.6s.7163-1.6 1.6-1.6c.8836 0 1.6.7163 1.6 1.6zm-1.6-13.9c.8284 0 1.5.67157 1.5 1.5v7c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5v-7c0-.82843.6716-1.5 1.5-1.5z';

  --icon-edit-rotate: 'M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z';
  --icon-edit-flip-v: 'M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z';
  --icon-edit-flip-h: 'M15 21H17V19H15M19 9H21V7H19M3 5V19C3 20.1 3.9 21 5 21H9V19H5V5H9V3H5C3.9 3 3 3.9 3 5M19 3V5H21C21 3.9 20.1 3 19 3M11 23H13V1H11M19 17H21V15H19M15 5H17V3H15M19 13H21V11H19M19 21C20.1 21 21 20.1 21 19H19Z';
  --icon-edit-brightness: 'M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z';
  --icon-edit-contrast: 'M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z';
  --icon-edit-saturation: 'M3,13A9,9 0 0,0 12,22C12,17 7.97,13 3,13M12,5.5A2.5,2.5 0 0,1 14.5,8A2.5,2.5 0 0,1 12,10.5A2.5,2.5 0 0,1 9.5,8A2.5,2.5 0 0,1 12,5.5M5.6,10.25A2.5,2.5 0 0,0 8.1,12.75C8.63,12.75 9.12,12.58 9.5,12.31C9.5,12.37 9.5,12.43 9.5,12.5A2.5,2.5 0 0,0 12,15A2.5,2.5 0 0,0 14.5,12.5C14.5,12.43 14.5,12.37 14.5,12.31C14.88,12.58 15.37,12.75 15.9,12.75C17.28,12.75 18.4,11.63 18.4,10.25C18.4,9.25 17.81,8.4 16.97,8C17.81,7.6 18.4,6.74 18.4,5.75C18.4,4.37 17.28,3.25 15.9,3.25C15.37,3.25 14.88,3.41 14.5,3.69C14.5,3.63 14.5,3.56 14.5,3.5A2.5,2.5 0 0,0 12,1A2.5,2.5 0 0,0 9.5,3.5C9.5,3.56 9.5,3.63 9.5,3.69C9.12,3.41 8.63,3.25 8.1,3.25A2.5,2.5 0 0,0 5.6,5.75C5.6,6.74 6.19,7.6 7.03,8C6.19,8.4 5.6,9.25 5.6,10.25M12,22A9,9 0 0,0 21,13C16,13 12,17 12,22Z';
  --icon-edit-crop: 'M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z';
  --icon-edit-text: 'M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z';
  --icon-edit-draw: 'm21.879394 2.1631238c-1.568367-1.62768627-4.136546-1.53831744-5.596267.1947479l-8.5642801 10.1674753c-1.4906533-.224626-3.061232.258204-4.2082427 1.448604-1.0665468 1.106968-1.0997707 2.464806-1.1203996 3.308068-.00142.05753-.00277.113001-.00439.16549-.02754.894146-.08585 1.463274-.5821351 2.069648l-.80575206.98457.88010766.913285c1.0539516 1.093903 2.6691689 1.587048 4.1744915 1.587048 1.5279113 0 3.2235468-.50598 4.4466094-1.775229 1.147079-1.190514 1.612375-2.820653 1.395772-4.367818l9.796763-8.8879697c1.669907-1.5149954 1.75609-4.1802333.187723-5.8079195zm-16.4593821 13.7924592c.8752943-.908358 2.2944227-.908358 3.1697054 0 .8752942.908358.8752942 2.381259 0 3.289617-.5909138.61325-1.5255389.954428-2.53719.954428-.5223687 0-.9935663-.09031-1.3832112-.232762.3631253-.915463.3952949-1.77626.4154309-2.429737.032192-1.045425.072224-1.308557.3352649-1.581546z';
  --icon-edit-guides: 'M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z';
  --icon-edit-color: 'M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z';
  --icon-edit-resize: 'M10.59,12L14.59,8H11V6H18V13H16V9.41L12,13.41V16H20V4H8V12H10.59M22,2V18H12V22H2V12H6V2H22M10,14H4V20H10V14Z';

  --icon-external-source-placeholder: 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
  --icon-facebook: 'M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z';
  --icon-dropbox: 'm6.0344426 1.9570014-5.96360421 3.7989306 5.96360421 3.7989309 5.9636044-3.7989309zm5.9636044 3.7989306 5.963604 3.7989309 5.963605-3.7989309-5.963605-3.7989306zm5.963604 3.7989309-5.963604 3.7989311 5.963604 3.798929 5.963605-3.798929zm-5.963604 3.7989311-5.9636044-3.7989311-5.96360421 3.7989311 5.96360421 3.798929zm.0024 1.204188-5.9636041 3.80132 5.9636041 3.798931 5.963604-3.798931z';
  --icon-gdrive: 'M7.71,3.5L1.15,15L4.58,21L11.13,9.5M9.73,15L6.3,21H19.42L22.85,15M22.28,14L15.42,2H8.58L8.57,2L15.43,14H22.28Z';
  --icon-gphotos: 'M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z';
  --icon-instagram: 'm 16.6963,8.35462 c 0.5834,0 1.0564,-0.47293 1.0564,-1.05632 0,-0.58339 -0.473,-1.05632 -1.0564,-1.05632 -0.5833,0 -1.0563,0.47293 -1.0563,1.05632 0,0.58339 0.473,1.05632 1.0563,1.05632 z m -4.699,-0.87741 c -0.8941,0 -1.7681,0.26513 -2.51154,0.76187 -0.74341,0.49674 -1.32282,1.20277 -1.66495,2.02882 -0.34214,0.826 -0.43164,1.735 -0.25719,2.6119 0.17446,0.8769 0.60503,1.6824 1.23727,2.3146 0.63224,0.6322 1.43771,1.0627 2.31471,1.2371 0.8769,0.1743 1.7858,0.0848 2.6118,-0.2574 0.826,-0.3422 1.532,-0.9217 2.0287,-1.6651 0.4967,-0.7435 0.7618,-1.6175 0.7617,-2.5116 0,-0.5937 -0.1169,-1.1815 -0.344,-1.7299 C 15.9466,9.719 15.6136,9.22066 15.1938,8.80091 14.7741,8.38116 14.2757,8.04822 13.7272,7.82109 13.1787,7.59397 12.5909,7.47712 11.9973,7.47721 Z m 0,7.45429 c -0.5806,0 -1.148,-0.1721 -1.6307,-0.4946 C 9.88388,14.1143 9.50767,13.6559 9.28551,13.1196 9.06335,12.5833 9.00523,11.9931 9.11848,11.4237 9.23174,10.8543 9.51128,10.3313 9.92178,9.92085 10.3323,9.51036 10.8553,9.23081 11.4246,9.11756 11.994,9.0043 12.5842,9.06243 13.1205,9.28459 c 0.5363,0.22215 0.9948,0.59836 1.3173,1.08101 0.3225,0.4827 0.4946,1.0502 0.4946,1.6307 0,0.7785 -0.3092,1.5251 -0.8597,2.0755 -0.5504,0.5505 -1.297,0.8597 -2.0754,0.8597 z m 0,-10.15082 c 2.3506,0 2.6287,0.00909 3.5571,0.05137 0.8582,0.03913 1.3243,0.1824 1.6346,0.30295 0.3828,0.14096 0.7291,0.36604 1.0134,0.65867 0.2926,0.28423 0.5177,0.63052 0.6586,1.01334 0.1206,0.31029 0.2639,0.77642 0.303,1.63461 0.0423,0.92843 0.0514,1.20657 0.0514,3.55718 0,2.3506 -0.0091,2.6287 -0.0514,3.5572 -0.0391,0.8581 -0.1824,1.3243 -0.303,1.6346 -0.1466,0.3795 -0.3709,0.7242 -0.6586,1.0119 -0.2877,0.2877 -0.6324,0.5121 -1.012,0.6587 -0.3103,0.1205 -0.7764,0.2638 -1.6346,0.3029 -0.9281,0.0423 -1.2066,0.0514 -3.5571,0.0514 -2.35063,0 -2.62912,-0.0091 -3.5572,-0.0514 C 7.58331,19.125 7.11718,18.9817 6.80689,18.8612 6.42407,18.7202 6.07778,18.4951 5.79355,18.2025 5.50093,17.9183 5.27584,17.572 5.13488,17.1892 5.01433,16.8789 4.87107,16.4127 4.83193,15.5546 4.78965,14.6261 4.78056,14.348 4.78056,11.9974 4.78056,9.6468 4.78965,9.36865 4.83193,8.44023 4.87107,7.58203 5.01433,7.1159 5.13488,6.80561 5.27584,6.42279 5.50093,6.0765 5.79355,5.79227 6.07778,5.49965 6.42407,5.27456 6.80689,5.1336 7.11718,5.01305 7.58331,4.86979 8.4415,4.83065 9.36993,4.78837 9.64807,4.77928 11.9987,4.77928 Z m 0.0014,-1.58744 c -2.39081,0 -2.69062,0.01013 -3.62953,0.05311 C 7.43026,3.28933 6.79116,3.43923 6.23103,3.65693 5.64371,3.87792 5.11163,4.22433 4.67189,4.67201 4.22484,5.11192 3.87904,5.64398 3.65856,6.23115 3.43912,6.79128 3.29026,7.43108 3.24763,8.3679 3.205,9.30471 3.19452,9.60661 3.19452,11.9974 c 0,2.3908 0.01013,2.6906 0.05311,3.6295 0.04298,0.9389 0.19149,1.5766 0.40918,2.1367 0.22099,0.5874 0.5674,1.1194 1.01508,1.5592 0.43982,0.4476 0.97187,0.7941 1.55914,1.0154 0.55908,0.2173 1.19993,0.3662 2.13674,0.4092 0.93681,0.043 1.23872,0.0527 3.62953,0.0527 2.3907,0 2.6905,-0.0101 3.6295,-0.0527 0.9389,-0.0426 1.5766,-0.1919 2.1367,-0.4092 0.5847,-0.2262 1.1158,-0.5721 1.5591,-1.0154 0.4434,-0.4434 0.7892,-0.9744 1.0155,-1.5592 0.2173,-0.5591 0.3662,-1.1999 0.4091,-2.1367 C 20.7902,14.6901 20.8,14.3882 20.8,11.9974 20.8,9.60661 20.7899,9.3068 20.7472,8.3679 20.7046,7.42899 20.5554,6.79128 20.3381,6.23115 20.1168,5.64388 19.7703,5.11183 19.3226,4.67201 18.8827,4.22496 18.3507,3.87916 17.7635,3.65867 17.2034,3.43923 16.5636,3.29038 15.6268,3.24775 14.6899,3.20512 14.388,3.19464 11.9973,3.19464 Z';
  --icon-flickr: var(--icon-external-source-placeholder);
  --icon-vk: var(--icon-external-source-placeholder);
  --icon-evernote: var(--icon-external-source-placeholder);
  --icon-box: var(--icon-external-source-placeholder);
  --icon-onedrive: var(--icon-external-source-placeholder);
  --icon-huddle: var(--icon-external-source-placeholder);
}

You can change any of their values to customize your icons.

How to customize styles

Apply new styles using the special property shadowStyles. To do this, you need to override the default File Uploader styles using the shadowStyles static property.

import * as LR from "@uploadcare/blocks";

LR.FileUploaderRegular.shadowStyles = /* CSS */ `
  :host lr-simple-btn button {
    background-color: #f00;
  }
`;

LR.registerBlocks(LR);

lr-simple-btn is a Custom Element LR.SimpleBtn that renders the Button. In this example, we updated the background color of the Button.

How to import custom styles from the file

In the example above we used the shadowStyles property to define the string that contained the CSS styles. It's a bit inconvenient to write styles in the JS file as a string (hello styled-components), so you can import them from the file. But you need to configure your bundler to resolve CSS imports as inline string.

With Vite, it's possible using the Explicit URL Imports feature out of the box:

import myStyle from './style.css?inline'

LR.FileUploaderRegular.shadowStyles = myStyle;

With Webpack 5, it's possible using the Asset Modules. Here is an example of the webpack config:

{
   module: {
    rules: [
      {
        resourceQuery: /inline/,
        type: 'asset/source',
      },
    ]
 },
}

Then you can use ?inline resource query to import CSS as a string:

import myStyle from './style.css?inline';

LR.FileUploaderRegular.shadowStyles = myStyle;